-1

I've been doing some research on this, but still can't find what I'm looking for. I have a form and would like to capture the touched event. My code looks like this:

this.form.valueChanges.subscribe(res =>{
  if(res !== null){
    console.log('message');
  }
})

If I were to enter a value I can console the value out, but I want to be able to show a message like "field has been touched" when I touch a field.

Devmix
  • 1,599
  • 5
  • 36
  • 73
  • Does this answer your question? [How to observe touched event on Angular 2 NgForm?](https://stackoverflow.com/questions/41337024/how-to-observe-touched-event-on-angular-2-ngform) – LW001 Aug 25 '23 at 19:58

5 Answers5

1

You could use input events to call a function when the user has clicked in a field, entered a value, hit the enter key, or exited a field, depending on what you want specifically.

<input #textfield 
(keyup.enter)="onEnter(textfield.value)" 
(blur)="onBlur(textfield.value)"
>

onEnter(value) {
console.log("User entered this: ",value);
}

onBlur(value) {
console.log("User existed field: ",value);
}
Stephen R. Smith
  • 3,310
  • 1
  • 25
  • 41
  • @Stephene R. Smith This doesn't handle the touched event on a field – Devmix Feb 01 '19 at 02:16
  • My understanding is that a field is ‘touched’ if a user has entered and exited a field without changing its value, so calling a function onBlur notifies you when the control has lost focus, and you could check its ‘dirty’ flag to see if the value was changed. – Stephen R. Smith Feb 02 '19 at 00:45
0
@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: MyCustomFormComponent,
    multi: true
  }]
})
export class MyCustomFormComponent implements ControlValueAccessor, DoCheck {

  private control: AbstractControl;

  private pristine = true;


  ngDoCheck (): void {
    if (this.pristine !== this.control.pristine) {
      this.pristine = this.control.pristine;
      if (this.pristine) {
        console.log('Marked as pristine!');
      }
    }
  }

}

This is what I found. This should work for touch also.

For more information https://github.com/angular/angular/issues/17736

Shashan Sooriyahetti
  • 828
  • 9
  • 21
0

This solution works very smoothly based on https://stackoverflow.com/a/69363347/5063456

const form = new FormControl('');
(form as any)._markAsTouched = form.markAsTouched;
(form as any).touchedChanges = new Subject();
form.markAsTouched = opts => {
  (form as any)._markAsTouched(opts);
  (form as any).touchedChanges.next('touched');
}; 

...

(form as any).touchedChanges.asObservable().subscribe(() => {
  // execute something when a form was marked as touched
});
lilith
  • 11
  • 2
-1

If you are using ReactiveForms check docs:

https://angular.io/api/forms/AbstractControl

It has some properties that you can use to determine if input was touched.

Buczkowski
  • 2,296
  • 12
  • 18
  • I already used that link, but it's still not clear to me how to capture the touched event from the component – Devmix Jan 31 '19 at 18:43
-1

You might want to look at the ng-touched CSS class and try to do it with that. You can try it with a combination of that and the form reference where you can check if the form state. I remember using that for form validation. It might not be what you're trying to do buy it might point you in the right direction.

in my CSS:

input.ng-invalid.ng-touched {
  border: 1px solid red;
}
Noel R.
  • 133
  • 2
  • 6