时间戳

首页 > 解决方案 > 使用 valueChanges 动态更新 FormArray 中的表单值

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

问题描述

我知道我们可以valueChanges在 FormArray 上使用并在键入时查看更改。我的问题很直接：我如何执行array.at(i).patchValuein valueChanges？我需要知道我键入 value 和 update 的行的索引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应该不同。

标签： angularangular-reactive-forms

解决方案

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

在模板中：

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

演示：堆栈闪电战

valuChangesPS：组件销毁时记得取消订阅！

推荐阅读