I need help figuring out how to use the email pattern error for validation using the hasError function in Angular 2. My goal is to apply the invalid class to my input field. Below, you can see the code from registration.component.html:
<div class="input-field col s6">
<input id="Email" type="email" [formControl]="myCustomForm.controls['email']" [ngClass]="{invalid: myCustomForm.controls['email'].touched && myCustomForm.controls['email'].hasError('required')}">
<label for="Email">Email</label>
</div>
And here's the code snippet from registration.component.ts:
constructor(private fb: FormBuilder, private ASD: AppStartupData, private af: AngularFire) {
this.registration_id;
this.svc_AppStartupData = ASD;
this.myCustomForm = fb.group({
"first_name": ['', Validators.required],
"middle_name": [''],
"last_name": ['', Validators.required],
"gender": ['', Validators.required],
"email": ['', Validators.compose([Validators.required, Validators.pattern("^[a-zA-Z0–9_.+\\-\\]+@[a-zA-Z0–9-]+.[a-zA-Z0–9\\-\\.]+$")])],
"password": ['', Validators.required],
"telephone": ['', Validators.required],
"cities": ['', Validators.required],
"address": ['', Validators.required],
"dob": ['', Validators.required]
});
}