Angular 6, Externally update variables from data in form fields filled by javascript

Question

I'm essentially trying to add data to a website from a desktop database/CRM tool, where no API exists to the website. I've found I can load up the webpage, login and use Javascript to fill the form with data from the CRM.

I can see the form fields are correct with my values. However the Angular 6 variables don't update unless I actually physically type in the form fields. So I get 'required field' warnings.

Is the there a way to force Angular to pick up the values in the form fields?

Answer 1

Figure out which events are causing the Angular model to update

document.querySelectorAll('input, select, textarea').forEach(obj => { obj.keyup(); });

Try blur, keyup, change. Angular will be listening to some DOM event handler. Refine the query in the query selector to be a bit more targeted at your inputs and not the whole page.

How did you fill in the field? If you did something like

document.getElementById('someId').value = 'New Value';

Then try calling the DOM events on the element you set.