AngularJS Input Modified Example

AngularJS module to detect and indicate input modifications.

HTML

<div ng-app="application">
  <div ng-controller="ApplicationController">
      <form name="myForm" novalidate>
          
        <pre>
            Form modified: {{ myForm.modified ? 'Yes' : 'No' }}
            Modified count: {{ myForm.modifiedCount }}
            Modified models: {{ myForm.modifiedModels }}
        </pre>
          
        <div class="form-group">
            <label for="fullName" class="control-label">Full Name:</label>
            <div class="control">
                <input
                    id="fullname"
                    name="fullName"
                    class="form-control"
                    type="text"
                    ng-model="user.fullName"
                    required
                >
            </div>
            <p class="reset">
                <button ng-click="myForm.fullName.$setPristine()">Save This Field</button>
                <button ng-click="myForm.fullName.reset()">Reset This Field</button>
            </p>
            <p class="master">Master:   "{{ myForm.fullName.masterValue }}"</p>
            <p class="modified">Modified: {{ myForm.fullName.modified ? 'Yes' : 'No' }}</p>
        </div>
            
        <div class="form-group">
            <label for="about" class="control-label">About:</label>
            <div class="control">
                <input
                    id="about"
                    name="about"
                    class="form-control"
                    type="text"
                    ng-model="user.about"
                >
            </div>
            <p class="reset">
                <button ng-click="myForm.about.$setPristine()">Save This Field</button>
                <button ng-click="myForm.about.reset()">Reset This Field</button>
            </p>
            <p class="master">Master:   "{{ myForm.about.masterValue }}"</p>
            <p class="modified">Modified: {{ myForm.about.modified ? 'Yes' : 'No' }}</p>
        </div>
            
        <div
           ...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/betsol/angular-input-modified/81f6ccd4e0a755fecd3c824244ddc82521124c77/src/angular-input-modified.js"></script>

<style>

/** Decorating elements as valid only if they are modified */
.control input.ng-valid.ng-modified {
    background-color: #EFE;
    border-color: #6A6;
}

/** Decorating entire form-group */
.form-group.valid.modified {
    border-style: solid;
    background-color: #EFE;
    border-color: #6A6;
}

div.footer {
    margin-top: 10px;
}

div.footer button {
    margin-left: 5px;
    padding: 5px 20px;
}
div.footer button:first-child {
    margin-left: 0;
}

.control input.ng-invalid {
    background-color: #FEE;
    border-color: #F66;
}

.form-group {
    margin: 10px;
    padding: 10px;
    border: 1px dashed #AAA;
}

.form-group label {
    color: 000;
    font-size: 13px;
    font-weight: bold;
}

p.master, p.modified {
    margin: 0;
    padding: 0;
    color: #888;
    font-family: monospace;
    white-space: pre;
}

p.reset button {
    padding: 0 5px;
    font-size: 10px;
    color: #333;
}

div.radio-inline {
    display: inline-block;
    margin-left: 10px;
}
div.radio-inline:first-child {
    margin-left: 0;
}
div.radio-inline label {
    font-weight: normal;
}

JavaScript

angular.module('application', ['ngInputModified'])
    .controller('ApplicationController', function($scope) {
        $scope.user = {
            fullName: 'John Doe',
            about: '',
            gender: 'unknown'
        };
    })
;