How to delay input validation in Angular 2+

Question

In AngularJS, you could set a input with a directive to delay validation with

link(scope, elem, attr, ngModel) {
    ngModel.$overrideModelOptions({
        updateOn: 'default blur',
        debounce: {
            blur: 0,
            default: 500,
        },
    });
}

What this does is: when the input changes, a 500 millisecond delay is given before the input validates from valid/invalid.

In Angular2+, this seems more difficult. I think I can listen to the changes with observables and update validation that way, but how do I tell the initial input to not validate?

Possible duplicate of [Angular and debounce](https://stackoverflow.com/questions/32051273/angular-and-debounce) — Philipp Meissner, Apr 05 '18 at 20:17

score 12 · Accepted Answer · answered Apr 05 '18 at 20:28

Since Angular 5.0 have more control on when to run your form validations. You can configure the validations to run either on blur or submit using updateOn options.

Reactive Forms Examples:

Will run validators on form control blur:

new FormControl(null, {
  updateOn: 'blur'
});

Will run validators after the form is submitted:

new FormGroup({
  fistName: new FormControl(),
  lastName: new FormControl()
}, { updateOn: 'submit' });

Template Driven Forms:

Will run validators on form control blur:

<input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}">

Will run validators after the form is submitted:

More info in the docs

As someone in the comments mentioned, you can also subscribe to the form value changes stream, but if you are interested in delayed form validation, you should probably be looking into the updateOn property.

Thanks for the post. It looks like I do need the `updateOn`. I'm guessing this input directive will now require to be wrapped in a FormBuilder component? There's no way to create a formcontrol on itself? — Mike DiDomizio, Apr 06 '18 at 18:30

How to delay input validation in Angular 2+

1 Answers1