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

问题.如何在表单上重置确切的文件并使其真正原始且未受影响?所以它应该是有效的，而无需在 UI 上用红色的无效"边框标记它.

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 是INVALID>".如果我破解它并直接将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，错误状态是计算如下:

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();

似乎有效:StackBlitz

Seems to work: StackBlitz

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