フォームプロバイダーngForm

Question

私は次の問題があります。 NG2フォームで作業したい。角度2のドキュメントによると、フォーム上のngFormディレクティブと入力側のngControlディレクティブを使用すると、フォームは常に入力の有効性にアクセスする必要があります。
 
これは、入力がフォームと同じコンポーネントにある場合に機能しますが、入力を子ディレクティブに移動するとすぐにngForm-Providerを取得できなくなります。
 
これは動作します：

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

しかし、これにはない：

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

これはスローのよう：

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

をできるだけ早く私からngControl属性を削除して入力はエラーが消えますが、親のフォームは入力に関する情報を何も受け取りませんもっと。 ngFormを子コンポーネントに渡すにはどうしたらいいですか？
ありがとうございます。

Answer 1

ここで少し例を示します

フォーム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: "" 
    } 
} 

フォーム入力-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; 
} 

私は主に二つのことをやった：
1-子オブジェクトにない親オブジェクトのフォームにしかアクセスできないため、別の入力を追加して渡すことができます。
2-ありControlGroupを作成する2つの方法、1が暗黙のうちにあなたがngFormとngControlで行ったもののようである、と私はngFormModelとngFormControlで行ったように、他の1は明示的で、二番目はあなたにフォームをより詳細に制御できますがありますこのようなことができます。

私は、このリンクを読んですることをお勧めいたします：http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/