How do you validate an email field in angular 2 using model driven form

Question

How do you validate an email field in angular 2 using model driven form, this is what I have so far.

This is my form component

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

This is my form html

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

http://stackoverflow.com/questions/34072092/generic-mail-validator-in-angular2 — Sefa, Oct 12 '16 at 17:38

WebArtisan · Answer 1 · 2016-10-12T18:04:46.180

Validation method:

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;
    }

In your component:

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

Note: dnt forget in constructor :

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

How do you validate an email field in angular 2 using model driven form

1 Answers1