在 Angular2 中使用模式进行电子邮件验证的最佳方法是什么？答案

【问题标题】：What is the best way for email validation using patterns in Angular2?在 Angular2 中使用模式进行电子邮件验证的最佳方法是什么？
【发布时间】：2018-02-23 09:45:05
【问题描述】：

我正在处理表单验证，其中表单包含一个电子邮件字段并且是文本类型（即输入[type='text']）。我使用模式来验证电子邮件，这意味着使用 RegExp 进行自定义验证。

现在我的问题是我可以验证该字段是否为空。但是，在进行模式验证时，我无法获得预期的结果。

所以我只需要一种使用 Angular2 验证模式的方法。

【问题讨论】：

标签： html validation typescript angularjs-directive angular2-template

【解决方案1】：

如果您在 Angular2 中使用响应式表单（我认为它是在 4.2.5 版中出现的），您可以设置表单控件将使用的验证器，并且它内置了电子邮件验证。

有关更多信息，请参阅 Angular 文档。

https://angular.io/api/forms/Validators

编辑：

这是一个可以运行的 Plunker 示例。

Plunker Example

下面是代码的副本

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="userform">
          <div class="form-group">
             <input type="text" formControlName="userEmail" />
                  <p *ngIf="userform.get('userEmail').hasError('email') && !userform.controls['userEmail'].valid && userform.get('userEmail').touched">Email is invalid.</p>
          </div>
        </form>
  `,
})
export class App implements OnInit {
    userform: FormGroup;

    constructor(private _fb: FormBuilder) { }

    buildForm() {
        this.userform = this._fb.group({
            userEmail: [null, Validators.email]
        });
    }

    ngOnInit() {
        this.buildForm();
    }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule, ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

【讨论】：

你能举一些例子吗
@Ram 为你添加了一个例子
感谢您的示例

【解决方案2】：

您现在可以在 Angular 中简单地使用 email 作为属性（angular4 中的指令）来验证这样的电子邮件验证

<input type="email" name="email" ngModel email>

更多信息可以参考这里

https://angular.io/api/forms/EmailValidator

【讨论】：