Formular-Provider ngForm

Question

Ich habe das folgende Problem. Ich möchte mit NG2 Forms arbeiten. Gemäß der Dokumentation von angular 2, mit der ngForm-Direktive auf dem Formular und der ngControl-Direktive auf der Eingabe, sollte das Formular immer Zugriff auf die Gültigkeit der Eingabe haben.
 
Das funktioniert, wenn die Eingaben in der gleichen Komponente wie das Formular sind, aber sobald ich die Eingaben in eine Child-Direktive verschiebe, bekommen sie den ngForm-Provider nicht mehr.
 
Dies funktioniert:

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

Allerdings bedeutet dies nicht:

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

Da dies wirft:

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

Sobald ich das ngControl-Attribut entfernen Bei der Eingabe verschwindet der Fehler, aber die Form im Elternteil erhält keinerlei Informationen über die Eingabe Mehr. Wie gehe ich vor, um die ngForm an die Kindkomponente zu übergeben?
Vielen Dank im Voraus.

Answer 1

Hier ist ein kleines Beispiel:

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

Ich habe zwei Dinge vor allem:
1- Sie haben nur Zugriff auf das Formular im übergeordneten Objekt und nicht im untergeordneten Element. Ich habe eine weitere Eingabe hinzugefügt, damit Sie sie weitergeben können.
2-Es gibt zwei Möglichkeiten, eine Kontrollgruppe zu erstellen, eine implizit wie die ist, die Sie mit ngForm tat und ngControl, und das andere ist explizit, wie ich mit ngFormModel tat und ngFormControl, die zweite Sie mehr Kontrolle über die Form gibt also kannst du solche Sachen machen.

Ich empfehle Ihnen, diesen Link zu lesen: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/