您如何使用模型驱动表单验证 Angular 2 中的电子邮件字段答案

【问题标题】：How do you validate an email field in angular 2 using model driven form您如何使用模型驱动表单验证 Angular 2 中的电子邮件字段
【发布时间】：2017-02-21 15:02:27
【问题描述】：

您如何使用模型驱动表单验证 Angular 2 中的电子邮件字段，这就是我目前所拥有的。

这是我的表单组件

export class signinComponent {
    signinform: FormGroup;
    constructor(public fb: FormBuilder) {
        this.signinform = this.fb.group({
           name: ['', Validators.required],
            email: ['', Validators.required]
        });
    }   
}

这是我的表单 html

<form class="ui form" [formGroup]="signinform" novalidate>
    <div>
        <input type="email" class="emailinput" [formControl]="signinform.controls['email']" placeholder="Email Address">
    </div>
</form

【问题讨论】：

stackoverflow.com/questions/34072092/…

标签： javascript angular typescript angular2-forms

【解决方案1】：

验证方法：

authEmailValidation( control: FormControl ): {[s:string]:boolean} {
        let pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        if ( !pattern.test( control.value ) ) {
            return { email: true };
        }
        return null;
    }

在您的组件中：

this.signinform = this.fbuilder.group( {
                    email : ["", [this.authEmailValidation]],
                    // Other fields....
                } );

注意：dnt忘记在构造函数中：

private signinform : FormGroup;
private fbuilder: FormBuilder 
// and import them

【讨论】：