JS注入填充Angular表单无效问题求助（Winform Chromium控件）

问题原因 #

直接修改输入框的value属性仅会更新页面显示，但不会触发AngularJS的ngModel双向绑定同步——AngularJS内部的loginController.user.name和loginController.user.password模型值仍为空，因此登录时会提示账号密码无效。手动输入能正常工作，是因为手动输入会触发input/change等事件，AngularJS会监听这些事件自动同步模型。

解决方法 #

方法1：直接操作AngularJS Scope更新模型 #

通过AngularJS提供的angular.element获取输入框对应的Scope，直接修改模型值并触发脏检查：

// 填充用户名
const usernameInput = document.querySelector('[placeholder="Username"]');
const usernameScope = angular.element(usernameInput).scope();
usernameScope.loginController.user.name = '你的用户名';
usernameScope.$apply(); // 触发AngularJS脏检查，同步视图与模型状态

// 填充密码
const passwordInput = document.querySelector('[placeholder="Password"]');
const passwordScope = angular.element(passwordInput).scope();
passwordScope.loginController.user.password = '你的密码';
passwordScope.$apply();

方法2：模拟用户输入事件（更通用） #

通过触发标准的input和change事件，让AngularJS误以为是用户手动输入，自动同步模型：

// 封装设置输入值并触发事件的函数
function fillInput(inputElem, value) {
    inputElem.value = value;
    // 触发input事件，同步ngModel绑定
    inputElem.dispatchEvent(new Event('input', { bubbles: true }));
    // 触发change事件，更新表单状态（如ng-touched、ng-dirty）
    inputElem.dispatchEvent(new Event('change', { bubbles: true }));
}

// 调用填充
fillInput(document.querySelector('[placeholder="Username"]'), '你的用户名');
fillInput(document.querySelector('[placeholder="Password"]'), '你的密码');

关于form.controls和setValue的说明 #

你提到的setValue()是Angular 2+（及后续版本）中响应式表单的API，但当前页面使用的是AngularJS 1.x的模板驱动表单，因此不存在form.controls对象和setValue方法，需使用上述AngularJS专属的处理方式。

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