how to do form field validation once the user has left the control in FormBuilder

Question

In my Reactive Form, I have added validations for the fields. The form is at https://stackblitz.com/edit/angular-jx7fdu

I want that the validation should happen once the user has left the input field. How could I do it? I found this answer on SO but it seems it would work if I use FormControl directly and not with FormBuilder because a FormBuilder doesn't take AbstractControlOptions parameter it seems.

Angular2 - FormControl Validation on blur

Answer 1

You are showing errors, when the form input

1. has an error
2. has been touched or is dirty

When you focus a form input, nothing changes. When you enter any character into it, it becomes dirty (still untouched), when you leave it, it becomes dirty and touched.

Thus, if you want the error message to show up, after you left the input field, then change your code from

(this.control.dirty || this.control.touched);

to

(this.control.dirty && this.control.touched);

Because then you show the validation error, when somebody has both changed and touched a control, not just either (which would show error, even when you are still focused on one input).