Angular Reactive Form提交成功后如何移除控件状态CSS样式

核心逻辑 #

你当前绑定的脏状态（加粗、绿色左边框）样式依赖Angular自动为已修改控件添加的ng-dirty类，不需要手动操作DOM删除类名——这类框架自动管理的状态类手动删除后，下一次变更检测会被重新加上，这也是你之前用模板变量、传$event操作DOM不生效的根本原因。
正确的做法是调用Angular响应式表单的内置API，在提交成功后把所有控件标记为非脏（pristine）状态，框架会自动移除ng-dirty类，对应样式会直接失效，同时不会破坏ng-invalid的红色错误提示逻辑，也不会清空表单已提交的内容。

注意：不要直接调用form.reset()，该方法会重置/清空表单已填值，仅需要重置控件状态即可。

具体代码修改 #

1. TypeScript部分 #

新增递归重置状态的方法，适配你当前多层FormArray嵌套的结构，保证所有深层子控件都能被正确标记为非脏状态，在onSubmit提交成功后调用即可：

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

async onSubmit(formGroup: FormGroup) {
  // 原有提交逻辑，比如接口请求
  const submitResult = await yourSubmitApiMethod(formGroup.value);
  // 判定提交成功后重置脏状态
  if (submitResult?.success) {
    this.resetFormDirtyState(formGroup);
  }
}

/**
 * 递归重置所有嵌套控件的脏状态
 * 适配多层FormGroup/FormArray嵌套场景
 */
private resetFormDirtyState(control: AbstractControl): void {
  control.markAsPristine({ onlySelf: true });
  // 如果需要同时移除失焦校验的 touched 状态，可以打开下面这行
  // control.markAsUntouched({ onlySelf: true });

  // 递归处理所有子控件
  if (control instanceof FormGroup || control instanceof FormArray) {
    Object.values(control.controls).forEach(subControl => {
      this.resetFormDirtyState(subControl);
    });
  }
}

对应的HTML里不需要传$event参数了，直接简化成：

<form [formGroup]="formEquipments" (ngSubmit)="onSubmit(formEquipments)">

2. CSS部分（可选优化，修复样式冲突） #

你当前的CSS存在样式优先级问题：如果控件被修改过（带ng-dirty类）同时校验不通过（带ng-invalid类），可能出现绿边框覆盖红边框的问题，调整选择器即可修复：

/* 仅当控件已修改、且校验通过时，显示脏状态提示 */
.form-control.ng-dirty.ng-valid:not(form) {
  font-weight: bolder;
  border-left: 5px solid #42A948;
}

/* 无效状态优先级更高，只要校验不通过就显示红边框 */
.form-control.ng-invalid:not(form) {
  border-left: 5px solid #a94442;
  font-weight: normal;
}

方案有效性说明 #

• 递归调用markAsPristine会遍历你表单里所有嵌套层级的控件（根FormGroup -> equipmentArray FormArray -> 每行FormGroup -> entityAttributeInfo FormArray -> 每个输入框控件），不会漏掉深层的输入框。
• 状态更新由Angular表单模块统一管理，不会出现手动删DOM类后类名被框架重新加上的问题。
• 不会修改表单已有的值，提交成功后用户填的内容会保留，只是移除“已修改”的视觉提示。

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