Removing values by a clear button with AngularJS

Question

I can clear a whole set of inputs but the thing is, it only clears when its value is valid. When it's not it does not clear anymore.

Something has to be added and I can do it via manually using an each loop. However I am looking to avoid this solution and something like a lesser code, so maybe someone has already come up with a solution. My current code is:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.input = {};

  $scope.clear = function() {
    $scope.input = {};

    angular.forEach(angular.element("input"), function() {
      _this = angular.element(key);
      _this.val("");
    });
  };
});

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="principalManagementForm">
      First Name:
      <input type="text" ng-model="input.firstName" name="firstName" id="firstName" minlength="5"><span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
      <br>Last Name:
      <input type="text" ng-model="input.lastName" name="lastName" id="lastName" minlength="5"><span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
      <br>Code:
      <input type="text" ng-model="input.code" name="code" id="code" minlength="3"> <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
      <br>
      <br>
      <button ng-click="clear()">Clear</button>

      {{ input }}
    </form>
  </div>

</body>

</html>

What do you mean by invalid value? Your code seems to be working fine for me. — Shashank Agrawal
– Shashank Agrawal, Commented Mar 22, 2016 at 8:52
Apology, but I inserted the wrong code. I got a new code posted — Dean Christian Armada
– Dean Christian Armada, Commented Mar 22, 2016 at 8:57

Shashank Agrawal · Accepted Answer · 2016-03-22 09:00:58Z

2

Just use ng-model-options with allowInvalid flag:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.input = {};

  $scope.clear = function() {
    $scope.input = {};

    angular.forEach(angular.element("input"), function() {
      _this = angular.element(key);
      _this.val("");
    });
  };
});

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="principalManagementForm">
      First Name:
      <input type="text" ng-model="input.firstName" name="firstName"
             id="firstName" minlength="5" ng-model-options="{allowInvalid: true}">
      <span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
      
      <br>Last Name:
      <input type="text" ng-model="input.lastName" name="lastName"
             id="lastName" minlength="5" ng-model-options="{allowInvalid: true}">
      <span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
      
      <br>Code:
      <input type="text" ng-model="input.code" name="code" id="code"
             minlength="3" ng-model-options="{allowInvalid: true}">
      <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
      
      <br>
      <br>
      <button ng-click="clear()">Clear</button>

      {{ input }}
    </form>
  </div>

</body>

</html>

answered Mar 22, 2016 at 9:00

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dean Christian Armada Over a year ago

Perfect Answer! Never thought there was such an attribute or option. This is exactly what I need!

Collectives™ on Stack Overflow

Removing values by a clear button with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related