angular-materialangular6angular-material2

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


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?


Solution

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