javascript - 如何使用响应式(Reactive)表单向表单添加新控件而不出现错误 : "ERROR InternalError: "too much recursion"?

Question

我的问题与使用 Angular Reactive Form 构建表单有关。

让我们用一个简单的例子来分析我的问题。我创建了一个非常简单的表单，只有两个控件:“价格”和“税”。

目标是从价格和税收控件中捕获用户给出的值，然后求和(价格 + 税收)并将结果作为第三个控件“totalPrice”分配给表单。

这是我的代码:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-admin-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.scss']
})
export class ProductFormComponent implements OnInit {
  productForm:FormGroup
  totalPrice:number;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.productForm = this.buildForm();
    this.countTotalPrice();
  }

  private buildForm() {
    return this.formBuilder.group({
      price: ['', {validators: [Validators.required]}],
      tax: ['', {validators: [Validators.required]}],
    })
  }

  countTotalPrice() : void {
    this.productForm.valueChanges.subscribe( val => {

      if(val.price || val.tax) {
        this.totalPrice = parseFloat(val.price) * parseFloat(val.tax);
        this.addGrossPrice(this.totalPrice);
      }
    });
  }

  addGrossPrice(v) : void {
    if(v > 0) {
      this.productForm.addControl('totalPrice', new FormControl(v));
    }
  }

}

因此，我可以计算“totalPrice”并将其作为第三个控件传递，但不幸的是，上面的代码指示一个错误:“太多递归”。

我的问题是在这种特殊情况下如何避免递归错误，或者您可能会推荐一些更好的方法来实现我的目标。

感谢您的帮助!

Answer 1

发生这种情况是因为每次添加控件时，表单组上的 valueChanges 也会发出，因此您处于添加值更改控件的永无休止的循环中。这里最简单的事情是始终控制表单，只需设置值并抑制事件:

  private buildForm() {
    return this.formBuilder.group({
      price: ['', {validators: [Validators.required]}],
      tax: ['', {validators: [Validators.required]}],
      totalPrice: ['']
    })
  }

  addGrossPrice(v) : void {
    if(v > 0) {
      this.productForm.get('totalPrice').setValue(v, {emitEvent: false});
    }
  }