Angular 2 forms distributed by components

Question

I am trying to create a form component in which the component provides <form> and its descendants the contents of the form, i.e. control. I use RC4 with reactive forms. The component should be used as follows:

 <my-formwizard [form]="form"> <input formControlName="name" type="text" /> </my-formwizard> 

Here is a snippet demonstrating the implementation: http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview

I encountered an exception: TypeError: Can't read setParent property from null

Is there a way to execute a reactive form distributed across several components?

---

UPDATE RC5 has a clearer error message, and by entering peeskillet formControlName can be used if the user directive receives a FormGroup attached via the FormGroup property. The updated plunk shows that the form extends to two components:

http://plnkr.co/edit/1VfIH5AYjoe7dmizw6ss?p=preview

Answer 1

In you Plunker, I'm not sure why you have ngForm

 <my-formwizard [form]="form" ngForm="form"> 

but it should not be. I think it can even create a whole new form. This needs to be removed. Once you remove this, you will run into another problem stating that there is no ControlContainer . ControlContainer is a FormGroupDirective ( [formGroup] ).

The problem is caused by formControlName . If you look at the source formControlName directive , and you look at the constructor, you will see that it requires a ControlContainer dependency. But not only that, but also the @Host ¹ decoder, which means that it will only look for the ControlContainer in the host injector.

Honestly, I’m not quite sure that in this case the injector is used as the host injector, but it does not seem to belong to the form group directive. Perhaps because you have the components configured.

In the solution I found instead of formControlName , use [formControl] instead and just pass an instance of FormControl . FormControlDirective does not have this problem (where it needs a ControlContainer ), since it can be used offline.

So you could do it instead

 <input [formControl]="nameCtrl" type="text" /> export class App { form: FormGroup; nameCtrl: FormControl; constructor(fb: FormBuilder) { this.nameCtrl = new FormControl(''); this.form = fb.group({ name: this.nameCtrl }); } } 

This solves your problem. Here's the updated Plunker ,

See also:

• How to solve the creation of a complex form with a large number of custom components? for some design ideas.

---

_{1 - See Host and Visibility ... for a good read in this section}