Menu
I am a bit new to angular 4. I am trying to get change event from an input field inside a directive. Currently i am working with @HostListener
@HostListener('keyup', ['$event'])
inputChanged(event) {}
This is working correctly but this event is fired after some delay from releasing key and user can enter wrong input and is able to see that too. In my implementation i have removed the invalid input but it doesn't give a good exposure to user. Only thing i want is to get change event right the moment change happen in input field (character / string enter or remove both ). Current HTML looks like this
<input type='text' class="form-control" placeHolder='hh:mm:ss' time-input [(ngModel)]="params.time" name="time"/>
PS. time-input is the name of directive and in directive i am trying to get the event change and i don't want to move any implementation to controller or component.
406
The ng-change directive tells AngularJS what to do when the value of an HTML element changes. The ng-change directive requires a ng-model directive to be present. The ng-change directive from AngularJS will not override the element's original onchange event, both the ng-change expression and the original onchange event will be executed.
Following is the example of using ng-change event with input text control to call function when input control value changed in angularjs applications. If you observe above example we added ng-change event to input textbox control and it will raise event whenever we change the value of input text control in angularjs application.
The (change) is a DOM event fires when changes to the form fields like <input> , <select>, and <textarea> is committed by the user. On <select> it fires when the user selects a new option either by a mouse click or using a keyboard. The following example shows how to use the change event in Angular.
The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript. Supported by <input>, <select>, and <textarea>.
Use
@HostListener('ngModelChange', ['$event'])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
