I am writing a userscript and unfortunately the website uses Angular JS which I don't know.
There is code:
<form class="form ng-pristine ng-valid ng-valid-maxlength" name="$ctrl.actionableForm.form" _lpchecked="1">
<input type="text" maxlength="254" placeholder="" data-ng-attr-id="text-field-{{:: $ctrl.widget.header.id }}" data-ng-model="$ctrl.fieldValue.value" data-ng-change="$ctrl.updateFormFieldValue()" data-ng-blur="$ctrl.onBlur()" data-ng-focus="$ctrl.updateFormFieldValue()" data-ng-readonly="$ctrl.isReadOnly()" data-ng-trim="false" data-ng-keyup="$ctrl.handleKeyup($event)" class="form-control text-field-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength focus-visible" id="text-field-qYMHEJMncH0S-ogeOc5CTw" data-focus-visible-added="">
I want to change the value of that input programatically, like:
document.querySelector('[id^="text-field-"]').value = 'My new value';
But it doesn't work because it doesn't fire data-ng-change="$ctrl.updateFormFieldValue()" so the new value is not saved.
Please how can I do it?
If someone will look for the same thing, I solved it this way:
const myField = document.querySelector('[id^="text-field-"]');
myField.value = 'My new value';
angular.element(myField).trigger('change');