Angular’s ng-model is famous for its 2 way binding. If there is an input box with an ng-model directive attached to it, angular invokes its digest cycle on each charachter we type, performing validations on the data (if any) and then updating the value on the scope if data is valid. Everything is so fast that it feels that data is validated real time. Sometimes we don’t need angular to update our model as we are typing. Sometimes, we need the user to fill out the complete form and once he performs a click on form submit, or presses enter or loses focus on the field, we want the user to be updated for invalid field entries. To accomplish such tasks, I came up with an up-gradation of the fpSubmit and fpModelUpdateOn directive.
** fpSubmit has been renamed ukSubmit
** fpModelUpdateOn has been renamed ukModelUpdateOn
1) Updating model on ‘blur’:
Placing the ukModelUpdateOn with an attribute blur will only update the scope variable “updateOnBlur” once the input field loses focus.
2) Updating model on ‘enter’:
Placing the ukModelUpdateOn with an attribute enter will update the scope variable “updateOnEnter” once enter is pressed on the keyboard.
3) Updating model on ‘submit’:
Using ukModelUpdateOn with submit requires a named event to be passed in as value of the submit attribute. An element is also required to carry the ukSubmit directive with the same named event to trigger that event on click. Once the element detects a click, it will fire the named event, which will cause the models to update on that event.
4) Updating model on ‘submit’ with a click function callback and arguments:
This is the most complex of all. In addition to the above feature. Installing an onSubmit attribute with a value of a function on the scope and an array of arguments needed for that function can trigger this function after updating the models.
This is most useful if one wants to first update the models on pressing the submit button and then calling the submit function on the scope.
By making use of the above directives, we can easily control when we want the validations to occur (i.e. on blur, on enter or on some custom event). All the validations take place once the value is set on the scope variable, and by deferring the updation of the scope variable from the view, we can easily control when do we want to validate our data.
All this is easier said and easier done as I have everything up and ready for those in need.
All of the above (source + working demo) can also be found on my Github
Thanks and happy coding 🙂