Angular 2 - Individuelle Validierer gibt immer wahr, auch wenn die Bedingung falsch ist

Question

ich eine benutzerdefinierte Validator für E-Mail-Adressen geschrieben haben, die wie folgt aussieht:

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}; 
    } 
} 

Ich bin mit dem Validator eine Fehlermeldung angezeigt auf meiner Seite mit dem folgenden html:

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

Mein FormGroup sieht wie folgt aus:

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

Wenn ich eine ungültige E-Mail-Adresse eingegeben habe, wird die Fehlermeldung so angezeigt, wie sie sollte. Wenn ich eine gültige E-Mail-Adresse eingegeben habe, wird die Nachricht angezeigt. Wenn eine gültige E-Mail-Adresse eingegeben wird, wird die Zeichenfolge "valid" in meiner Konsole protokolliert, was bedeutet, dass mein emailValidator false zurückgibt und dies die Fehlermeldung verschwinden lassen sollte. Irgendein Gedanke darüber, was das Problem sein könnte?

Answer 1

Wenn die Validierung erfolgreich ist, müssen Sie für null und nicht ein Objekt zurück:

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; // <------- 
    } 
}