How to simulate text input in the input of someone else's site in Angular?

Question

JavaScript

Good afternoon, there is such a task. There is input, when you enter text, Save Changes lights up. Where I click and everything is saved. However, when entered programmatically via jQuery .val() , the save button does not light up. How can you see changes in input?
If you change the value by hand and click programmatically on the button, a plate comes out that is saved, the page is reloaded and everything works. If not by hand, there is a click on an inactive button, a plate comes out that is saved, but there is no reboot, and after the update you can see that it is not saved.
Calling like this Input
$('[ng-click="updateSite()"]').click()

<input ng-value="site.shortName" type="text" name="shortName" ng-model="site.shortName" ng-minlength="3" ng-maxlength="39" required="required" ng-pattern="/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/i" ng-change="checkSubdomain()" class="showError ng-pristine ng-untouched ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid ng-valid-required" value="dgghfhgfj" style="">

Save Change button inactive

<button ng-disabled="form.$invalid || !form.$dirty || !isValid()" ng-click="updateSite()" href="#" class="button success" disabled="disabled">Save Changes  </button>

Save Change button enabled

<button ng-disabled="form.$invalid || !form.$dirty || !isValid()" ng-click="updateSite()" href="#" class="button success">Save Changes  </button>

I tried to run the updateSite () function in the console, but I get an error that it is not defined.

Answer 1

Try $(el).val()again after$(el).trigger( "change" )

Answer 2

After entering text on the element, raise events:

$('input')[0].dispatchEvent(new KeyboardEvent('keydown', { bubbles: true }));
$('input')[0].dispatchEvent(new KeyboardEvent('keypress', { bubbles: true }));
$('input')[0].dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
$('input')[0].dispatchEvent(new Event('input', { bubbles: true }));
$('input')[0].dispatchEvent(new Event('change', { bubbles: true }));
$('input')[0].dispatchEvent(new Event('blur', { bubbles: true }));

This will trigger the handler and the page will be able to see the changes.