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

Question

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

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

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

Answer 1

如果您在使用Angular2反应形式（我认为它排在4.2.5版本）可以设置表单控件将使用验证器，它有内置的电子邮件验证。

请参阅角文档更多信息。

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 {} 

Answer 2

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

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

副本

欲了解更多信息，你可以在这里参考

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