Angular NgForm：重置确切的表单字段值不会使其有效

我在组件模板上有一个表单：

<form (ngSubmit)="submitLogin(loginForm)" #loginForm="ngForm">
  <mat-input-container>
    <input matInput [placeholder]="'User Name'" ngModel name="username" autofocus required>
  </mat-input-container>
  <br>
  <mat-input-container>
    <input matInput [placeholder]="'Password'" ngModel type="password" name="password" required>
  </mat-input-container>
  <br>
  <button [disabled]="loginForm.invalid" mat-raised-button type="submit">
    Login
  </button>
</form>

这是我的组件的提交处理程序：

public submitLogin(loginForm: NgForm) {
  return this.authService.login(loginForm.value)
    .subscribe(
      res => this.router.navigate(['/customers']),
      error => loginForm.controls.password.reset() // this place!
    );
}

它有效并且在登录错误（传递一些随机值）时我看到

Question。如何重置表单上的确切字段并使其真正原始且未受影响？所以它应该是有效的，而不需要在 UI 上用红色“无效”边框标记它。

就在之后loginForm.controls.password.reset()我看到loginForm.controls.password.touched is false and loginForm.controls.password.pristine is true，但我也看到了loginForm.controls.password.status is "INVALID”。如果我破解它并直接分配“VALID“ 的价值status属性时，红色无效边框消失，但如果我专注于该字段，然后在没有任何输入的情况下消失，它会破坏失去焦点的无效状态。应该有一种合法的方式来重置提交的表格并使其同时有效。

这似乎是一个已知问题。根据this https://github.com/angular/material2/issues/4190#issuecomment-305222426错误状态计算如下：

isInvalid && (isTouched || isSubmitted)

因此，当您提交表格后，isSubmitted标志设置为true，因此满足条件并且您的字段显示为红色。有一些解决方法，如果您要重置整个表单，您可以使用resetForm相反，但在这里您只想重置一个字段，所以......

有一个建议 https://github.com/angular/material2/issues/7522#issuecomment-334478881 to use ErrorStateMatcher https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown:

<input matInput 
   [placeholder]="'Password'" 
   ngModel type="password" 
   name="password" required 
   [errorStateMatcher]="matcher">

错误状态匹配器：

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    // show errors when touched and invalid
    return (control.invalid && control.touched);
  }
}

并在你的 TS 中声明一个 ErrorStateMatcher：

matcher = new MyErrorStateMatcher();

似乎有效：堆栈闪电战 https://stackblitz.com/edit/angular-hbq2uv-qi5pbr?file=app/input-error-state-matcher-example.ts