Angular reactive forms validation while typing

Question

I´m working on this form and want to validate while typing. The current behavior it´s that I select the input, type and when I click on other site then the error it´s showing. I think the error it's happening when i set control, valid and dirty, but i can't figure it out.

Typescript

buildForm(): void {
 this.userForm = this.fb.group({
  'email': ['', [
    Validators.required,
    Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
  ]
  ],
  'password': ['', [
    Validators.required,
    Validators.minLength(6),
    Validators.maxLength(25)
   ]
   ],
 });
 this.userForm.valueChanges.subscribe(data => this.onValueChanged(data));
}

onValueChanged(data?: any) {
 if (!this.userForm) { return; }
 const form = this.userForm;
 for (const field in this.formErrors) {
  // clear previous error message (if any)
  this.formErrors[field] = '';
  const control = form.get(field);
  if (control && control.invalid && control.dirty) {
    const messages = this.validationMessages[field];
    for (const key in control.errors) {
      this.formErrors[field] += messages[key] + ' ';
     }
   }
  }
}

Function onValueChanged() change this object

formErrors = {
  'email': '',
  'password': ''
};

And this object has the validation messages.

validationMessages = {
 'email': {
  'required': 'Email is required',
  'pattern': 'Email is invalid'
 },
'password': {
  'required': 'Password is required',
  'minlength': 'Debe tener 6 caracteres como mínimo',
  'maxlength': 'Password cannot be more than 40 characters long.',
 }
};

HTML

      <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" formControlName="email" required>
          <mat-error *ngIf="formErrors.email" align="start" class="form__error">
            {{ formErrors.email }}
          </mat-error>
        </mat-form-field>     
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Password" type="password" formControlName="password" required>
          <mat-error *ngIf="formErrors.password" align="start" class="form__error">
            {{ formErrors.password }}
          </mat-error>
        </mat-form-field>

mikhail-t · Accepted Answer · 2018-11-14 23:54:15Z

13

Late answer, but I'll post it there in case it may help anyone.

With Angular 6+ you could adjust form validation behavior via onChange FormControl option attribute e.g.:

'email': ['', {
    validators: [
        Validators.required,
        Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
    ],
    updateOn: 'change'
 }]

updateOn can be:

change - validate immediately, on change

blur - validate when navigating out from the field

submit - validate on form submit

Sources:
https://angular.io/api/forms/AbstractControlOptions
https://angular.io/guide/form-validation#note-on-performance

(I've just answered similar question here: Fire validation when focus out from input in angular?)

answered Nov 14, 2018 at 23:54

mikhail-t

4,2417 gold badges39 silver badges57 bronze badges

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

Comments

G. Tranter · Accepted Answer · 2022-04-04 17:01:29Z

2

By default, the form field errors will appear when a control is touched or the form is submitted and the control is invalid. To change that behavior, you can use a custom ErrorStateMatcher - see the Angular Material example Input with a custom ErrorStateMatcher.

edited Apr 4, 2022 at 17:01

answered May 9, 2018 at 13:44

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Comments

Thom Kiesewetter · Accepted Answer · 2021-10-02 08:21:05Z

0

In template driven forms you can use ngModelOptions

<input matInput [(ngModel)]="name" required [ngModelOptions]="{ updateOn: 'change' }" name="Name" />

answered Oct 2, 2021 at 8:21

Thom Kiesewetter

7,4344 gold badges33 silver badges44 bronze badges

Comments

Giuliano · Accepted Answer · 2025-08-11 23:45:07Z

The way I found to resolve this issues is using the ShowOnDirtyErrorStateMatcher that comes in Angular Material (at least for version 20+). If you use it as errorStateMatcher of the matInput it solves the problem:

import { ShowOnDirtyErrorStateMatcher } from '@angular/material/core';

@Component({
    ...
})
export class YourComponent {
    showOnDirtyStateMatcher = new ShowOnDirtyErrorStateMatcher()
}

<!-- on your template -->
<input matInput [errorStateMatcher]="showOnDirtyStateMatcher">

Also I recommend using it as a default configuration for all matInputs. For doing this you have to put this code in the angular main providers:

import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher } // <-- this
  ]
}

Note: this is for Angular 17+ which use standalone approach. If you still using modules I think you can also add this as provider in your app.module file.

Collectives™ on Stack Overflow

Angular reactive forms validation while typing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related