如何使用模型驱动的表单来验证Angle 2中的电子邮件字段

Question

您如何使用模型驱动的形式验证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

Answer 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