データオブジェクトが入力されたネストされたコンポーネントを持つ複雑なリアクティブフォームを作成しようとしています。
私が達成しようとしている動作は、テンプレート駆動型フォームの双方向データバインディングに非常に似ています:ユーザーがフォームの入力を編集すると、データオブジェクトが変更されます自動的に。
しかし、テンプレート駆動型フォームとは対照的に、angular V6のリアクティブフォームでは廃止されているため、[(ngModel)]
は使用できません。
fromGroup.patchValue()
は一方向のバインディングのみを行い、変更イベントを手動でサブスクライブし、データオブジェクトを手動で更新する必要があることを知っています-これは多くの疲れるコードになります。
そのシナリオの回避策はありますか?
私があなたを正しく理解していれば、私がやったのと同じような問題がありました(これがベストプラクティスであるかどうかは本当にわかりません)が、それは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],
});
それが役立つことを願って