清除焦点 <mat-error> 的错误状态

Question

我有一个 Angular Material 10.2 登录组件，它在身份验证失败时通过 <mat-error> 显示错误，类似于 OKTA's Angular Material login example。当用户移动到修改登录表单中的电子邮件或密码字段时，错误状态应该被删除......但我无法找到一种方法来做到这一点而不清除当前字段值，即用户应该能够移动一个或多个字段，进行更正并重新提交。

有什么想法可以清除 Angular Material <mat-error> 状态而不清除登录表单中的任何其他内容吗？

以下是 OKTA 示例的作用：

<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>

和组件：

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

当登录失败时，应用程序通知用户：

只要将光标放在 username/email 或密码字段中，登录失败消息（“无法识别用户名和密码”）应立即删除，类似于 Google 做。问题是我不知道如何可靠地检测到这种状态变化。

Answer 1

在您的 Html 页面中，您没有检查 mat-error 元素的任何验证。

用户名验证：

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

而不是

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

注意：您需要像上面那样更新密码验证。

Answer 2

通过 on-focus 事件将 loginInvalid 设置为 false：

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

由来自 <input 字段的 (focus) 事件触发：

<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>

清除焦点 <mat-error> 的错误状态

Clearing error state of <mat-error> on focus

angular-material

angular

angular-forms