如何用JS触发ng-untouched/ng-empty转ng-touched/ng-not-empty并过Angular表单校验

一、原生DOM操作实现（类似document.getElementById的方式） #

虽然Angular推荐数据驱动，但确实可以通过原生JS操作DOM来实现需求，步骤如下：

• 填充表单值：先定位到目标input元素，设置其value

  const inputEl = document.querySelector('input[name="model_answer"]');
  inputEl.value = "你要填充的内容";
  

• 触发状态更新事件：Angular的表单状态依赖交互事件更新，手动触发对应事件

  // 触发input事件，更新ng-dirty/ng-empty状态
  inputEl.dispatchEvent(new Event('input'));
  // 触发blur事件，更新ng-touched状态
  inputEl.dispatchEvent(new Event('blur'));
  

• 强制触发变更检测（可选）：如果状态未同步，手动触发Angular的变更检测

  const scope = angular.element(inputEl).scope();
  scope.$apply();
  

二、Angular规范实现（操作模型而非DOM） #

Angular核心是数据驱动，直接操作ng-model绑定的变量是更合理的方式：

const inputEl = document.querySelector('input[name="model_answer"]');
const scope = angular.element(inputEl).scope();

// 直接更新绑定的模型值
scope.conditions.customs_modelanswer = "你要填充的内容";

// 手动标记控件状态
scope.conditionsForm.model_answer.$setTouched(); // 切换ng-touched状态
scope.conditionsForm.model_answer.$setDirty(); // 切换ng-dirty状态

// 触发变更检测同步视图
scope.$apply();

注：conditionsForm是你的表单名称，需与HTML中form或ng-form标签的name属性对应

状态变更说明 #

• ng-pristine→ng-dirty：修改表单值或调用$setDirty()后自动切换
• ng-untouched→ng-touched：触发blur事件或调用$setTouched()后自动切换
• ng-empty→ng-not-empty：表单值非空时自动切换，更新模型或触发input事件即可同步

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