javascript - 如何使用模型驱动表单验证 Angular 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....
                } );

注意:不要忘记构造函数:

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