formArray的角异步自定义验证器

Posted 2023-02-15

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

我想要的是计算所有动态字段中的总计值，如果超出总数，则显示错误消息。

问题是，当我使用valuchange遍历formarray，然后返回对resolve的promise时，它仅显示第一个字段的验证错误。以下是堆叠闪电战。您可以在控制台中看到。当您键入超出总数的数字时，它将在第一个字段中显示错误。对于其余的，如果您超过总数，则不会显示错误。 https://stackblitz.com/edit/angular-sbidt3

答案

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

阅读相关内容，例如：https://medium.com/@realTomaszKula/angular-cross-field-validation-d94e0d063b61https://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>