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

Question

我知道我们可以在 FormArray 上使用 valueChanges 并在键入时查看更改。我的问题很直接：如何在 valueChanges 中执行array.at(i).patchValue？我需要知道我键入值的行的索引并更新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;">

和功能：

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

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

onValChanges(): void {
  this.form.get('fdnUnitPrice').valueChanges.subscribe((val) => {
    this.capValues.controls.forEach(cap => {
      this.calculate(cap);
    })
  })
}

演示：STACKBLITZ

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

Answer 2

当您有多个时，您正在分配给单个表单数组，我希望您可以在那一刻捕获索引并将其绑定到您的值更改函数

this.myForm = this.fb.group({
  arr1: this.fb.array([this.fb.group({name: [''],pay: ['']})]),
  arr2: this.fb.array([this.fb.group({name: [''],pay: ['']})])
});

// binding index with array index
Object.keys(this.myForm.controls).forEach((item, index) => {
  this.myForm.controls[item].valueChanges.subscribe(value => {
    this.myForm.controls[item].patchValue([{name:value[0].pay + 'xxx'}], {emitEvent: false, onlySelf: true})
    console.log({index,value})
  });
});

进入无限循环的问题。如果通过代码而不是用户进行更新，我们必须阻止 valuechanges 触发，我们可以通过将此 {emitEvent: false, onlySelf: true} 作为第二个参数传递给 patchValue 来做到这一点，它不会触发 valuechanges。

stackblitz 供您参考https://stackblitz.com/edit/angular6-dynamic-form-array-5by4ud