CODEWITHSUNDEEP
angulartypescript
HenryDev
HenryDev

Reputation: 4953

How to capture touched event on angular reactive form field?

I've been searching for a solution on this but can't find what I'm looking for. I have this form and as soon as any field gets touched I want to console out a message in ngOnInit. So far if I enter a value in any field I can show a message ("You entered a value"), but I want to be able to show a message when user touches the field. Can anyone point me in the right direction? Here's my code.

LIVE DEMO Thanks a lot in advance!

 ngOnInit() {
 this.myForm.valueChanges.subscribe(res => {
  console.log("You entered a value");
  // Here I want to show a message ("A field has been touched") when any field of the form gets touched
 })
}

Upvotes: 1

Views: 5645

Answers (2)

AVJT82
AVJT82

Reputation: 73357

There isn't anything available out of the box for forms, AFAIK.

I guess you could leverage HostListener that is triggered for example in what dom event you want, for example focusin. You can have that in the component, or create a separate directive.

Sample:

@HostListener('focusin', ['$event']) onFocus(event) {
  console.log('a field was focused!')
}

Hopefully this is a suitable work-around (I guess it would be classified as one?)

Upvotes: 2

John Velasquez
John Velasquez

Reputation: 3451

Use the (mousedown) event in Angular

Here is a quick demo StackBlitz

Upvotes: 2

Related Questions