在 Angular 2 中验证电子邮件答案

【问题标题】：Validate Email in Angular 2在 Angular 2 中验证电子邮件
【发布时间】：2017-10-03 21:45:44
【问题描述】：

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

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

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

export class EmailValidatorDirective {

  constructor() {}
}

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

【问题讨论】：

请参考答案，并尝试实施。最好是自定义指令stackoverflow.com/questions/34072092/…

标签： angular angular2-forms angular2-directives

【解决方案1】：

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

由于Angular v4.0.0-beta6 有一个内置的电子邮件验证器。

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

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

DEMO

【讨论】：

【解决方案2】：

您也可以通过pattern 轻松实现。喜欢：

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

【讨论】：

是的，我做了所有这些，但我需要以某种方式执行以下操作，并且我正在寻找最佳解决方案：1. 键入时隐藏验证消息 2. 当您键入然后删除时 - 显示味精：需要电子邮件 3. 如果您在电子邮件无效时在输入之外键入并单击 - 味精 = 电子邮件无效 4. 当您返回该字段时 = 隐藏所有以前的验证消息对我自己来说很难做到：/跨度>