如何使用JavaScript修改/触发Angular表单的dirty标记？

你直接通过DOM元素分发change事件无法修改Angular表单的dirty状态，原因是Angular的表单状态（比如dirty、touched）是由NgForm实例管理的，而非原生DOM元素的事件触发就能改变。

正确的实现方式 #

不需要操作DOM元素，直接获取NgForm实例并调用官方提供的方法来修改状态：

1. 修改@ViewChild的类型，直接获取NgForm指令实例（而非ElementRef）
2. 调用NgForm的markAsDirty()方法手动标记表单为dirty

修改后的代码如下：

import { Component, ViewChild, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, NgForm } from '@angular/forms';

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

    <form #ngForm="ngForm" name="ngform">
      <input [(ngModel)]="foo" name="foo">
    </form>

    Is it dirty? {{ngForm.dirty | json}}
  `,
})
export class App implements OnInit {
  name = 'Angular';

  // 直接获取NgForm实例，而非ElementRef
  @ViewChild('ngForm', { static: true }) ngForm!: NgForm;
  foo = '';

  ngOnInit() {
    // 手动标记表单为dirty
    this.ngForm.markAsDirty();
  }
}

额外说明 #

• 如果需要单独标记某个表单控件为dirty，可以通过ngForm.controls['foo'].markAsDirty()来操作
• Angular表单的状态变更应该通过其提供的API（如markAsDirty()、markAsTouched()、reset()等）来完成，这是官方推荐的规范，避免直接操作DOM带来的状态不一致问题

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