2016-06-23 5 views
2

現在、私のAngular 2フォームを最近導入されたForm APIに変換していますが、FormGroupで定義されているコントロールのディレクティブにネストされた入力を接続する際に問題があります。私はこの(活字体で)のようなフォームのコンポーネントでフォームおよび検証を定義新しいAngular 2フォームでNgModelをFormControlにバインドする

:HTMLで

model = { 
    foo: 12.34 
} 

amount: : FormControl = new FormControl('', Validators.required); 

ngOnInit() { 
    this.fooFormGroup = new FormGroup({ 
     amount: this.amount, 
     });  
    this.form.addControl("formGroup", this.formGroup); 
} 

、Iは、名前プロパティを持つ入力にフォームをフック。ディレクティブで

<fieldset> 
    <form [formGroup]="fooFormGroup "> 
     <custom-input-for-decimals [decimals]="4" [value]="model.amount" (valueChange)="model.amount = $event" controlname="amount"></custom-input-for-decimals> 
    </form> 
</fieldset> 

、I更新とプリフォーマットngModel値(例えば、4を超えて小数点以下をカット):これは私はこのような入力を埋め込むカスタムディレクティブを使用する場合を除いて、機能します。これは、テンプレートのname属性として設定されているコントロール名プロパティ取ります

template: '<input type="text" [(ngModel)]="inputValue" (blur)="onBlur()" name="{{controlname}}">' 

をしかし、これはformcontrolとngModelの間にフックを作成しません。 formGroupタグと同じコンポーネント内で、私が指示を使用する場所の隣に追加の隠し入力を追加する場合にのみ動作します。しかし、これは少し冗長なようです。より良い解決策がありますか?

NB: FormControlをディレクティブに渡し、そのフォームコントロールプロパティの名前を使用しても機能しませんでした。入力を自分自身の形でネストすることは、隠された入力よりも冗長ではありません。

答えて

1

私は、コントロール自体をディレクティブに渡し、[formControl] = "control"を使用して入力にフックして解決しました。

関連する問題