Angular 为什么在empForm.reset（）之后；标记为无效错误的必填字段？

我在学角形。这是一个简单的表单，有ename/job/sal字段，需要ename/job。在提交之前，当我输入值时，验证器工作正常，clear函数也很好地擦除了填充的文本。但是，在我单击submit（调用empForm.reset（））之后，必填字段标记为红色-无效字段错误，清除按钮也无法删除红色，我认为这是不合理的行为。我只想在提交后，所有字段都保留原来没有验证失败的红色标记。如何做到这一点，谢谢

谢谢和问候， 马丁

Ename是必需的。
工作是必需的。
提交
清楚的
从“@angular/core”导入{Component，OnInit}；
从'@angular/forms'导入{FormBuilder，Validators}；
@组成部分({
选择器：“应用程序emp”，
templateUrl:“./emp.component.html”，
样式URL:['./emp.component.scss']
})
导出类EmpComponent实现OnInit{
empForm；
构造函数（私有fb:FormBuilder）{
this.empForm=this.fb.group({
ename:[''，验证器。必需]，
作业：[''，验证程序。必需]，
萨尔：[1000]
})
}
ngOnInit（）：void{
}
onSubmit（）{
//保存到数据库-待定
这个.empForm.reset（）；
}
onClear（）{
这个.empForm.reset（）；
}
}

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

html

---

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

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

html

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

我想这是众所周知的，你可以试试：

HTML:

我想这是众所周知的，你可以试试：

HTML:

---

myform.submitted

必须为每个控件添加？

myform.submitted

必须为每个控件添加？它可以工作！！，感谢Prashant的知识共享！现在看起来好多了@很高兴这对你有帮助@Prashantpimple此解决方案有效，但我不明白为什么必须使用viewChild，如果我直接在表单上应用

resetForm（）

，它会说：

resetForm（）

不是一个函数，如果我使用

reset

函数，字段会被重置，但它们会被标记为无效并被涂成红色。老实说，我不明白viewChild在这种情况下的功能，有人能给我解释一下吗？提前谢谢。它很有效！！，感谢Prashant的知识共享！现在看起来好多了@很高兴这对你有帮助@Prashantpimple此解决方案有效，但我不明白为什么必须使用viewChild，如果我直接在表单上应用

resetForm（）

，它会说：

resetForm（）

不是一个函数，如果我使用

reset

函数，字段会被重置，但它们会被标记为无效并被涂成红色。老实说，我不明白viewChild在这种情况下的功能，有人能给我解释一下吗？提前谢谢。

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

}

<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]
     });   
  }  

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

@ViewChild('f') myNgForm;

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