With an angular form group is there a way of getting the forms event stream

I want to perform an action each time a blur event happens on a form group bound control in angular.

I’ve seen the onBlur validation and it is an option. But I don’t want to restrict the form control update events to be blurs. People may leave the cursor in the input and submit the form with a key control.

Something like an event observable where I would get a stream of the events the form group is using to perform its internal controls. Filter on the type (if ‘blur’) and call my function would be ideal.

Is there anything like this?

Also I don’t want to use blur bindings from the DOM elements directly in the template. It would be so much extra work to make and maintain.

Answer

Basically in vanilla JavaScript you can register event-listeners to that target element via addEventListener():

var formInputElement = document.getElementById("myForm");

formInputElement.addEventListener("focus", myFocusFunction);
formInputElement.addEventListener("blur", myBlurFunction):
formInputElement.addEventListener("focusin", myFocusFunction);
formInputElement.addEventListener("focusout", myBlurFunction);

These will call your functions passed in as listener (callback function) for the event-type (e.g. myBlurFunction for an event-type identified by blur).

Leave a Reply

Your email address will not be published. Required fields are marked *