如何使用反应式表单向窗体添加新控件而不会出错："错误内部错误："太多的递归"？

Question

我的问题与使用角反应性形式有关。

让我们使用一个简单的例子来分析我的问题。我只使用两个控件创建了一个非常简单的表格："价格"one_answers"税"。

目标是从价格和税收控制中捕获用户价值给出的目标，接下来，总和(价格 税(，将结果分配给表格为第三个控制" 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));
    }
  }
}

因此，我能够计算"总计"并将其作为第三个控件，但不幸的是，上面的代码表示错误："递归太多"。

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

谢谢您的帮助！

Answer 1

这正在发生，因为每次添加一个控件时，表单组上的Valuechange都会发出，因此您处于添加价值更改控件的永无止境的循环中。这里最简单的事情是始终对表单上的控制权，并设置值和替补事件：

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