如何在嵌套的形式数组中添加验证?

Question

我有一个计算验证的问题。总配额应为各配额之和。但是，这个总配额应该由用户输入(而不是计算)。如果所有配额都是总和，并且与总配额不相同，则在用户单击保存按钮时触发验证。因为我在表单数组验证中找不到任何解决方案，它是否能够实现?

这是一个StackBlitz:在这里输入链接描述

Answer 1

如果引号和属于formGroup的值，则内部formArray有效。所以需要验证formGroup，而不是formmarray

this.data.sessionList.forEach((x) => {
this.sessionListFormArr.push(
this.fb.group(
{
sessionId: x.sessionId,
totalQuota: x.totalQuota,
enrolTypeList: this.setenrolTypeList(x),
},

{ validator: this.checkTotlalQuotaValidator() }
)
);
});

自定义验证器就是

checkTotlalQuotaValidator(form: FormGroup) {
const totalQuota: number = +form.get('totalQuota').value;
const subQuota:any[]= form.get('enrolTypeList').value;
const sumSubquota=subQuota.reduce((a,b)=>a+b.subQuota,0)
return sumSubquota==totalQuota?null:{error:'should meet the sum'}
}

现在你可以在你的。html中使用这个错误，比如

<div class="col-lg-3 mb-1" style="color:blue">
Total Quota: {{sessionListFormArr.controls[i].errors|json}}
</div>

和

<button [disabled]="sessionListessionDynamicForm.invalid" 
(click)="checkTotal()">save</button>

好吧，每次FormControl或FormGroup发生变化时，都会执行一个Validator，所以Angular会多次执行这个函数。你可以指定这只在提交时执行——在这种情况下，你不能在按钮中使用[disabled]

{ validators: [this.checkTotlalQuotaValidator],updateOn:'submit' }

注意:当你有一个表单时，你应该使用form而不是<div>，并且按钮应该在"表单"内

Answer 2

可以使用下面的代码验证配额。

checkTotal() {
this.sessionListessionDynamicForm.value.sessionList.forEach((session, index) => {
let sum = 0;
session.enrolTypeList.forEach((list) => {
sum += +list.subQuota;
});
if(sum != session.totalQuota){
console.log('session',index+1, 'has mismatch')
//add setError code here
}
});
}

您可以通过在代码

中的标记位置添加代码，为使用setError不匹配的会话添加错误。