Question

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

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，而是使用一个在用户输入时调用的函数。由于单价也是可编辑的，因此我们可以在其上使用相同的功能。所以我建议如下：

在模板中：

<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})
  });
});

无限循环问题。如果必须通过代码而不是通过用户更新，则必须阻止值更改触发，我们可以通过将此{emitEvent: false, onlySelf: true}作为第二个参数传递给patchValue来实现，而不会触发值更改。

一次闪电战供您参考https://stackblitz.com/edit/angular6-dynamic-form-array-5by4ud

使用valueChanges

2 个答案: