如何在 Angular2 中验证电子邮件？

Question

我正在使用 FormGroup、FormBuilder 和 Validators class 来验证Angular2 应用程序中的一个表单。

这就是我定义电子邮件和密码验证所需的验证规则的方式：-

export class LoginComponent implements OnInit {
    loginFormGroup:FormGroup;
    adminLoginmodel = new Admin('', '', '', 'Emailsss','Passwordsss');  

    constructor(
       private route: ActivatedRoute,
       private router: Router,
       private _adminLogin: AdminLoginService,
       fb: FormBuilder
    ){
         this.loginFormGroup = fb.group({
            'email' : [null, Validators.required],
            'password': [null, Validators.required]
         });
    }
}

如何验证给定的字符串是否是有效的电子邮件？

注：

有人刚刚试图将此问题标记为与此重复的问题。

我的问题专门询问了 FormGroup 和 FormBuilder 的实现，甚至在问题的开头也有说明。这是一个很好的例子，说明一些好的和有效的问题是如何被不公平地判断的。希望版主和其他所谓的 "Whosebug-community-builders" 不会编辑此问题以删除此部分。

Answer 1

您必须将模式验证器与正则表达式一起使用：

this.loginFormGroup = fb.group({
    'email' : [null, Validators.pattern('^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')],
    'password': [null, Validators.required]
});

Answer 2

this.loginFormGroup = fb.group({
  'email' : [null, Validators.compose([Validators.required, Validators.email])],
  'password': [null, Validators.required]
});

Compose multiple validators into a single function that returns the union of the individual error maps.

如何在 Angular2 中验证电子邮件？

How to validate an email in Angular2?

angular2-forms

angular

angular2-validators