https://github.com/vitalets/lazy-model
AngularJS directive that works like `ng-model` but accept changes only when form is submitted (otherwise changes are cancelled)
https://github.com/vitalets/lazy-model
Last synced: 5 months ago
JSON representation
AngularJS directive that works like `ng-model` but accept changes only when form is submitted (otherwise changes are cancelled)
- Host: GitHub
- URL: https://github.com/vitalets/lazy-model
- Owner: vitalets
- Created: 2013-12-18T18:52:35.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-10-12T09:51:16.000Z (almost 11 years ago)
- Last Synced: 2025-05-01T00:17:04.591Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 617 KB
- Stars: 22
- Watchers: 7
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
lazy-model
==========
AngularJS directive that works like `ng-model` but accept changes only when form is submitted (otherwise changes are cancelled).
--------------------
##UPDATE!!!
As of Angular 1.3 there is [ngModelOptions](https://docs.angularjs.org/api/ng/directive/ngModelOptions) directive that allows to achive the same behavior natively
````html
save
cancel
````
jsfiddle: http://jsfiddle.net/8btk5/104/
So you don't need lazy-model any more!
----------------------
### Why this is needed?
AngularJS 2-way binding is good feature: you change model - and all views are updated instantly.
But when dealing with forms I often need more transactional way: input something and accept changes or decline it. Official way to do it requires additional code in controller: create copy of model, link it with form and write changes back to original model when form is submitted (see http://docs.angularjs.org/guide/forms).
Being too lazy, I tried to put all that stuff into **lazy-model** directive.
### How to use it?
1. Create form with **submit** and **reset** buttons
2. In controls use `lazy-model` instead of `ng-model`
````html
save
cancel
````
Now you can change username, but it will be saved to model only when you press **save**.
If you press **cancel** - your changes will be declined.
Try out demo: http://jsfiddle.net/8btk5/6/
It can be useful for **popup forms** and **modal dialogs.**
For example, popup form:
````html
save
cancel
show form
````
Live demo: http://jsfiddle.net/8btk5/7/
### How to validate?
Basically there are two ways of validation:
#### 1. On-change validation (instant)
Use normal AngularJS validation [described in docs](http://docs.angularjs.org/guide/forms).
For example, `ng-maxlength` validator:
````html
...
````
And check `form.$valid` in submit handler in controller:
````js
$scope.submit = function() {
if ($scope.frm.$valid) {
$scope.formVisible = false;
}
};
````
Live demo: http://jsfiddle.net/8btk5/8/
#### 2. On-submit validation
Alternatively, you can perform all validations inside `submit` handler and accept or decline
changes by setting validity via `$setValidity` method. Don't forget to define `name` attribute
of form and controls.
````html
...
...
cancel
````
In controller you should define both `submit` and `cancel` handlers:
````js
$scope.submit = function() {
if ($scope.frm.username.$modelValue.length > 10) {
$scope.frm.username.$setValidity('maxlength', false);
} else {
$scope.frm.username.$setValidity('maxlength', true);
$scope.formVisible = false;
}
};
$scope.cancel = function() {
$scope.frm.username.$setValidity('maxlength', true);
$scope.formVisible = false;
}
````
Live demo: http://jsfiddle.net/8btk5/10/
### How to send data on server?
Please note that in `ng-submit` hook original models are not updated yet.
You may use it for validation but not for sending data on server.
To send data there is special attribute of `` called `lazy-submit`.
Inside this hook models are updated and you can freely manipulate your models.
````html
...
````
In controller:
````js
$scope.save = function() {
$scope.formVisible = false;
sendToServer($scope.user);
};
````
Live demo: http://jsfiddle.net/8btk5/12/
### How to include it in my project?
1. Install via [bower](http://bower.io):
````
bower install lazy-model
````
or dowload manually [lazyModel.js](http://vitalets.github.io/lazy-model/lazyModel.js).
2. Include **lazyModel.js** and set app dependency:
````js
var app = angular.module("app", ["lazyModel"]);
````