为什么在 empForm.reset(); 之后必填字段标记为无效错误？

Question

我正在学习 Angular 表单。这是一个简单的表格，有 ename/job/sal 个字段，ename/job 是必需的。在我提交之前，当我输入值时，验证器工作正常，清除功能也很好地擦除填充的文本。但是，在我单击提交（调用 empForm.reset()）之后，必填字段标记为红色 - 无效字段错误，清除按钮也无法删除红色，我认为这不是一个合理的行为。我只想在提交后，字段都保持原来没有验证失败的红色标记。如何实现，谢谢。

感谢和问候，马丁.

<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
    <div class="fields-container">
        <mat-form-field>
            <input formControlName="ename" matInput placeholder=Ename>
            <mat-error *ngIf="empForm.controls['ename'].errors?.required">Ename is required.</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="job" matInput placeholder=Job>
            <mat-error *ngIf="empForm.controls['job'].errors?.required">Job is required.</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="sal" matInput placeholder=Salary>
        </mat-form-field>
    </div>
    <div class="buttons-container">
        <button mat-raised-button type="submit" [disabled]="empForm.invalid">Submit</button>
        <button mat-raised-button type="button" (click)="onClear()">Clear</button>
    </div>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-emp',
  templateUrl: './emp.component.html',
  styleUrls: ['./emp.component.scss']
})
export class EmpComponent implements OnInit {
  empForm;
  constructor(private fb: FormBuilder) {
    this.empForm = this.fb.group({
      ename: ['', Validators.required],
      job: ['', Validators.required],
      sal: [1000]
    })
  }

  ngOnInit(): void {
  }

  onSubmit(){
    // save to db - TBD
    this.empForm.reset();
  }


  onClear(){
    this.empForm.reset();
  }

}

Answer 1

这是一个示例，您可以这样做

html

<form [formGroup]="form" novalidate (submit)="submit()" #myform="ngForm">
     <input type="text" formControlName="firstName" />   
     <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">Name is required</p>
     <button type="submit">Submit</button>
   </form>

组件

constructor(private fb: FormBuilder) {   
     this.form = this.fb.group({
       firstName: ['', Validators.required]
     });   
  }

我们只是将 ngForm 指令导出到一个局部变量，并使用它的提交属性作为知道表单何时提交的指示，仅此而已！

Answer 2

我认为它是已知的issue, as a workaround你可以试试：

HTML:

<form [formGroup]="empForm" #f="ngForm">
  ...
</form>

TS:

@ViewChild('f') myNgForm;

onSubmit() {
  // Service call
  this.myNgForm.resetForm();
}

Working_Demo

为什么在 empForm.reset(); 之后必填字段标记为无效错误？

Why after empForm.reset(); the required fields marked as invalid error?

forms

reset

angular