有一个简单的动态生成表单
this.submitForm = this._fb.group({
'tournamentid': new FormControl(null),
'participants': this._fb.array([ ], [CustomValidators.uniqueBy('nric'), this.averageAgeValidator(45)])
});
添加玩家事件将动态添加以下代码
addPlayers(): FormGroup {
return this._fb.group({
'nric': new FormControl(null, [Validators.required]),
'nricname': new FormControl(null, Validators.required),
'dob': new FormControl(null, Validators.required),
});
}
我想验证所有动态添加的表单字段的平均DOB是否为45年。有计算年龄的功能,我有一个日期组件来获取日期。需要知道如何遍历formarrays并获得dob字段并获得它的平均值。
当所有添加的玩家的平均年龄为45岁时,我的averageAgeValidator函数应如何工作以标记错误。请建议
我在反应形式中添加了自定义验证器,它对我有用。
表单定义,其中partnerEmailArray是一组电子邮件,partnerEmail是具有自定义验证的字段。
createPartnerForm() {
this.createPartnerForm = this.partnerFormBuilder.group({
partnerName: new FormControl({}, Validators.required),
partnerEmailArray: this.partnerFormBuilder.array([this.partnerFormBuilder.group({
partnerEmail: [{}, [Validators.required, this.emailValidator(this.re)]]
})])
})
验证器功能
emailValidator(emailRe: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const email = emailRe.test(control.value);
return email ? null : { 'CustomEmail': { value: control.value } };
};
}
获取表单和表单数组
get Partnerform() {
return this.createPartnerForm.controls; }
get PartnerformEmail() {
return this.createPartnerForm.get('partnerEmailArray') as FormArray;}
在HTML中,
<label>Email address</label>
<div class="email" formArrayName="partnerEmailArray">
<div *ngFor="let item of PartnerformEmail.controls; let $index=index" [formGroupName]="$index">
<input type="text" class="form-text form-control" id="email"
formControlName="partnerEmail">
<div *ngIf="Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.touched && Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors">
<div *ngIf="Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.required" class="validationMessage">
Partner Email is required.
</div>
<div *ngIf="!Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.required && Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.CustomEmail" class="validationMessage">
Partner Email is invalid.
</div>
</div>
</div>
</div>
你试过自定义验证器吗?
'dob': new FormControl(null, [Validators.required,this.customValidator]),
customValidatorForUrl (control: AbstractControl) {
// you can acccess value using "control.value"
// do the calculation and return true\false as per your calculation
return true/false;
}