如何在多个形式字段上进行计算-angular2+

Question

我正在研究角的反应形式，其中我对以下形式有要求

假设我有4个输入字段。

<input type="text" formControlName="a1">
<input type="text" formControlName="a2">
<input type="text" formControlName="a3" value={{a1+a2}}>
<input type="text" formControlName="a4" value={{a1*a2}}>

这里的值基于可以具有任何算术表达式的公式，例如：(a1*a2(/a3

这种形式是动态数据来自一个api，例如

const formData = [
{
id: "a1",
type: 'text',
value: '',
formula: '',
},
{
id: "a2",
type: 'text',
value: '',
formula: '',
},
{
id: "a3",
type: 'text',
value: '',
formula: 'a1+a2',
},
{
id: "a1",
type: 'text',
value: '',
formula: 'a1*a2',
},
];

请帮我。在这里输入图像描述

Answer 1

如果值是固定的，也许你可以这样尝试：

<!-- Better to use type="number" -->
<input type="number" formControlName="a1" (change)="calculate()">
<input type="number" formControlName="a2" (change)="calculate()">
<input type="number" formControlName="a3">
<input type="number" formControlName="a4">

calculate(): void {
const { a1, a2 } = this.form.value;
this.form.get('a3').setValue(a1 + a2);
this.form.get('a4').setValue(a1 * a2);
}

Answer 2

订阅valueChangesObservable以跟踪所需输入的更改，并在每次更改后使用setValue更改其他输入的值。您可能还应该将输入类型更改为number，以避免担心将字符串转换为数字。

使用一个写成字符串的公式是一个完全不同的问题。我认为应该使用String.replaceAll将值应用于公式，使用eval计算结果。

工作演示：https://stackblitz.com/edit/angular-zuy1ed

代码示例：

calculateResult(formValue: any, formulaName: "formula1" | "formula2") {
let formula = this[formulaName];
Object.keys(formValue).forEach(
variable => (formula = formula.replaceAll(variable, formValue[variable]))
);
return eval(formula);
}
setupRecalculation() {
this.form.valueChanges.subscribe(value => {
value.a3 = this.calculateResult(value, "formula1");
value.a4 = this.calculateResult(value, "formula2");
this.form.controls.a3.setValue(value.a3, { emitEvent: false });
this.form.controls.a4.setValue(value.a4, { emitEvent: false });
});
}

---

警告：默认情况下，在表单控件上使用setValue会触发valueChanges事件。为了避免无限循环，请在FormControl.setValue 的第二个参数中使用{ emitEvent: false }

警告2:您在问题中发布的API响应似乎容易受到变量的循环依赖(例如，a3取决于a4，取决于a2，取决于a3等(。应该有一个规则来确保避免这种情况：例如，一个变量应该只取决于它之前的变量。