Custom Validation Angular2

Question

I would like to create custom validation since the one where i used

[hidden]="email.valid && email.untouched"

and other, is not enough for me. I would like to display different messages: 1. Email not valid and 2. Email is required.

Now, when the form is loaded, i have no validation messages displayed, thats good, but the problem is when I want to show/hide message during the typing or clicking outside the field.

What I need:

1. During the typing,when the input field is in focus, dont show the validation messages.
2. Once I type "example@gmail" , and click outside the field, I want to display validation message that email is invalid, but when I click to the field again to resume typing, I would like to remove the message until I exit the input field again.
3. When I delete the content "example@gmail", I want to display the message "Email is required", and again to hide it when I focus the field

I know its a lot but I could really really use help with custom validation. I used pattern for email and valid/pristine/touched but I cant get exactly what I need.

Answer 1

For angular 4 and above:

According to This you can use "email validator".

Example:

If you use template-driven forms:

<input type="email" name="email" email>
<input type="email" name="email" email="true">
<input type="email" name="email" [email]="true">

If you use model-driven forms(aka ReactiveFormsModule) use Validators.email:

this.myForm = this.fb.group({
    firstName: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, <any>Validators.email]],
});