如何用纯JavaScript或jQuery设置Angular表单字段值并通过验证

这个问题我之前也碰到过！从你的HTML代码里的_ngcontent、ng-pristine标识能看出来，这是Angular封装的受控表单组件——你用jQuery直接修改DOM值的操作，根本没同步到Angular的内部表单模型里，所以验证逻辑还是固执地认为字段是空的。

问题根源 #

Angular的表单是模型驱动的：它靠监听input、change这类原生输入事件，来同步DOM值和内部的表单模型状态。而jQuery的val()方法只是直接修改了DOM的value属性，完全没触发Angular需要的事件，导致模型和验证状态都停留在“空值”的旧状态。

解决方案：触发Angular能识别的输入事件 #

你需要在赋值后手动触发input事件（这是Angular监听值变化的核心事件），而不是只触发blur。试试这段代码：

// 先拿到原生DOM元素（别停留在jQuery对象层面）
const inputElement = $("#middleName")[0];
// 设置字段值
inputElement.value = MiddleName;
// 触发input事件，通知Angular值已更新
inputElement.dispatchEvent(new Event('input', { bubbles: true }));
// 保留你原来需要的blur事件
inputElement.dispatchEvent(new Event('blur', { bubbles: true }));

为什么这能生效？ #

• dispatchEvent(new Event('input', { bubbles: true }))模拟了用户真实输入的行为，让Angular的表单系统能捕获到值变化，同步更新内部模型和验证状态。
• 必须用原生DOM元素触发事件，jQuery的trigger('input')有时候无法正确模拟原生事件的冒泡逻辑，Angular可能接收不到。

如果上面的方法还是不生效，可以试试同时触发change事件，覆盖更多场景：

inputElement.dispatchEvent(new Event('input', { bubbles: true }));
inputElement.dispatchEvent(new Event('change', { bubbles: true }));

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