1

I have an input under form control, im trying to modify manually with the chrome debug console.

jQuery($0).trigger('focus')
jQuery($0).val('2')
jQuery($0).trigger('input')
jQuery($0).trigger('change')
jQuery($0).trigger('blur')

Issue is changed doesn't get picked, the field is still marked as required. I dont know what angular is doing internally or which event its listenning to.
I tried to send every event on that input,
any idea on how to make angular to take that value ?

Note : angular1 question here doesn't work

GautierDab
  • 461
  • 4
  • 7

1 Answers1

5

Maybe this will help someone later but it works when using native event with bubbles=true cancelable=true

function modifyValue(field, value) {
  var createEvent = function(name) {
    var event = document.createEvent('Event');
    event.initEvent(name, true, true);
    return event;
  }

  field.dispatchEvent(createEvent('focus'));
  jQuery(field).val(value);
  field.dispatchEvent(createEvent('change'));
  field.dispatchEvent(createEvent('input'));
  field.dispatchEvent(createEvent('blur'));
}
GautierDab
  • 461
  • 4
  • 7
  • Using the 'input' event was key for me. I originally had 'change', but it wasn't updating the model. So I switched it from 'change' to 'input', and that updated the model. Thanks!!! – whatsTheDiff Mar 25 '19 at 16:39