Brtdku

I want to show the mat-error just after the user has started writing something on an input element. Following is my code:

<mat-form-field appearance="outline">

    <mat-label>Password</mat-label>

    <input matInput type="password" placeholder="Password" required [(ngModel)]='model.password' #password='ngModel' name='Password' [minlength]='requiredLength' [pattern]="passwordPattern">

    <mat-error *ngIf="password.errors?.pattern">

        Password must be 8 characters long, one numeric, one special character....

    </mat-error>

</mat-form-field>

I want to show the error-message once the user has started typing in the input. Currently the error shows up on text-box lost-focus. I have also tried in following way:

<mat-error *ngIf="password.dirty">

    <mat-error *ngIf="password.errors?.pattern">

        Password must be 8 characters long, one numeric, one special character....

    </mat-error>

</mat-error>

But this also produces the same behavior as before.
One possible way around would probably using mat-hint. But I don't want to show it as hint as per requirement, I need to show this as error.

By the way, I am using ng-form.

Is it possible to get the specified behavior by using mat-error on ng-form? or I need to customize the css for mat-hint to look it as like the error message?

you can do it in this way -

<mat-form-field appearance="outline">

  <mat-label>Password</mat-label>

  <input matInput 

        type="password"

        placeholder="Password"

        name='Password'

        [ngModel]='model.password'

        (ngModelChange)="onChange($event, password)"

        #password='ngModel'

        [minlength]='requiredLength'

        [pattern]="passwordPattern"

        required>

  <mat-error *ngIf="password.errors?.pattern"">

      Password must be 8 characters long, one numeric, one special character....

  </mat-error>

</mat-form-field>

and in your component.ts add onChange() method -

onChange($event, password){

    this.model.password = $event;

    if(!password.control.touched){

      password.control.markAsTouched();

    }

}

If you want to trigger validation on every keystroke done by the user, you have to use a little workaround. I suggest you use a FormControl, which will then allow you to set a validator directly on that control and also listen to the changes emitted by valueChanges to mark the FormControl as touched to trigger validation (maybe there is a better solution to this?).

See the following stackblitz. Validation is done via the Validators.pattern (minimum of 8 characters, at least one letter, one number and one special character), so there is no need for a required or minimum length validator anymore.

This will apply the new matcher to your entire app:

dirty-error-state.matcher.ts

import {FormControl, FormGroupDirective, NgForm } from '@angular/forms';

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



export class DirtyErrorStateMatcher implements ErrorStateMatcher {

    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {

        return !!(control && control.invalid && (control.dirty));

    }

}

app.module.ts

import { DirtyErrorStateMatcher } from 'your-path-here';

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



@NgModule({

...

  providers: [{

    provide: ErrorStateMatcher,

    useClass: DirtyErrorStateMatcher

  }]

})