How to show mat-error once the textbox is dirty and is on focus?

Question

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?

Answer 1

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();
    }
}