angularhtmlangularjs-ng-form

Angular NgForm with two components

I am trying to do a form with two different components. One parent and one child. I looked into a lot of tutorials and they all talked about doing a service.

However, I found a method on this website. It consists in adding the following in the child component:

viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]

This method is quite nice but I would like to use:

[(ngModel)]="experiment.name"

and not just 

ngModel

Here is the code that I tried to run using this method.

Thank you for help

Solution

  • Create @Input() property experiment instead of normal property in child component and assign from parent 

     <address [experiment]="experiment"></address>

    DEMO