在焦点上清除 <mat-error> 的错误状态答案

【问题标题】：Clearing error state of <mat-error> on focus在焦点上清除 <mat-error> 的错误状态
【发布时间】：2020-11-05 00:18:21
【问题描述】：

我有一个 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;
  }
}

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

只要将光标放在用户名/电子邮件或密码字段中，就应该删除登录失败消息（“无法识别用户名和密码”），类似于 Google 等商业网站的做法。问题是我不知道如何可靠地检测到这种状态变化。

【问题讨论】：

你能在这里添加一些代码吗？

标签： angular angular-material angular-forms

【解决方案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>

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

【讨论】：

然后您可以将这些条件附加到您现有的条件中，例如*ngIf="loginInvalid && !username.dirty && username.invalid && !password.dirty && password.invalid"
提交时，username 和 password 字段既有效又脏……因此仅凭这些不能使状态发生必要的状态更改。
你能用你的*ngIf条件试试这个(!username.dirty || !password.dirty) && (username.invalid || password.invalid)。

【解决方案2】：

通过焦点事件将 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>

【讨论】：