Angular 5 - 条件验证器不起作用答案

【问题标题】：Angular 5 - Conditional validators not workingAngular 5 - 条件验证器不起作用
【发布时间】：2018-06-11 13:13:32
【问题描述】：

如果电子邮件字段不为空，则重新发送电子邮件字段必须为“必填”，为此，我需要在重新发送电子邮件字段中添加条件基本验证器，我试过下面的代码，

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(…)

【问题讨论】：

您是否从 '@angular/forms' 导入了验证器？
是的，我已经从 '@angular/forms' 导入了验证器

标签： angular typescript validation angular5

【解决方案1】：

我得到了关键解决方案。实际上问题是我在将验证器设置为控制后没有执行方法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();
}

【讨论】：