Enable/Disable Save button according to changes in Form(DOM) data

[ADITYA]

Hi,

I have a scenario, where on page load, I have to disable Save button & Button will be enabled only when there is some change in form(DOM).
Here one case is also that after making changes if we revert the changes then button should be disabled.
I want to make a watch on Form(DOM).

Here My question is how to make a watch on Form data.
How to store Firm initial data.
How to compare old data with new data(After any changes) to show button enabled.

[Luke Kende]

Well, you could bind each form field to a scope object and $watch the object for changes

scope.myForm = {
  field1: 'initial_value',
  field2: null,
  field3: false
}

 

scope.$watch('myForm', function(newFields, oldFields) { 

if (newFields.field2.length) {

 scope.buttonDisabled = true;

} 

else if (!newFields.field3){

 scope.buttonDisabled = true;

} 

 

 }, true); //notice this tells the $watcher that it's to catch any change on the object

[ADITYA]

Dear Like Kende,

Thanks for your respone.
You are right, having watch on object collection, I can enable/disable save button.

Please tell me one thing more that how can we store the form controls value after page load into object collection inside the angularjs controller.
So that I can find the difference that value has changes or not.

[Luke Kende]

well, the easy way is to just put it on the  global window like ordinary javascript if you know it a time of index load, but some use an ajax call once angular is bootstrapped.  There's long discussions about the "proper angular" way to initialize data for an app but I do it the easy way:

var initialData = {

  field1: 'initial_value',
  field2: null,
  field3: false

}

Then in controller where object watcher is, make comparisons:

scope.$watch('myForm', function(newFields, oldFields) { 

if (newFields.field2 == initialData.field2 ) {

 scope.buttonDisabled = true;

} 

}

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/pdECqJju5C8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.