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:

During the typing,when the input field is in focus, dont show the validation messages.
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.
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.

Rahul Singh · Accepted Answer · 2017-05-04 17:51:04Z

0

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]],
});

answered May 4, 2017 at 17:51

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom Validation Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related