angularjsinputupdatemodelangularjs-forms

Check in controller which input element has been modified


I need to check which input element has modified in update form.

    <form name="utilizationForm" role="form" novalidate>
    <div class="row" data-ng-repeat="i in [1,2,3,4]">
            <div class="col-md-3"> 
                <div asterick class="form-group" ng-class="{'form-group has-success': !error['resource_type'] && (submitted), 'form-group has-error': (error['resource_type']) && (submitted)}"> 
                    <label for="resourceType">Resource Type</label>
                    <input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
                                        <select name="resourceType" id="resourceType" ng-model="data['resource_type' + i]" class="form-control" ng-required="true"  >
                                            <option ng-repeat="option in resourceTypeJson" value="{{option}}">{{option}}</option>
                                        </select>
                    <span class="er-block" ng-show="utilizationForm.resourceType.$touched && utilizationForm.resourceType.$error.required">Please provide Resource type.</span>
                    <span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span>
                </div>    
            </div>
            <div class="col-md-3">
                <label for="efforts">Efforts (in hours)</label>
                <input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
                <input type="text"  test-change name="efforts" id="efforts" class="form-control" ng-model="data['efforts' + i]"  value="">
            </div>
        </div>
        <div class="text-right" ng-class="{'col-md-6 mt25': showCompletion}">
            <button class="btn btn-primary" ng-disabled="utilizationForm.$invalid" ng-click="addUtilizationReport()">{{buttonText}}</button>
        </div>

    </form>

Now when I click on update button I need to check which input element has modified in update form in controller. Please help.


Solution

  • If you put the input in a form with a name attribute and then give the input a name attribute, you can also access the input's $dirty property.

    <div ng-controller="MyController">
      <form name="myForm">
        <input type="text" name="first" ng-model="firstName">
        <input type="text" name="last" ng-model="lastName">
      </form>
    </div>
    
    app.controller('MyController', function($scope) {
      // Here you have access to the inputs' `$dirty` property
      console.log($scope.myForm.first.$dirty);
      console.log($scope.myForm.last.$dirty);
    });
    

    You can use $scope.myForm.$dirty to see if any fields have changed, and the $dirty property on each input's property on the form to see if that input has changed. You can even iterate over the myForm object (non-input-field objects have keys prefixed with a $):

    angular.forEach($scope.myForm, function(value, key) {
      if(key[0] == '$') return;
      console.log(key, value.$dirty)
    });