How to trigger form inputs validation on first change in Angular

Question

In my Angular 5 application I would like to override the default validation behaviour of some of my form inputs. In particular, I'd like to immediately trigger the field validation as soon as the user inserts something.

Currently the default behaviour is the following. Assuming that you have, for example, a validator that allows only integers.

Initially the field is pristine and empty:

then the user focus the input and enters some data:

despite the inserted value is not valid (because it's not an integer), the validation is not triggered yet. It will be triggered as soon as the user leaves the focus (for example pressing TAB or focusing another input):

From now on the validation will be triggered at every change.

So if the user goes now back to the field and inserts a valid value, the validator will immediately do its job:

What I would like is to make the validator mark the field as invalid as soon as some non valid data is inserted, even when the user has inserted data for the first time and never left the field yet.

score 0 · Answer 1 · answered Sep 10 '21 at 05:43

0

Use markAsTouched() from the abstractControl Class: https://angular.io/api/forms/AbstractControl#markAsTouched

const ctrl = new FormControl();

ctrl.valueChanges.subscribe((newValue: any): void => {
  ctrl.markAsTouched();
});

answered Sep 10 '21 at 05:43

Snook

174
10

score -1 · Answer 2 · answered Nov 08 '18 at 14:56

I think it works fine if you attach validators right at the time of Form Creation in the component.

Ex:

this.myReactiveForm  = new FormGroup({
  'name': new FormControl(this.user.name, [
    Validators.required,
    Validators.minLength(4)
  ]),

here as soon as the userName becomes more than 4 characters long, you will see the message.

How to trigger form inputs validation on first change in Angular

2 Answers2