web-dev-qa-db-ja.com

angular 6リアクティブフォームでの双方向バインディング

データオブジェクトが入力されたネストされたコンポーネントを持つ複雑なリアクティブフォームを作成しようとしています。

私が達成しようとしている動作は、テンプレート駆動型フォームの双方向データバインディングに非常に似ています：ユーザーがフォームの入力を編集すると、データオブジェクトが変更されます自動的に。

しかし、テンプレート駆動型フォームとは対照的に、angular V6のリアクティブフォームでは廃止されているため、[(ngModel)]は使用できません。

fromGroup.patchValue()は一方向のバインディングのみを行い、変更イベントを手動でサブスクライブし、データオブジェクトを手動で更新する必要があることを知っています-これは多くの疲れるコードになります。

そのシナリオの回避策はありますか？

angularangular6angular-reactive-formstwo-way-binding
10
Idan Abrashkin

私があなたを正しく理解していれば、私がやったのと同じような問題がありました（これがベストプラクティスであるかどうかは本当にわかりません）が、それはHTMLで私にとってはうまくいきます：

<mat-form-field class="mat-container">
    <input matInput  [formControl]="generalDiscount" type="number" 
        formControlName="generalDiscount" 
        (input)="course.amounts.generalDiscount = $event.target.value" <-the workaround 
        placeholder="Discount" required="required">
</mat-form-field>

この入力により、双方向バインディングになり、.tsクラスでは、フォームグループに同じフィールドを次のように配置する必要があります。

this.amountGroup = this._formBuilder.group({

    [this.course.amounts.fitToNomberOfPeople,Validators.required],
    generalDiscount:[this.course.amounts.generalDiscount,Validators.required],

});

それが役立つことを願って

5
oren