Question

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

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

问题是当我循环遍历FormArray并进行值更改，然后返回一个关于resolve的promise时，但它仅显示第一个字段的验证错误。下面是StackBlitz。您可以在控制台中看到它。当您键入的数字超过总数时，它将在第一个字段中显示错误。对于其余部分，如果您超过总数，则不会显示错误。 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>

formArray的角度异步自定义验证器

1 个答案: