formArray的Angular异步自定义验证器

Question

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

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

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

Answer 1

您不应该使用valueChanges。您实际想要的是跨表单验证。

阅读相关内容，例如：https://medium.com/@realTomaszKula/角度交叉场验证-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>