CODEWITHSUNDEEP
angularjsangularjs-ng-change
Taleeb
Taleeb

Reputation: 1909

ng-change not triggering for second time when value updated with event.target.value

I'm trying to reset value of input:textbox if the value entered is non-numeric. I'm using ng-change to validate the input. Refer the code below

<input type="text" ng-change="onChange(this.P)" ng-model="P" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Principle" />
<input type="text" ng-change="onChange(this.R)" ng-model="R" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Rate" />
<input type="text" ng-change="onChange(this.T)" ng-model="T" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Time" />

Note onChange function is getting called from all three textboxes.

The onChange function is as follows

$scope.onChange = function(n) {
      if (!$scope.isNumeric(n)) {
        event.currentTarget.value = '';
      }

Issue: The problem is that if I enter the same non-numeric alphabet twice the ng-change event is not triggered.

For example if the key q is pressed twice the ng-change will not trigger when the key is pressed for the second time.

See jsFiddle here

Additional question: Is there any better way to reset the value of the textbox?

Upvotes: 0

Views: 3447

Answers (3)

Yogen Darji
Yogen Darji

Reputation: 3300

You can pass model key along with ng-change and just update model value so it will automatically update your input

angular.module('SimpleInterestApp', [])
  .controller('simpleCtrl', function($scope) {

    $scope.onChange = function(obj, modelKey) {

      var n = obj[modelKey];
      if (!$scope.isNumeric(n)) {
        obj[modelKey] = '';
      }
    };

    $scope.isNumeric = function(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    };


  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

<body ng-app="SimpleInterestApp" ng-controller="simpleCtrl">
  <div class="container">
    <div class="row">
      <input type="text" ng-change="onChange(this, 'P')" ng-model="P" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Principle" />
      <input type="text" ng-change="onChange(this, 'R')" ng-model="R" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Rate" />
      <input type="text" ng-change="onChange(this, 'T')" ng-model="T" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Time" />
    </div>
  </div>
</body>

Upvotes: 0

Siddharth
Siddharth

Reputation: 7156

The reason ng-change is not firing again for same alphabet because you are updating the currentTarget.value but not the ng-model.

Suppose you enter d in the text box. Now $scope.P = "d". Now ng-change will fire and you clear the text box, remember $scope.P is still "d". Now if you enter "d" again $watch wont fire because previous value of $scope.P is "d".

To resolve this update the model instead of currentTarget.value.

Here is the updated fiddle: https://jsfiddle.net/vwmfbgy2/4/

Upvotes: 0

Kavindra
Kavindra

Reputation: 1707

You can use input type 'number' which is an inbuilt feature of HTML5. It allows only numeric values. You don't need the onChange function.

<input type="number" ng-model="P" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Principle" />

However, that comes with up/down arrows in the corner. You can hide them with CSS if you don't need them.

Upvotes: 1

Related Questions