In angular, simple solution to display validation messages on focus event while using valueChange method in reactive forms?

Question

while using this code:

firstNameControl.valueChanges.debounceTime(1000).subscribe(value => this.setFirstNameMessage(firstNameControl));

The validation message is only displayed if the value in the input box changes as valueChanges method only watches value change in the input box. I want to display the message on focus events also.

Answer 1

You can try out the

Pristine property or touched property

Something like this

firstNameControl.pristine

Or

firstNameControl.touched

This will return a Boolean and based on that you can show your message.