在Angular 2中验证电子邮件

Question

如果我想创建一个验证我的电子邮件的指令，该怎么做？

import { Directive } from '@angular/core';

@Directive({
  selector: '[appEmailValidator]'
})

export class EmailValidatorDirective {

  constructor() {}
}

创建了该指令，但不知道如何实现验证规则/消息。

Answer 1

首先，您不需要编写自己的验证器。

自Angular v4.0.0-beta6以来，有一个内置的电子邮件验证器。

要使用它，请执行以下操作：

<input 
  type="email"
  email
  name="emailField" 
  [(ngModel)]="email" 
  #emailField="ngModel">

DEMO

Answer 2

你也可以通过pattern实现它。喜欢：

<input 
id="email" 
type="text" 
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" 
required>