Clearing error state of <mat-error> on focus

user_3342253 0
Viewed 1404

I have an Angular Material 10.2 sign-in component which shows an error via <mat-error> when authentication fails, similar to OKTA's Angular Material login example. When the user moves to amend the email or password fields in the sign-in form, the error state should be removed...but I can't find a way to do that without wiping out the current field values, i.e., the user should be able to move a field, or fields, make corrections and resubmit.

Any ideas how to clear the Angular Material <mat-error> state without clearing anything else in the sign-in form?

Here's what the OKTA example does:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <h2>Log In</h2>
  <mat-error *ngIf="loginInvalid">
    The username and password were not recognised
  </mat-error>
  <mat-form-field class="full-width-input">
    <input matInput placeholder="Email" formControlName="username" required>
    <mat-error>
      Please provide a valid email address
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <input matInput type="password" placeholder="Password" formControlName="password" required>
    <mat-error>
      Please provide a valid password
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary">Login</button>
</form>

and the component:

async onSubmit() {
  this.loginInvalid = false;
  this.formSubmitAttempt = false;
  if (this.form.valid) {
    try {
      const username = this.form.get('username').value;
      const password = this.form.get('password').value;
      await this.authService.login(username, password);
    } catch (err) {
      this.loginInvalid = true;
    }
  } else {
    this.formSubmitAttempt = true;
  }
}

When login fails, the application notifies the user:

enter image description here

The login failure message ("The username and password were not recognized") should be removed as soon as the cursor is placed in either the username/email or password fields, similar to what commercial sites like Google do. The problem is I don't know how to reliably detect this state change.

angular-forms angular-material angular
2 Answers

In your Html page, You are not check any validation for mat-error element.

Username validation:

 <mat-error *ngIf="!username.dirty && username.invalid">
   Please provide a valid email address
 </mat-error>

instead of

<mat-error>
   Please provide a valid email address
 </mat-error>

Note: You need update password validation as like above one.

user_61882270

Set loginInvalid to false via the on-focus event:

onFocus(event: any) {
  this.loginInvalid = false;
}

triggered with the (focus) event from the <input fields:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <h2>Log In</h2>
  <mat-error *ngIf="loginError">
    The username and password were not recognised
  </mat-error>
  <mat-form-field class="full-width-input">
    <input matInput placeholder="Email" formControlName="username" required (focus)="onFocus($event)">
    <mat-error>
      Please provide a valid email address
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <input matInput type="password" placeholder="Password" formControlName="password" required (focus)="onFocus($event)">
    <mat-error>
      Please provide a valid password
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary">Login</button>
</form>
user_33422530
Related