Update data on ng-model on event triggers

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.

ukUpdateModelOn usage with blur

ukUpdateModelOn usage with blur

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.

ukUpdateModelOn usage with enter

ukUpdateModelOn usage with enter

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.

ukUpdateModelOn usage with submit

ukUpdateModelOn usage with submit

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.

ukSubmit with callback and arguments

ukSubmit with callback and arguments

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. 
ukModelUpdateOn:

ukModelUpdateOn directive

ukModelUpdateOn directive

ukSubmit:

ukSubmit directive

ukSubmit directive

All of the above (source + working demo) can also be found on my Github
ModelUpdateOnEvents Repository

Thanks and happy coding 🙂

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s