我认为 angular(6+) 的更好答案是 Ajay Gupta 的答案。因为Validators.email 喜欢Krishnadas 的回答,所以让我们传递email@email 之类的东西。但我搜索了更好的模式,并在this 的答案中找到了一个更好的模式,并进行了解释。
如果您使用 prettier 或其他格式化代码的东西(并且总是更好),那么您的正则表达式模式最好介于 / / 字符之间
所以:
this.form = this.formBuilder.group({
email: ['', [
Validators.required,
Validators.pattern(/^[\w]{1,}[\w.+-]{0,}@[\w-]{1,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$/)
]]
});
您可以像这样捕获错误:
<div *ngIf="(email.invalid && email.touched) || email.dirty">
<small *ngIf="email.errors?.required" class="text-danger">email is required</small>
<small *ngIf="email.errors?.pattern" class="text-danger">Please provide a valid email address</small>
</div>
您可以制作自己的验证器,扩展 Validators,以制作您自己的电子邮件验证器:
export class CommonValidators extends Validators {
static email(control: FormControl): ValidationErrors | null {
const value: string = control.value;
if (_.isEmpty(value)) {
return null;
}
const pattern = /^[\w]{1,}[\w.+-]{0,}@[\w-]{1,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$/;
if (!value.match(pattern)) {
return { email: true };
}
return null;
}
}