Angular NgForm:重置确切的表单字段值不会使其有效 [英] Angular NgForm: reset exact form filed value does not make it valid

问题描述

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

I have a form on a component's template:

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

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

And here is my component's submit handler:

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

它可以正常工作，并且出现登录错误(传递一些随机值)

It works and on login error (passing some random values) I see

问题.我如何在表格上重设确切的文件名并使它真正原始且未被篡改?因此，它应该是有效的，而不会在用户界面上用红色的无效"边框标记.

Question. How can I reset exact fileld on the Form and make it truly pristine and untouched? So it should be valid without marking it with red "invalid" border on the UI.

在loginForm.controls.password.reset()之后，我看到loginForm.controls.password.touched是 false ，而loginForm.controls.password.pristine是 true ，但是我也看到loginForm.controls.password.status是"无效".如果我对其进行修改，然后直接将" VALID "值分配给status属性，则红色无效边框会消失，但是如果我专注于该字段然后消失，它将破坏失去焦点的无效状态.没有任何输入.应该有一种合法的方式来重置已提交的表单并使其同时有效.

Right after loginForm.controls.password.reset() I see that loginForm.controls.password.touched is false and loginForm.controls.password.pristine is true, but I see also that loginForm.controls.password.status is "INVALID". If I hack it and directly assign the "VALID" value to the status property, the red invalid border disappeares, but it breaks lost-focus invalidation in case I focus on that filed and then go away without any input. There should be a legal way to reset form filed and make it valid in the same time.

推荐答案

这似乎是一个已知问题.根据 此 ，错误状态为计算方式如下:

This seems to be a known issue. According to this the error state is calculated like:

isInvalid && (isTouched || isSubmitted)

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

So when you have submitted your form, the isSubmitted flag is set to true, thus the condition is fulfilled and your field is shown as red. There are some workarounds, if you were to reset the whole form, you could use resetForm instead, but here you only want to reset one field, so...

有一个 建议 使用 ErrorStateMatcher :

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

ErrorStateMatcher:

ErrorStateMatcher:

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:

and declare a ErrorStateMatcher in your TS:

matcher = new MyErrorStateMatcher();

似乎可以正常工作:

Seems to work: StackBlitz

这篇关于Angular NgForm:重置确切的表单字段值不会使其有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！