修复 Angular 中反应形式的另一行的读取值

Question

如何修复返回的更改？变化是 Amount To Pay - Total Amount。问题是它在我评分和数量后不会改变。它只在我更改支付金额输入后更改值？这是我做的 plunker。

onChanges(): void {
  this.invoiceForm.get('amount').valueChanges.subscribe(val => {
    return this.change = this.invoiceForm.get('amount').value - this.invoiceForm.get('summed').value
  });
}

Answer 1

您目前正在做的是通过尝试将 [ngModel] 输入附加到您的表单控件来混合模板驱动表单和反应表单。您要做的是使用响应式 API，特别是 .setValue() method 设置该表单控件的值。这允许您从组件 class.

更新表单控件的值

我已经 fork 你的 plunkr 并用工作代码更新了它：http://plnkr.co/edit/WqkJpzgdGakHjM2Mnk59?p=preview

我会在这里提供重要的东西以供参考：

this.invoiceForm.get('itemRows').valueChanges.subscribe(values => {
    this.invoiceForm.get('summed')
      .setValue(values.reduce((acc, cur) => acc + cur.itemamt, 0));
});

this.invoiceForm.get('summed').valueChanges.subscribe(value => {
  this.setChange();
});

this.invoiceForm.get('amount').valueChanges.subscribe(() => {
  this.setChange();
});

然后定义一个setChange方法为：

setChange(): void {
  const change = this.invoiceForm.get('amount').value - 
                 this.invoiceForm.get('summed').value;
  this.invoiceForm.get('change').setValue(change);
}

在此处了解有关反应形式的更多信息：https://angular.io/guide/reactive-forms。

修复 Angular 中反应形式的另一行的读取值

Fix Reading Value From Another Row in Reactive Forms In Angular

angular

angular-reactive-forms

angular4-forms