0

I have a form with fields that are editable by the user. Some of them, until they are $dirty (edited by the user) will update automatically with suggested values.

I want to mark this change (flash the border of the input etc) so that the user can see what fields have changed.

How can i do this for all the inputs in the form? (about 50 inputs).

Example: I have text inputs

  • X
  • Y
  • Area
  • Perimeter.

User will usually enter values for X and Y. I have a $watch on these fields that will call a web service (/calculate?x=3&y=2) which will return {perimeter: 12; area: 6}. These values are auto completed in the Area and Perimeter inputs. When this happens, i want to add a CSS class to these fields so that the user knows they where automatically updated.

I know that i can add the CSS class in the $watch but i have more than one watcher and i would like to not add this logic to the already complex form. My thoughts where to have a "onchange" that works for inputs that where changed programatically and that can be applied on many inputs (directive on form, or directive on inputs or a watcher but on the form fields, not the model).

Daniel
  • 341
  • 6
  • 24
  • 1
    You need to provide more info about your scenario. How/when is the input update automatically? I think, this is the place that you need to work on. When you change the field value, you can also change it's class to one that flash the border. Please, give us more info, a snipet should be better. – Bruno João Oct 09 '15 at 19:59

1 Answers1

1

You could apply a css class to the input field when is $dirty:

HTML:

<form name="myForm">
    ...
    ...    
    <input name="fieldName" type="text" ng-model="object.name" ng-class="{'dirty-field': myForm.fieldName.$dirty}">
    ...
    ...
</form>

CSS:

.dirty-field{
  border: 1px solid yellow;
}

UPDATE:

Ok so you could use a directive like this to check if the value of each input is changed:

DIRECTIVE:

.directive('changedField', function(){
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl){

        var originalValue;

        scope.$watch(function(){ 
          return ctrl.$modelValue; 
        }, function(value){
          originalValue = !originalValue ? value : originalValue;
          element.toggleClass('changed-field', originalValue !== value);
        });

      }
  };  
})

HTML:

<input changed-field name="fieldName" type="text" ng-model="object.name">

CSS:

.changed-field{
  border: 1px solid yellow;
}

Enjoy!

manzapanza
  • 6,087
  • 4
  • 39
  • 48
  • Hi, i updated my question. The field will be dirty only when the user edits it. I want to add a class when the field value was changed by a change in the model, javascript (programaticaly). – Daniel Oct 09 '15 at 20:12