角2コンポーネントを使用したフォームレベルの検証

Question

角2の場合親コンポーネントのフォームコントロールコンテナにバインドするカスタムコンポーネントに入力コントロールを追加するにはどうすればよいですか？ （簡潔にするために簡略化コードに続く）

は例えば、私は

@Component{ 
selector:'my-form', 
template:' 
<form [ng-form-model]="myForm"> 
    <my-special-input></my-special-input> 
</form> 
<button [disabled]="!myForm.valid"> 
' 
} 

今すぐ私の特別な入力コンポーネントに私が希望する（結合無効ボタンを注意してください）フォーム要素を持っている

@component{ 
selector:'my-special-input' 
template:' 
    <input ng-control='name' required> 
}' 

ng-control = 'name'はエラーを生成します"ControlContainerのプロバイダがありません！" 私は解決策を探しており、親フォームコントロールコンテナの検証を可能にするものは見つかりませんでした。

私は、私はカスタムコンポーネントに入力を追加する方法はありませんが、画像をカントフォームコントロールのコンテナに追加されます作成したカスタムの再利用可能な入力コンポーネントは、角2

に一般的なシナリオと思うだろうフォームレベルの検証を可能にする方法で親フォームコンポーネントを使用します。

Answer 1

これがシナリオに最適な方法であるかどうかはわかりませんが、うまくいくと思います。

親要素にControlを作成し、それを子に@Inputとして渡すことができます。子はフォーム要素のコントロールとしてそれを使用できます。例えば

（plunk）：

@Component({ 
    selector:'my-special-input' 
    template:` 
     <input type="text" [ngFormControl]='nameControl' > 
    ` 
}) 
export class specialInputComponent implements OnInit{ 
    @Input() nameControl; 
} 

@Component({ 
    selector:'my-form', 
    template:` 
    <form [ngFormModel]="myForm" > 
     <my-special-input [nameControl]="nameControl"></my-special-input> 
    </form> 
    <button [disabled]="!myForm.valid">Submit</button> 
    `, 
    directives: [specialInputComponent] 
}) 
export class formComponent{ 
    nameControl:Control; 
    myForm: ControlGroup; 

    constructor(){ 
     this.nameControl = new Control("", Validators.required); 
     this.myForm = new ControlGroup({special: this.nameControl}); 
     } 
} 

おそらく、また子供にControlGroupを渡し、子供がaddControl()で自身を追加してみましょうが、あなたは更新サイクルは少し厄介を得るに対処する必要があります可能性があります。