カスタムフォームコントロールを親フォームにアングル2で接続する

Question

最近、角度2を使用して独自のカスタムフォームコントロールを作成しようとしました。 カスタムコントロールには2つの入力があり、既存のオブジェクトを既知の構造で編集する必要があります。たとえば：

class model { 
    public fieldOne: number; 
    public fieldSec: number; 
} 

私はここで見つける良い説明に従っ： Guide For Writing custom form controls

それは私がそれを使用してフォームに カスタムコントロールのフォーム検証を接続する方法については言及しなかったガイド以外大丈夫働きました。

カスタムコントロールテンプレートは次のように何とかなります：

<form> 
    <input [(ngModel)]="existingModel.fieldOne"> 
    <input [(ngModel)]="existingModel.fieldSec" required> 
</form> 

そして、我々は価値がある既存のモデルを編集するためにそれを使用します。

{ 
    fieldOne: 20, 
    fieldSec: undefined 
} 

そして、私たちを は簡単な例を見てみましょうこのモデルを編集するカスタムコントロールが必要な私のアプリでは、いくつかのフォームでそれを使用してください：

<form #formVar="ngForm"> 
    <my-custom-control [(ngModel)]="existingModel" required> 
    </my-custom-control> 
</form> 

この種の例は、モデルを編集できるという点で私のアプリで機能します。 問題は、フォームが無効なときにユーザーを表示し、formVar.validを見ると、existingModel.fieldSecが定義されていなくても、カスタムコントロールフォームで必要な検証が行われていてもtrueになります。

Answer 1

カスタムコントロールの動作は正確にはわかりませんが、コンポーネント自体を動的にコンパイルしていても、次の解決策は有効です。

あなたのようなテンプレート駆動型のシナリオでも、反応性のあるコンポーネント（FormGroupとFormControl）を利用して、基礎をなすエンジンが動作します。したがって、プログラムや、グループと子コントロールの階層を変更して、期待どおりに変更を伝達することができます。 あなたは可能性が - 例えば - 他の中NgFormを受け入れ、カスタムコントロールのプロパティを公開：

@Input('form') peerForm : NgForm; 
@Input('entity') model : any; 

次に、あなたのビューにバインディングを設定します。

<form #formVar="ngForm"> 
<my-custom-control [entity]="existingModel" [form]="formVar"> 
</my-custom-control></form> 

あなたのコンポーネントテンプレートは次のようになります。

：あなたのコンポーネントのコードで

<div> 
<input [(ngModel)]="model.fieldOne" #ctrl1="ngModel"> 
<input [(ngModel)]="model.fieldSec" required #ctrl2="ngModel"> 
</div> 

そして、再び

@ViewChild('ctrl1') ngModel1 : NgModel; 
@ViewChild('ctrl2') ngModel2 : NgModel; 
... 
ngAfterViewInit(){ 
    // assuming the form does exist (TODO: check if set here) 
    this.peerForm.control.addControl('entity_fieldOne', this.ngModel1.control); 
    this.peerForm.control.addControl('entity_fieldSec', this.ngModel2.control); 
} 

これで十分です。ここのPlunkerを参照してください：https://plnkr.co/gb3XroZNoGuZa05e76X0