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?

Answer 1

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.

1. 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' });

2. 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.