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

Posted 2023-03-13

【中文标题】修复 Angular 反应式表单中另一行的读取值

【英文标题】：Fix Reading Value From Another Row in Reactive Forms In Angular

【发布时间】：2018-07-02 06:16:20

【问题描述】：

如何修复返回的更改？更改为Amount To Pay - Total Amount。问题是在我评价和数量之后它不会改变。它仅在我更改“支付金额”输入中的某些内容后才更改值？ 这是我做的那个。

PLUNKER CODES HERE

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

【参考方案1】：

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

我已经分叉了你的 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。

【讨论】：

我认为您还应该在 itemRows 中使用 valueChanges，因为如果您更改费率或数量的某些内容，它将影响总数。你能编辑你的代码吗？谢谢

你明白我的意思了吗？

顺便说一下，当您混合模板驱动表单和响应式表单时会发生什么？

不客气 :) 我知道两者各有利弊，并且以相同的形式混合它们不是好的做法。可能会提出一个单独的问题。很多资源都在谈论差异（这里有一个很好的链接：***.com/questions/39142616/…），但没有太多谈论混合两者。我想主要的是反应式是同步的，而模板驱动本质上是异步的。混合异步 + 同步 = Zalgo。不惜一切代价避免 zalgo

你能帮我解决这个问题吗？非常感谢。 ***.com/questions/48487672/…