JavaScript Bookmarklet填充字段后AngularJS表单验证不识别求助

直接用原生JS修改输入框的value后，AngularJS的表单验证会判定字段为空——这是因为Angular依赖ngModel绑定追踪值的变化，原生赋值不会触发它的脏检查机制。可以用以下几种方法解决：

方法1：触发输入/变更事件 #

修改值后手动触发Angular监听的事件，让它感知到值的变化：

javascript: (() => {
  const input = document.getElementById('patientid');
  input.value = "TESTTEST";
  // 触发input事件（Angular主要监听这个）
  input.dispatchEvent(new Event('input', { bubbles: true }));
  // 部分场景可能需要补充触发change事件
  input.dispatchEvent(new Event('change', { bubbles: true }));
})();

方法2：直接操作Angular的ngModel控制器 #

如果页面加载了AngularJS，可以直接获取元素的ngModel控制器更新值，这种方式最可靠：

javascript: (() => {
  const input = document.getElementById('patientid');
  // 获取对应ngModel控制器
  const ngModel = angular.element(input).controller('ngModel');
  if (ngModel) {
    ngModel.$setViewValue("TESTTEST");
    ngModel.$render(); // 同步值到视图
  }
})();

方法3：绕过验证直接提交表单 #

如果上面的方法都无效，可以直接触发表单提交或点击提交按钮，跳过客户端验证：

javascript: (() => {
  // 方式1：通过表单选择器提交
  const form = document.querySelector('form'); // 替换为实际表单选择器
  if (form) form.submit();

  // 方式2：点击提交按钮
  const submitBtn = document.querySelector('button[type="submit"]');
  if (submitBtn) submitBtn.click();
})();

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