How to capture touched event on angular reactive form field?

Question

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
 })
}

score 2 · Answer 1 · answered Feb 01 '19 at 03:30

2

Use the (mousedown) event in Angular

Here is a quick demo StackBlitz

answered Feb 01 '19 at 03:30

John Velasquez

3,421
2
18
23

I tried that before, but the problem with that is that I will have to add the mousedown event to every single field in the form and my form has 20+ fields so the view will have a bunch of mousedown events all over and it doesn't seem to be a good practice. I'm trying to accomplish this ONLY from the component – HenryDev Feb 01 '19 at 14:01

score 2 · Accepted Answer · answered Feb 02 '19 at 15:54

2

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?)

answered Feb 02 '19 at 15:54

AT82

71,416
24
140
167

Is there a way to create a directive using your code and apply it to the whole form rather then adding the directive to each field? – HenryDev Feb 02 '19 at 17:20
@HenryDev Looks okay to me? https://stackblitz.com/edit/angular-qfrsff?file=app/app.component.ts – AT82 Feb 02 '19 at 17:30
Thanks a lot bro!! – HenryDev Feb 02 '19 at 17:39
1

No problem, glad I could help! :) – AT82 Feb 02 '19 at 17:43
@HenryDev how have you used this approach? have you wrote the same logic in both places (inside valueChange and inside onFocus)? – Ashish Duklan Aug 13 '22 at 02:01

How to capture touched event on angular reactive form field?

2 Answers2