Angular formArray 的异步自定义验证器

Question

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

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

问题是当我循环使用值更改的 FormArray 然后在解析时返回 promise 但它只显示第一个字段的验证错误。 下面是 StackBlitz。 您可以在控制台中看到它。 当您输入的数字超过总数时，第一个字段将显示错误。 对于 rest，如果超过总数，则不会显示错误。 https://stackblitz.com/edit/angular-sbidt3

Answer 1

你不应该使用 valueChanges。 您实际上正在寻找的是交叉表单验证。

阅读它，例如： https://medium.com/@realTomaszKula/angular-cross-field-validation-d94e0d063b61 https://angular.io/guide/form-validation

将验证器绑定到表单

---

编辑：

零件

  biddingForm: FormGroup;

  constructor( private _formBuilder: FormBuilder,) { }

  ngOnInit() {
    this.biddingForm = this._formBuilder.group({
      bidding: this._formBuilder.array([]),
    }, { validator: this.amountValidator });

    this.addBet();
  }

  addBet(){
    this.bidding.push(
      this._formBuilder.control(0),
    );
  }

  get bidding(){
    return <FormArray>this.biddingForm.controls.bidding;
  }

  amountValidator(fg: FormGroup) {
    const values: number[] = (fg.controls.bidding as FormArray).controls.map(
      (control: FormControl) => +control.value, 
    );

    const amount = values.reduce((sum, v) => sum + v, 0);

    return amount <= 50 ? null : { amount: true };
  };

模板

<form [formGroup]="biddingForm">
  <div formArrayName="bidding">
    <div class="col-75" *ngFor="let bet of bidding.controls; let i = index;">
        <input [formControlName]="i" type="text"  required > 
        <div *ngIf="biddingForm.hasError('amount')">
          Maxmimum amount reached
        </div>
      </div>
  </div>
  <button (click)="addBet()">Add</button>
</form>