Angular 2-自定义验证器始终返回true，即使条件为false

我为电子邮件地址编写了一个自定义验证程序，如下所示：

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

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

我正在使用验证程序在我的页面上显示一条错误消息，其中包含以下html：

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

---

当我输入一个无效的电子邮件地址时，错误消息会显示出来。当我输入一个有效的电子邮件地址时，信息也会显示出来。当输入有效的电子邮件地址时，字符串“valid”将记录在我的控制台中，这意味着我的emailValidator返回false，这将使错误消息消失。是否考虑过可能出现的问题？

如果验证成功，则需要返回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; // <-------
  }
}

函数emailValidator（控件：FormControl）：{[s:string]：boolean}{
如果（！control.value.match（/^[a-z0-9！$%&'*+\/=？^ `{124;}-]+@[a-z0-9]（[a-z0-9-]*[a-z0-9]）？（\[a-z0-9]（[a-z0-9-]*[a-z0-9]）+$/i））{
console.log（'invalid'）；
返回{invalidEmail:true}；
}否则{
console.log（'valid'）；
返回null；//
AbstractControl
只有在条件有效时才能返回
true
，否则将返回null，因此使用snippet 2代替snippet 1：-

第1段：-

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

Snipper-2（解决方案）：-

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