使用javascript填充角度输入答案

【问题标题】：Fill angular input using javascript使用javascript填充角度输入
【发布时间】：2018-12-05 08:35:05
【问题描述】：

设置元素的value 不起作用。它不像用户打字。当我提交这个输入时，弹出窗口告诉我我根本没有填写输入。我怎样才能像用户一样填充这个输入元素？

<div class="login-input input-group" data-ng-class="{'invalid' : !valid}">
<input id="alias-input" type="text" class="form-control ng-pristine ng-valid ng-empty ng-valid-maxlength ng-touched" tabindex="1" data-ng-model="formData.alias" data-ng-keydown="sendAlias($event)" maxlength="10" data-gemius-event="click" data-gemius-parameters="['place=login','inputbox=login','met=onclick']"
    spellcheck="false">
</div>

我试过了：

angular.element(document.querySelector("#alias-input")).val("foo");

document.getElementById('alias-input').value = 'foo';

【问题讨论】：

我不是这个网站的开发者。我想创建自动测试，但在填写此输入时遇到问题。
你用什么添加测试？任何框架？
@xyz 我正在使用 Watin。
@Chellappan 这是他正在谈论的 angularjs。所以这个文档的链接是不相关的，它是错误的框架。
@Dafie 您的问题是 data-ng-model 会覆盖您在摘要周期中对值所做的任何更改。因此，您需要在任何摘要周期结束后设置该值，或者如果您可以保证以某种方式发生了最后一个摘要周期，请更改该值。

标签： javascript angularjs

【解决方案1】：

这对我有用：

const event = new Event('input', { bubbles: true }); 
document.querySelectorAll('[formcontrolname = "idNumber"]')[0].value = '123456789';
document.querySelectorAll('[formcontrolname = "idNumber"]')[0].dispatchEvent(event);

这是在使用 Ionic 3.9.2 和 Angular 5.0.3 的页面上测试的

【讨论】：

谢谢，这帮助我解决了类似的问题。在不调用 dispatchEvent 的情况下设置值不允许保存表单。
@Asdrubal - 这对我也有帮助！非常感谢！为什么我需要创建一个新的 Event() 。并将其发送出去。这到底是做什么的？谢谢！

【解决方案2】：

您可以在 html 中为 input 元素设置 ng-model 属性，例如：ng-model = "inputValue"。在这个视图的控制器中，注入$scope后，现在可以设置$scope.inputValue = "foo"，它会自动更新输入值。

希望对你有帮助。

【讨论】：