在Angular中如何让已填写的输入框恢复为pristine/untouched状态？

解决方案 #

你需要将模板驱动表单的控件状态重置为pristine和untouched才能实现需求，仅清空输入值不会修改表单控件的校验状态。

具体修改步骤：

1. 给输入框的模板引用变量添加ngModel导出，获取表单控件实例
2. 把清空、重置状态的逻辑统一放到addTask方法中处理，避免模板中多事件执行顺序异常
3. 按钮禁用逻辑直接使用表单控件的校验状态，更易维护

修改后的代码：

HTML

<div class="modal">
    <p>What did you do?</p>
    <input type="text" [(ngModel)]="activity.name" #task="ngModel" required />
    <button
      (click)="addTask(task)"
      [disabled]="task.invalid"
    >
      OK
    </button>
</div>

TS

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

// 原有类型定义保留
activity: Activity = {
    name: '',
};
list: Activity[] = [];

addTask(taskControl: NgModel) {
    // 保存输入内容到列表
    this.list.push({ name: taskControl.value });
    // 重置控件：自动清空值，同时将状态改为pristine、untouched
    taskControl.reset();
}

补充说明：

NgModel自带的reset()方法会同时处理清空控件值和重置校验状态两个操作，不需要额外手动修改activity.name或者控件的value属性，也能避免双向绑定的状态不同步问题。

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