Form-Provider ngForm

Question

Ho il seguente problema. Voglio lavorare con NG2 Forms. Secondo la documentazione angular 2, usando la direttiva ngForm sul form e la direttiva ngControl sull'input, il form dovrebbe sempre avere accesso alla validità dell'input.
 
Questo funziona se gli input sono nello stesso componente del modulo, ma non appena trasferisco gli input in una direttiva figlio, non ottengono più ngForm-Provider.
 
Questo funziona:

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: "" 
    } 
} 

Tuttavia, questo non:

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: "" 
    } 
} 

Dato che questo getta:

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

Appena posso rimuovere la ngControl-attributo dal l'input, l'errore scompare, ma il modulo nel genitore non riceve alcuna informazione sull'input Di Più. Come faccio a passare il ngForm al componente figlio?
Grazie in anticipo.

Answer 1

Ecco un piccolo esempio:

forma-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: "" 
    } 
} 

forma-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; 
} 

ho fatto due cose principalmente:
1- hai solo accesso al modulo nell'oggetto padre non nel bambino, ho aggiunto un altro input in modo da poterlo passare.
2-Ci sono due modi per creare un controllo alimentati, uno è implicitamente come quello che avete fatto con ngForm e ngControl, e l'altro è esplicitamente come ho fatto con ngFormModel e ngFormControl, la seconda consente un maggiore controllo sulla forma così puoi farti cose come questa.

vi consiglio di leggere questo link: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/