Is there a way to automatically populate an AngularJS input field?

Question

Is there a way to automatically populate an AngularJS input field?

Attempting to automate filling out a website using JavaScript.

The script below:

document.getElementsByClassName('form-control')[1].value = "MYNAME";

The input text changes, but upon clicking the submit button it displays as empty.

Any assistance would be greatly appreciated.

This is the HTML:

<div ng-app="VitaminMiddleSchoolApp" ng-controller="componentEbaEtudExternalEditViewController">

<input spellcheck="false" autocapitalize="none" class="form-control input-sm ng-pristine ng-valid ng-empty ng-valid-maxlength ng-touched" type="text" ng-model="render.etudName" maxlength="60" ng-change="saveRenderer()" style="">

javascript angularjs

Answer 1

Answer №1

To ensure that Angular recognizes your autofilled inputs, remember to call scope.$apply() after setting the value with

document.getElementsByClassName('form-control')[1].value = "MYNAME";

A more efficient way would be to utilize Angular's model approach. For instance, if you want to autofill an input field like

<input type="text" ng-model="my_test_model">

, you can simply use the ng-init directive:

<input type="text" ng-model="my_test_model" ng-init="my_test_model='test_value'">

or set it in the Angular controller with scope.my_test_model='test_value'

Answer 2

To ensure that Angular recognizes your autofilled inputs, remember to call scope.$apply() after setting the value with

document.getElementsByClassName('form-control')[1].value = "MYNAME";

A more efficient way would be to utilize Angular's model approach. For instance, if you want to autofill an input field like

<input type="text" ng-model="my_test_model">

, you can simply use the ng-init directive:

<input type="text" ng-model="my_test_model" ng-init="my_test_model='test_value'">

or set it in the Angular controller with scope.my_test_model='test_value'

Is there a way to automatically populate an AngularJS input field?

Answer №1

Similar questions

The functionality of remotely accessing autocomplete in Angucomplete Alt is currently not functioning properly

Javascript does not execute properly in Google Apps Script

What is the best way to position a static element next to a Vue draggable list?

Javascript/jquery functions perfectly in all browsers except Firefox

Pulling information from a database query to store it within a JavaScript variable

Ways to both retrieve a variable and clear it simultaneously

Navigating through the endless scroll behavior in Twitter using CasperJS (PhantomJS)

Utilize FormData by passing it to a separate function and then utilizing it

The JSON at position 0 threw a curveball with an unexpected token "u

Capturing click events on a stacked area chart with nvd3

What is the best way to execute multiple controller functions for a single route?

The canvas element automatically removes itself after being resized within an HTML5/JavaScript environment

Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

The .SVC file's generated Javascript proxy URL fails to function properly when used with SSL

Creating dynamic routing functionality in Angular 8 allows for a more personalized and

Discovering elements using Selenium in a JavaScript popup box

The Action Creator is not being waited for

Leverage the power of Angular and Node.js to dynamically generate and configure a new subdomain on an

Incorporating RFID reader functionality into a website