Identify all inputs that have been dynamically modified using AngularJS

Question

Identify all inputs that have been dynamically modified using AngularJS

I am currently working on a form that allows users to edit various fields. Some of these fields will automatically update with suggested values until the user makes changes ($dirty).

To ensure users can see which fields have been modified, I would like to visually indicate this change (such as flashing the border of the input).

My challenge is how to apply this visual indicator to all 50 inputs in the form.

For example, I have text inputs:

X
Y
Area
Perimeter

Typically, users will input values for X and Y. I have set up a $watch function on these fields that triggers a web service call (/calculate?x=3&y=2) returning {perimeter: 12; area: 6}. These values then autofill in the Area and Perimeter inputs. At this point, I want to add a CSS class to these fields to notify the user that they have been updated automatically.

While I could add the CSS class within the $watch function, I have multiple watchers and wish to avoid complicating the existing form further. Instead, I am considering implementing an "onchange" functionality that can identify inputs changed programmatically and be applied across multiple inputs (either through a directive on the form or individual inputs, or by adding a watcher specifically for the form fields, not just the model).

javascript angularjs angularjs-directive angularjs-model

Answer 1

Answer №1

To enhance the appearance of an input field in HTML when it becomes dirty, you can assign a CSS class to it:

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:

If you want to track changes in the input fields using a directive, you can implement this solution:

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;
}

Have fun experimenting with these techniques!

Answer 2

To enhance the appearance of an input field in HTML when it becomes dirty, you can assign a CSS class to it:

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:

If you want to track changes in the input fields using a directive, you can implement this solution:

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;
}

Have fun experimenting with these techniques!

Identify all inputs that have been dynamically modified using AngularJS

Answer №1

Similar questions

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

Tips on obtaining a dynamically generated document identifier before uploading a file to Firebase storage, and implementing it as a reference for web storage

The Angular controller that has been injected into the app is not defined

Can you please explain the function of this JavaScript code for the Isotope filter?

Altering the playback of a flash object using HTML or JavaScript

How can I set a value using document.getElementById(idPopUPImage).innerHTML to create a static popup in Leaflet?

What is the solution for repairing a slideshow?

AngularJS's ScrollTo function allows users to scroll to a specific

I utilized the ng-option feature to automatically select a specific option in a dropdown menu based on data fetched from a MySQL

Automatically trigger a Bootstrap 5.2 modal when the page loads

Having trouble executing node commands in the terminal

Guide on verifying the ng-valid status of all inputs within an AngularJS table

Creating random numbers in HTML using JavaScript

What is your strategy for managing errors when utilizing xui's xhr functionality?

Revamping an npm package on GitHub

Pattern for money with two decimal points and a comma as the separator

What are the steps to generate interactive hotspots in a 3D setting with threejs?

Using NodeJS to Send JSON Data via HTTP POST Request

The use of conditional statements in AngularJS, such as if-else statements

Halt the CSS transition on the preceding element