Question

嗨，我有一个表单，其中包含我正在使用formArray的数量的动态字段。用户可以生成多个金额字段。

我想要的是计算所有动态字段中的总计值，并在超过总计时显示错误消息。

问题是当我在客户验证器函数中循环formArray时，它不会打印出完整的值。以下是堆叠闪电战。您可以在控制台中看到。当您键入一些数字时，它并不能完全打印出来。

https://stackblitz.com/edit/angular-sbidt3

Answer 1

你好吗。

遵循您的代码有点困难，但是我认为我找到了问题的根源。 您正在使用getter函数来循环ngFor 。你不应该

每次更改检测时都会重新评估Getter函数，这意味着将重新创建数组，这就是为什么您在控制台上看到的值是前一个值的原因。

我真的建议您遵循一个指导性示例（例如https://medium.com/aubergine-solutions/add-push-and-remove-form-fields-dynamically-to-formarray-with-reactive-forms-in-angular-acf61b4a2afe这样的示例）来添加动态表单字段。

干杯！

Answer 2

在跟随Miguel的精彩解释之后，我认为这是解决此问题的一种方法，尽管我不会推荐那么多：

setTimeout(() => {
        this.add_conversion_form.controls.map(res=>{
        console.log(res.value);
        let sum  = Number(res.value.amount);
        total = total + sum;
        console.log("total:"+ total);
    });
})

编辑

实际上，它可能与变更检测以及所有这些好东西无关。

因此，您在FormControl上设置了一个验证器，并且在该验证器中，您尝试从FormControl获取FormGroup实例，即当前FormControl的父级。

另外，请注意，FormControl的值为_pending，这使我认为FormControl中的值不会立即传输到其FormGroup的父级。

因此，我认为这就是为什么您无法在FormControl中获得更新后的值的原因。

但是，如果您为validator设置了FormGroup，则可以看到更新的值，这对我来说很有意义。

<form [formGroup]="form">
  <input formControlName="name" type="text" />
</form>

/* ... */

ngOnInit () {
 this.form = this.fb.group({
    name: this.fb.control('', this.customVal.bind(this))
  })

  this.form.validator = (g) => {
    // Here you should have the updated value
    console.log('f group validator', g)
  }
}

public customVal (c: FormControl) {
   // The current control's value is not reflected in the parent FormGroup from here
   console.log(this.form)

   console.log(c.value)

  return null;
}

/* ... */

formArray循环不完整的值

2 个答案:

编辑