角2 - 自定義的驗證總是返回true，即使條件爲假

Question

我已經寫了電子郵件地址，自定義驗證，看起來像這樣：

function emailValidator(control: FormControl): { [s: string]: boolean } { 
    if (!control.value.match(/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)+$/i)) { 
     console.log('invalid'); 
     return {invalidEmail: true}; 
    }else{ 
     console.log('valid'); 
     return {invalidEmail: false}; 
    } 
} 

我使用驗證器顯示錯誤信息我的頁面下面的HTML上：

<div class="formError" *ngIf="myForm.controls['email'].hasError('invalidEmail')"> 
     <p> 
      <i class="fa fa-exclamation-triangle"></i> Enter your email address. 
     </p> 
    </div> 

我FormGroup看起來是這樣的：

this.myForm = fb.group({ 
    'content' : ['',Validators.minLength(10)], 
    'email' : ['',Validators.compose([Validators.required,emailValidator])], 
    'name' : ['',Validators.required], 
    'captcha' : ['',this.captchaValidator(this.captchaA,this.captchaB)] 
}); 

當我輸入一個無效的電子郵件地址時，顯示錯誤消息，因爲它應該這樣做。當我輸入有效的電子郵件地址時，該消息也顯示。當輸入有效的電子郵件地址時，我的控制檯中會記錄字符串「valid」，這意味着我的emailValidator返回false，這應該會使錯誤消息消失。任何關於什麼可能是問題的想法？

Answer 1

如果驗證成功，你需要返回null，不是一個對象：

function emailValidator(control: FormControl): { [s: string]: boolean } { 
    if (!control.value.match(/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)+$/i)) { 
    console.log('invalid'); 
    return {invalidEmail: true}; 
    } else { 
    console.log('valid'); 
    return null; // <------- 
    } 
}