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

Question

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

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

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

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

Answer 2

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

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

更多信息可以参考这里

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