使用jQuery修改输入值后，如何让Angular2表单控件更新模型？

你遇到的问题本质是Angular的响应式表单（FormControl）是基于控件实例的状态管理，而非直接监听DOM变更——直接用jQuery修改DOM值、触发常规事件，绕不开Angular内部的控件状态同步机制，这也是Angular 1的方法失效的原因（Angular 1的双向绑定依赖$digest循环，和Angular 2+的变更检测、响应式控件逻辑完全不同）。

下面是针对Angular 2+的可行解决方案，直接操作FormControl实例来同步值和状态：

步骤1：获取目标FormControl实例 #

在Chrome调试控制台中，确保已选中目标输入框（此时$0指向该DOM元素），执行以下代码获取关联的NgControl（它是Angular表单控件的核心封装）：

// 获取NgControl实例
const ngControl = ng.probe($0).injector.get(ng.coreTokens.NgControl);

注：ng对象是Angular开发环境下调试工具提供的全局对象，生产环境默认不可用。

步骤2：更新值并同步状态 #

拿到NgControl后，直接操作其内部的control（即FormControl实例）来设置值、更新验证状态：

// 设置输入框的新值
ngControl.control.setValue('2');
// 标记控件为已触摸（解决必填项标记问题——必填校验通常要求用户"触摸过"控件）
ngControl.control.markAsTouched();
// 强制更新控件的验证状态和视图同步
ngControl.control.updateValueAndValidity();

为什么之前的jQuery方法无效？ #

Angular响应式表单的数据流是FormControl → DOM，而非反向：

• FormControl的值是数据源，DOM只是它的视图展示；
• 直接修改DOM值不会自动同步到FormControl，哪怕触发input/change事件，因为Angular并没有监听DOM的原生值变更来更新控件（而是通过自己的事件绑定逻辑）；
• 你触发的事件只会更新DOM层面的状态，但FormControl的内部值和验证状态完全没变化，所以必填项标记依然存在。

如果是模板驱动表单（使用ngModel），上述方法同样适用——因为模板驱动表单本质也是基于FormControl封装的，NgControl依然能拿到对应的控件实例。

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