Angular Reactive Form提交后重置表单及校验状态失效如何解决

问题根因 #

你当前的写法存在两个核心问题导致重置不生效：

1. HTML外层的<form>标签没有添加#my2Form="ngForm"模板引用变量，TS中获取的my2Form实际为undefined，调用resetForm()没有任何效果
2. 混用响应式表单FormGroupAPI和模板驱动表单NgFormAPI，操作顺序错误导致状态被覆盖

修正方案 #

第一步：补全HTML的form标签配置 #

<!-- 外层form必须加[formGroup]绑定，需要用NgForm的话就加模板变量 -->
<form [formGroup]="form" #my2Form="ngForm">
  <mat-form-field class="example-full-width" appearance="outline" style="width: 100%;">   
    <input type="text" matInput formControlName="title" placeholder="Enter Module Title" #message maxlength="50">
    <mat-error *ngIf="form.controls.title.hasError('required') && (form.controls.title.dirty || form.controls.title.touched)">
      Module Title is <strong>required</strong>
    </mat-error>
  </mat-form-field>
  <button type="button" (click)="save()"> Save</button>
</form>

第二步：调整TS的重置逻辑 #

优先使用响应式表单自带API即可，不需要额外依赖NgForm：

// 可选：封装控件的getter，简化模板写法
get titleControl() {
  return this.form.get('title');
}

this.form = this.fb.group({
  title: ['', [Validators.required]],
});

save() {
  if (this.form.invalid) {
    this.form.markAllAsTouched();
    return;
  }
  // 此处写提交表单的业务逻辑

  // 重置表单逻辑
  this.form.reset(); // 清空所有控件值回到初始状态
  this.form.markAsPristine();
  this.form.markAsUntouched();
  // 极少数场景存在变更检测延迟的话，可以加下面这行强制更新
  // setTimeout(() => this.form.updateValueAndValidity(), 0);
}

最佳实践 #

• 响应式表单场景优先只用FormGroup自带的API操作表单状态，不要和模板驱动的NgFormAPI混用，避免状态冲突
• reset方法支持传入初始值，如果你需要重置后保留默认值可以这么写：this.form.reset({title: '默认标题'})
• 封装控件getter可以大幅简化模板中的校验判断逻辑，调整后模板的校验判断可以简化为：

  <mat-error *ngIf="titleControl.hasError('required') && (titleControl.dirty || titleControl.touched)">
  

内容的提问来源于stack exchange，提问作者Abhishek Agarwal