我在計算驗證時遇到問題。總配額應該是每個配額的總和。但是,這個總配額應該由用戶輸入(不是計算)。如果所有配額都是總和并且與總配額的值不同,則當用戶單擊保存按鈕時將觸發驗證。由于我在表單陣列驗證中找不到任何解決方案,它能夠實作嗎?
這是 StackBlitz:在此處輸入鏈接描述
uj5u.com熱心網友回復:
如果引號將屬于 formGroup 的值相加,則您的內部 formArray 是有效的。所以你需要驗證formGroup,而不是formArray
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 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-no<div>
uj5u.com熱心網友回復:
您可以使用以下代碼來驗證配額。
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 將錯誤添加到不匹配的會話中
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/488891.html
上一篇:在vb6中驗證國際電話號碼
