如果电子邮件字段不为空,则必须重新发送电子邮件字段', 为此,我需要在重新电子邮件字段中添加条件基础验证器, 我试过下面的代码,
HTML
<div class="row">
<div class="form-group col-xs-6">
<label class="control-label">Email Address:</label>
<input type="text" class="form-control" (blur)="reEnterEmail()" [ngClass]="{ 'quote-has-error' : startPageForm.controls['email'].invalid && startPageForm.controls['email'].touched}"
formControlName="email">
<label class="text-danger" *ngIf="startPageForm.controls['email'].hasError('pattern') && startPageForm.controls['email'].touched">Email is invalid</label>
</div>
<div class="form-group col-xs-6">
<label class="control-label">Re-enter Email Address :</label>
<input type="text" class="form-control" (blur)= "checkReEmail()" [ngClass]="{ 'quote-has-error' : startPageForm.controls['reEmail'].invalid && startPageForm.controls['reEmail'].touched}"
formControlName="reEmail" id="reEmailId">
<label class="text-danger" *ngIf="startPageForm.controls['reEmail'].touched && message == 'false' &&
this.startPageForm.controls.email.value != this.startPageForm.controls.reEmail.value" >Email is invalid</label>
</div>
</div>
组件
this.startPageForm = new FormGroup({
firstName : new FormControl( '', [Validators.required]),
middleName : new FormControl( '', [] ),
lastName : new FormControl( '', [Validators.required] ),
suffix : new FormControl( '', [] ),
dateOfBirth : new FormControl( this.dateOfBirth, [Validators.required, DateValidator, AgeValidator] ),
gender : new FormControl( this.genderEnumConstants[0].value, [] ),
maritalStatus : new FormControl( this.maritalStatusEnumConstants[0].value, [] ),
aprtUntNumber : new FormControl( '', [] ),
address : new FormControl( '', [] ),
city : new FormControl( '', [Validators.required] ),
stateId : new FormControl( '', [Validators.required] ),
zipcode : new FormControl( '', [Validators.required, Validators.maxLength(5)] ),
isMilitrayAddress : new FormControl( false, [] ),
mobileNo : new FormControl( '', [Validators.required] ),
homeNo : new FormControl( '', [] ),
email : new FormControl( '', [ Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")] ),
reEmail : new FormControl( '', [] ),
notificationMethod : new FormControl( this.notificationMethodEnumConstants[0].value, [] ),
policyTerm : new FormControl( this.policyTermEnumConstants[0].value, [] ),
effectiveDate : new FormControl( effectiveDate, [DateValidator, MinDateValidator] ),
});
reEnterEmail() {
this.startPageForm.controls['reEmail'].setValidators(this.setRequired());
}
setRequired() {
if(this.startPageForm.controls.email.value != null && this.startPageForm.controls.email.value != '') {
return [Validators.required];
} else {
return [];
}
}
在email
字段(blur)="reEnterEmail()"
事件中,我将验证程序设置为reEmail
字段。但我得到了错误。
Uncaught ReferenceError: Validators is not defined(…)
答案 0 :(得分:1)
我得到了关键解决方案。
实际上问题是我在设置Validators来控制之后没有执行方法updateValueAndValidity();
。
<强>组件:强>
reEnterEmail() {
let reEmailControl = this.startPageForm.get('reEmail');
if(this.startPageForm.controls.email.value != null && this.startPageForm.controls.email.value != '') {
reEmailControl.setValidators([Validators.required]);
} else {
reEmailControl.setValidators([]);
}
this.startPageForm.get('reEmail').updateValueAndValidity();
}