Angular Form Validation - Displaying validation message after delay

Question

I've got an Angular form with text inputs.

One input uses the standard Angular email validator.

I enable the form submit button when the form is valid.

I previously had the form controls validation triggered on blur however, I've been asked to change it back to change as the submit button was disabled / greyed out until they clicked out of the input (it was confusing).

So I've changed validation back to change but now the error messages appear too soon. When the user enters a single character a validation error is displayed which is annoying as they are entering data.

Any idea how I can validate on change but only display the error message after a delay or when they focus out of the input?

I'm sure this is a common problem, but the logic to display the message (below) seems to be used in all examples.

<inm-validation-message
 class="validation-container"
 *ngIf="control && control.invalid && (control.dirty || control.touched)"
 [control]="control">
</inm-validation-message>

Should work if you just drop the control.dirty condition. Control.touched fires once the blur event fires (when the user loses focus on the element). Or you could make it control.dirty && control.touched if you want to keep both. — Sam
– Sam, Commented Oct 3, 2023 at 10:52

Hezy Ziv · Accepted Answer · 2023-10-03 11:30:30Z

1

Im not sure that is the best approach, but if you do wanna use it this is how you can delay the error

delayedTouched: boolean = false;

delay pipe

control.valueChanges.pipe(
  debounceTime(1000)  // Delay of 1 second, adjust as needed
).subscribe(() => {
  this.delayedTouched = true;
});

use

<inm-validation-message
 class="validation-container"
 *ngIf="control && control.invalid && (control.dirty || delayedTouched)"
 [control]="control">
</inm-validation-message>

answered Oct 3, 2023 at 11:30

Hezy Ziv

5,6843 gold badges19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OuttaSpaceTime Over a year ago

This works though I find quite annoying that this would have to be added to every FormControl element

Collectives™ on Stack Overflow

Angular Form Validation - Displaying validation message after delay

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related