Angular 5嵌套表单如何重置？求技术解决方案

首先得指出你代码里的核心问题：内层的<form>标签会创建独立的NgForm实例，和外层的myForm完全没关系，所以你调用form.reset()只会重置外层表单（但外层其实没有输入控件），内层的输入框根本不受外层表单控制，自然不会被重置。

下面给你两种可行的解决方案，适配你当前的模板驱动表单写法：

方案1：移除内层<form>，统一用外层表单管理 #

模板驱动表单里不需要嵌套<form>标签，直接把输入控件注册到外层表单即可。另外要注意给每个动态生成的输入框加唯一的name属性，这是ngModel在表单中注册的必要条件。

修改后的HTML代码 #

<form #myForm="ngForm">
  <div *ngFor="let item of arr; let index = index">
    <!-- 给每个input添加唯一name，绑定到数组对应索引 -->
    <input #input="ngModel" type="text" [(ngModel)]="arr[index]" name="item_{{index}}" required>
    <div *ngIf="input.errors?.required">必填项</div>
  </div>
</form>
<button (click)="submit()">Submit</button>
<button (click)="resetForm(myForm)">重置表单</button>

组件代码优化 #

要彻底重置，既要清空输入框的值，也要重置表单的状态（比如清除验证错误、把控件从「脏状态」改回「干净状态」）。所以我们需要先保存数组的初始值，重置时恢复：

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

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  // 示例初始数组，根据你的实际业务调整
  arr: string[] = ['默认值1', '默认值2'];
  // 保存初始数组的副本，避免引用类型修改影响初始值
  private originalArr: string[] = [];

  ngOnInit() {
    // 深拷贝初始数组（如果是复杂对象要考虑深拷贝，这里简单数组用展开运算符即可）
    this.originalArr = [...this.arr];
  }

  resetForm(form: NgForm) {
    // 1. 重置表单的状态（清除验证错误、脏状态等）
    form.resetForm();
    // 2. 恢复数组到初始值，自动同步到输入框
    this.arr = [...this.originalArr];
  }

  submit() {
    // 你的提交逻辑
    if (myForm.valid) {
      // 处理提交
    }
  }
}

方案2：改用响应式表单（更推荐动态表单场景） #

如果你的表单更复杂，动态控件较多，推荐用Angular的响应式表单（Reactive Forms），用FormArray来管理动态生成的输入框，重置会更简单：

组件代码 #

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 初始化表单，用FormArray管理动态输入框
    this.myForm = this.fb.group({
      items: this.fb.array([
        this.fb.control('默认值1', { validators: [Validators.required] }),
        this.fb.control('默认值2', { validators: [Validators.required] })
      ])
    });
  }

  // 获取FormArray的快捷方式
  get items() {
    return this.myForm.get('items') as FormArray;
  }

  resetForm() {
    // 直接调用表单的reset方法，自动重置所有控件的值和状态
    this.myForm.reset({
      items: ['默认值1', '默认值2'] // 重置时的默认值，也可以不传用初始定义的
    });
  }

  submit() {
    if (this.myForm.valid) {
      // 处理提交，获取值：this.myForm.value
    }
  }
}

对应的HTML #

<form [formGroup]="myForm">
  <div formArrayName="items" *ngFor="let control of items.controls; let index = index">
    <input [formControlName]="index" type="text">
    <div *ngIf="control.errors?.required">必填项</div>
  </div>
</form>
<button (click)="submit()">Submit</button>
<button (click)="resetForm()">重置表单</button>

两种方案里，方案1更贴合你当前的模板驱动写法，方案2适合更复杂的动态表单场景，你可以根据自己的业务需求选择。

内容的提问来源于stack exchange，提问作者d-man