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>