NgForm Form Providers

Question

I have the following problem. I want to work with NG2 Forms. According to the angular 2 documentation, using the ngForm directive in the form and the ngControl directive in the input, the form should always have access to the correct input.

This works if the inputs are in the same component as the form, but as soon as I move the input to the child directive, they no longer receive the ngForm-Provider.

It works:

import { Component, Input } from 'angular2/core'; import { FORM_DIRECTIVES } from 'angular/common'; @Component({ directives: [FORM_DIRECTIVES], template: ` <form #heroForm="ngForm"> <input type="text" [(ngModel)]="input.test" ngControl="name"> </form> ` }) export class FormTest1 { public input = { test: "" } } 

However, it is not:

 import { Component, Input } from 'angular2/core'; import { FORM_DIRECTIVES } from 'angular/common'; @Component({ directives: [FORM_DIRECTIVES], template: ` <input *ngIf="data" [(ngModel)]="data.test" ngControl="name"> ` }) export class FormInput { @Input() data; } @Component({ directives: [FormInput, FORM_DIRECTIVES], template: ` <form #heroForm="ngForm"> <form-input [data]="input"> </form-input> </form> ` }) export class FormTest1 { public input = { test: "" } } 

How it throws:

 EXCEPTION: No provider for t! (t -> t) in [null] 

As soon as I remove the ngControl attribute from the input, the error disappears, but the form in the parent device no longer receives any login information. How do I switch ngForm passes to a child component?
Thanks in advance.

Answer 1

Here is a small example:

form-test.component.js

  @Component({ selector: 'form-test', directives: [FormInput, FORM_DIRECTIVES], template: ` <form [ngFormModel]="heroForm"> <br>Is Form Valid? - {{heroForm.valid}}<br> <br>Data: - {{input | json}}<br> <input type="text" [(ngModel)]="input.test1" required [ngFormControl]="heroForm.controls['test1']"> <form-input [hForm]="heroForm" [data]="input"> </form-input> <button type="submit">Submit</button> </form> ` }) export class FormTest1 { public heroForm:ControlGroup; constructor(private _builder:FormBuilder){ this.heroForm = _builder.group({ test1: ["", Validators.required], test2: ["", Validators.required] }); } public input = { test1: "", test2: "" } } 

form-input-test.ts

 @Component({ selector: 'form-input', directives: [FORM_DIRECTIVES,NgForm], template: ` <label>sdsd</label> <input type="text" [(ngModel)]="data.test2" [ngFormControl]="hForm.controls['test2']" required> ` }) export class FormInput { @Input() hForm:ControlGroup; @Input() data; } 

I basically did two things:
1- you only have access to the form in the parent object, and not in the child, I added another input so that you can pass it.
2-There are two ways to create a ControlGroup, one of them is implicitly similar to the one you did with ngForm and ngControl , and the other is the same as I did with ngFormModel and ngFormControl , the second gives you more control over the form so you can do such things.

I recommend you read this link: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/