Angular 5非响应式表单提交后无法重置，如何解决？

这个问题在Angular模板驱动（非响应式）表单里挺常见的——form.reset()确实只会重置表单值，不会处理控件的touched（已触碰）状态，也不会自动清除输入框焦点。给你一套完整的解决方案，亲测在Angular 5里有效：

步骤1：获取表单实例并编写重置逻辑 #

首先在组件类中通过@ViewChild获取表单实例，然后在提交方法中完成值重置、状态重置、焦点清除三个操作：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('form') form!: NgForm;

  submit() {
    // 先执行你的提交业务逻辑（比如接口请求）
    console.log('表单提交完成');

    // 1. 重置表单值到初始状态
    this.form.reset();

    // 2. 遍历所有控件，重置触碰/修改状态
    Object.keys(this.form.controls).forEach(key => {
      // 标记为未触碰，清除触碰状态
      this.form.controls[key].markAsUntouched();
      // 可选：标记为未修改，重置dirty状态
      this.form.controls[key].markAsPristine();
    });

    // 3. 清除当前输入框的焦点
    const activeElement = document.activeElement as HTMLElement;
    if (activeElement) {
      activeElement.blur();
    }
  }
}

步骤2：模板代码保持原有结构即可 #

你的模板不需要额外修改，保持绑定的表单引用和提交事件就行：

<form #form="ngForm" (submit)="submit()">
  <div class="form-group">
    <label for="name">姓名</label>
    <input 
      type="text" 
      class="form-control" 
      id="name" 
      name="name" 
      ngModel 
      required
    >
    <!-- 触碰状态的错误提示会在重置后消失 -->
    <div *ngIf="form.controls.name?.touched && form.controls.name?.invalid" class="text-danger">
      姓名不能为空
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

关键逻辑说明 #

• this.form.reset()：仅负责重置表单控件的值到初始状态，不处理状态标记
• markAsUntouched()：将控件的touched状态设为false，这样之前触发的触碰式错误提示会自动隐藏
• markAsPristine()：可选操作，将控件的dirty（已修改）状态设为false，适合需要区分“未修改”和“已修改”的场景
• activeElement.blur()：通过DOM API找到当前获焦的元素，强制移除焦点，符合你清除焦点的需求

如果需要在多个组件复用重置逻辑，可以把重置代码封装成一个通用方法：

resetForm(form: NgForm) {
  form.reset();
  Object.keys(form.controls).forEach(key => {
    form.controls[key].markAsUntouched();
    form.controls[key].markAsPristine();
  });
  const activeElement = document.activeElement as HTMLElement;
  activeElement?.blur();
}

内容的提问来源于stack exchange，提问作者Volodymyr Humeniuk