如何检测ngModel的dirty状态并动态控制关联按钮的显示？

当然可以用ngModel实现，完全不需要FormArray或者响应式表单！我来给你一步步调整代码，实现你要的效果：

核心思路 #

我们可以通过NgModel的模板引用变量获取输入框的dirty/pristine状态，用这个状态直接控制按钮的显示，再通过NgModel的API手动修改状态，全程不用额外维护状态变量。

修改后的完整代码 #

<h5 class="mb-4">Report Configuration</h5>

<div class="form-group row" *ngFor="let config of reportConfig">
  <label class="col-sm-12 col-md-4 col-form-label">
    {{config.title}} <span class="text-danger">*</span>
  </label>
  <div class="col-sm-12 col-md-6 col-lg-6">
    <!-- 1. 绑定NgModel模板引用，用于获取输入框状态 -->
    <input 
      type="text" 
      [class.is-invalid]="false" 
      [id]="config.propertyKey" 
      [(ngModel)]="config.propertyValue" 
      class="form-control"
      #inputModel="ngModel" <!-- 关键：获取当前输入框的NgModel实例 -->
    />
  </div>
  <!-- 2. 用inputModel.dirty控制按钮容器的显示 -->
  <div 
    class="col-sm-12 col-md-2 col-lg-2 pl-0"
    *ngIf="inputModel.dirty" <!-- 只有输入框是dirty状态时才显示按钮 -->
  >
    <!-- 3. 点击按钮时将输入框标记为pristine -->
    <mat-icon class="mr-2" (click)="inputModel.control.markAsPristine()">check_small</mat-icon>
    <mat-icon color="warn" (click)="resetValueAndMarkPristine(config, inputModel)">close_small</mat-icon>
  </div>
</div>

对应的组件.ts代码（可选，用于点击叉号时重置原始值）：

import { NgModel } from '@angular/forms';

// 组件类里的代码
ngOnInit() {
  // 初始化时给每个配置项保存初始值，用于后续重置
  this.reportConfig.forEach(config => {
    config.initialValue = config.propertyValue;
  });
}

// 点击叉号：重置为初始值并标记pristine
resetValueAndMarkPristine(config: any, inputModel: NgModel) {
  config.propertyValue = config.initialValue;
  inputModel.control.markAsPristine();
}

关键细节说明 #

1. 模板引用变量#inputModel="ngModel"：这个变量会直接关联当前输入框的NgModel实例，通过它我们能直接拿到dirty/pristine状态，还能调用修改状态的方法。
2. *ngIf="inputModel.dirty"：直接用NgModel自带的状态控制显示，不需要自己定义额外的布尔变量去跟踪输入框是否被修改。
3. inputModel.control.markAsPristine()：调用这个方法会把输入框的状态从dirty改回pristine，此时*ngIf的条件不满足，按钮容器会自动隐藏。

额外小提示 #

如果点击叉号需要恢复用户修改前的原始值，一定要在组件初始化时给每个配置项保存初始值（就像上面ngOnInit里的操作），这样重置的时候才有值可以恢复。

这样就完全用ngModel实现了你要的需求，根本不需要用到FormArray或者响应式表单哦！

备注：内容来源于stack exchange，提问作者avishekdr