使用 valueChanges 动态更新 FormArray 中的表单值

Question

我知道我们可以valueChanges在 FormArray 上使用并在键入时查看更改。我的问题很简单：如何执行array.at(i).patchValuein valueChanges？我需要知道我键入值的行的索引并更新FormControls。我想要实现的是例如在计算器中，我想在添加两个数字时动态显示该值，而无需在输入字段外单击。

ngOnInit() {
  this.form = this.fb.group({
    fdnUnitPrice: [''],
    cap_values: this.fb.array([this.fb.group({
      name: '',
      fdnTotalShare: '', 
      fdnVal: '',
    }
    )])
  })
  this.onValChanges();
}

onValChanges(): void {
  this.capValues.valueChanges.subscribe(val => {
    console.log(val.length)
  })
}

在我上面的代码中，结果应该是什么fdnVal，当我fdnUnitPrice与相乘时它应该显示值fdnTotalShare。下一行可能会有不同的值fdnTotalShare，所以fdnVal应该不同。

Answer 1

我不会valueChanges用于 formarray，而是用于在用户输入时调用的函数。由于单价也是可编辑的，我们可以使用相同的功能。所以我建议如下：

在模板中：

<input type="number" formControlName="fdnTotalShare" (input)="calculate(cap)"/>

cap来自哪里：*ngFor="let cap of capValues.controls;">

和功能：

<input type="number" formControlName="fdnTotalShare" (input)="calculate(cap)"/>

然后我们将实际监听valueChanges单价表单控件，然后我们迭代表单数组，并为每个表单组调用calculate函数：

calculate(cap) {
  cap.get('fdnVal').setValue(
    this.form.get('fdnUnitPrice').value * cap.get('fdnTotalShare').value 
  )
}

演示：STACKBLITZ

PS：valuChanges组件销毁时记得退订！