Angular中如何重置表单submitted状态且不丢失控件值？

在Angular模板驱动表单中，调用reset()或resetForm()会同时将submitted状态设为false并清空表单控件值。要实现仅重置submitted属性、保留输入内容，有两种可行方案：

方案一：直接修改submitted属性 #

NgForm实例的submitted属性支持直接赋值修改，无需调用重置方法，这样只会改变表单的提交状态，不会影响控件值：

修改组件中的submit方法：

submit(form: NgForm) {
  console.log({ submitted: form.submitted });
  // 直接重置submitted状态
  form.submitted = false;
}

方案二：调用resetForm()并传入当前表单值 #

resetForm()方法允许传入一个对象作为表单的重置后值，传入当前绑定的数据对象，即可在重置submitted状态的同时，保留控件显示的内容：

修改组件中的submit方法：

submit(form: NgForm) {
  console.log({ submitted: form.submitted });
  // 传入当前数据，重置表单状态但保留值
  form.resetForm(this.data);
}

两种方案的差异 #

• 方案一仅修改submitted状态，不会触发表单的重置事件，也不会改变控件的pristine/touched状态，适合只需重置提交标记的场景。
• 方案二会完整触发表单重置流程，除了重置submitted，还会将控件恢复为pristine（未修改）和untouched（未触碰）状态，若需要同步重置这些状态，优先选此方案。

修改后的完整组件代码示例：

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule, NgForm } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular 
    </a>

    <form #form="ngForm" (ngSubmit)="submit(form)">
      <input name="foo" [(ngModel)]="data.foo">

      <button>sub</button>
    </form>

    submitted: {{form.submitted |json}}
  `,
})
export class App {
  name = 'Angular';

  data = { foo: '' };

  submit(form: NgForm) {
    console.log({ submitted: form.submitted });
    // 选择上述任意一种方案替换此处代码
    form.submitted = false;
    // 或 form.resetForm(this.data);
  }
}

bootstrapApplication(App);

内容的提问来源于stack exchange，提问作者Jon Sud