如何使用模型驅動的表單來驗證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