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

当我输入无效的电子邮件地址时，错误消息正在显示。当我输入有效的电子邮件地址时，该消息也会显示。输入有效的电子邮件地址时，字符串＆＃34;有效＆＃34;在我的控制台中记录，这意味着我的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; // <-------
  }
}

Answer 2

AbstractControl只有在条件有效的情况下才会返回true，否则会返回null代替代码段1使用代码段2： -

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

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

2 个答案: