Changing AngularJS text value value with javascript

Question

I try to run javascript in a browser extension to automate the process of filling out a form on a website, and then click a button - the extension code can be modeled by entering javascript: code in the address bar.

On a website where I am having problems using angularJS. I have input field identifier names, and I use them to change input field values. Fields are filled, but when I click the button, it says that they are not filled, there are no values, and all of them are mistaken. Some validation continues that does not “see” my changes if I do not enter the values ​​manually.

Is there an easy way to change the value of AngularJS input fields that have validation using only the input field identifier.

Here is the code:

<input id="shippingAddr-first-name" type="text" class="first-name ng-pristine ng-valid" maxlength="16" data-ng-model="addressTypes[addressType].FirstName" focus-me="commonAddressTypeProps[addressType].focusOnFirstName" client-validation="onExit" data-required-on-exit=""> 

My attempts to use document.getElementById("shippingAddr-first-name").value="Dave"; change the field, but do not register correctly when submitting the form. However, it works if I type it manually. I also tried clicking (), blur (), focus () to mimic some things that I can do manually, but they don't work either.

Answer 1

The trigger is an input event on an element with the ng-model attribute, which can be observed using AngularJS. The input event is the way from where Angular knows some changes are occurring and it should run the $ digest loop

Source:

 // if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the // input event on backspace, delete or cut if ($sniffer.hasEvent('input')) { element.on('input', listener); } else { var timeout; var deferListener = function(ev, input, origValue) { if (!timeout) { timeout = $browser.defer(function() { timeout = null; if (!input || input.value !== origValue) { listener(ev); } }); } }; element.on('keydown', function(event) { var key = event.keyCode; // ignore // command modifiers arrows if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return; deferListener(event, this, this.value); }); // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it if ($sniffer.hasEvent('paste')) { element.on('paste cut', deferListener); } } 

Some working proof of concept:

 angular.module('app', []).controller('app', function($scope) { $scope.user = {} $scope.handleSubmit = function(user) { alert('passed name ' + JSON.stringify(user)) } }) $(function() { $('#run').click(function() { fillElement($('[ng-model="user.name"]'), 'some user name') sendForm($('[ng-submit="handleSubmit(user)"]')); }) function fillElement($el, text) { $el.val(text).trigger('input') } function sendForm($form) { $form.submit() } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div> <button id="run">Execute `input` event outside AngularJS</button> </div> <div ng-app="app"> <div ng-controller="app"> <form ng-submit="handleSubmit(user)"> <input type="text" ng-model="user.name" /> <input type="submit" id="submit" value="Submit" /> </form> </div> </div> 

Answer 2

You should use AngularJS data binding, you put ng-model in the input, so you need to change this value to get / set the input value in your controller, which you can do:

Jsfiddle

 .controller('myCtrl', function ($scope) { $scope.addressTypes = []; $scope.addressTypes['onetype'] = { FirstName: 'Dave'}; }); 

Answer 3

use angular.element

 angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");