Angular 13项目中HTML表单模板的高效简化重置方案

响应式表单（推荐方案） #

如果你的表单采用Angular响应式表单实现，直接利用FormGroup/FormArray的内置reset()方法，就能一键重置所有控件，完全无需手动逐一处理，新增字段时也不用修改重置逻辑。

示例代码：

1. 组件内定义表单结构

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

constructor(private fb: FormBuilder) {}

// 初始化表单，包含输入框、选择器、文件名数组
myForm: FormGroup = this.fb.group({
  inputField: [''],
  selectField: [''],
  fileNames: this.fb.array([])
});

// 便捷获取文件名数组FormArray
get fileNames(): FormArray {
  return this.myForm.get('fileNames') as FormArray;
}

2. 重置方法（新增字段无需修改此方法）

resetForm(): void {
  // 重置为空值
  this.myForm.reset();

  // 若需要重置为指定默认值，传入对应结构的对象即可
  // this.myForm.reset({
  //   inputField: '默认输入内容',
  //   selectField: 'defaultOption',
  //   fileNames: []
  // });
}

3. 模板绑定

<form [formGroup]="myForm">
  <input formControlName="inputField" placeholder="请输入内容">
  
  <select formControlName="selectField">
    <option value="">请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
  </select>

  <!-- 文件名数组渲染 -->
  <div formArrayName="fileNames">
    <div *ngFor="let file of fileNames.controls; let i = index" [formGroupName]="i">
      <input formControlName="name" placeholder="文件名">
    </div>
  </div>

  <button type="button" (click)="resetForm()">重置表单</button>
</form>

模板驱动表单方案 #

若使用模板驱动表单，给表单添加模板引用变量，调用其内置reset()方法，同时重置文件名数组变量即可：

1. 模板代码

<form #myForm="ngForm">
  <input name="inputField" ngModel placeholder="请输入内容">
  
  <select name="selectField" ngModel>
    <option value="">请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
  </select>

  <!-- 文件名数组绑定 -->
  <div *ngFor="let fileName of fileNames; let i = index">
    <input [(ngModel)]="fileNames[i]" name="fileName{{i}}" placeholder="文件名">
  </div>

  <button type="button" (click)="myForm.reset(); fileNames = []">重置表单</button>
</form>

2. 组件内定义变量

fileNames: string[] = [];

核心优势 #

两种方案都无需为每个字段编写单独的重置逻辑，后续新增表单字段时，只需正常完成表单绑定即可，重置方法完全不需要修改，从根本上解决了维护成本问题。

内容的提问来源于stack exchange，提问作者Robert van der Meijden