CODEWITHSUNDEEP
angularjs
simi kaur
simi kaur

Reputation: 1277

AngularJS - write custom directive to validate passed values

I have an html form that looks like this :

<div class="row col-lg-offset-3">
    <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}" show-errors >
        <label class="control-label">Age</label>
        <input type="text" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age"/>
    </div>
</div>

Directive:

(function(){
    angular.module('myApp', [])
.controller('studentDataController', function($scope) {})
.directive('showErrors', function() {
    return {
      restrict: 'A',
      require:  '^form',
      link: function (scope, el, attrs, formCtrl) {

        var inputEl   = el[0].querySelector("[Age]");

        var inputNgEl = angular.element(inputEl);

        var inputValue = inputNgEl.attr('Age');

        var isValid = (inputValue >= 3 && inputValue < 100);

         inputNgEl.bind('blur', function() {
          el.toggleClass('has-error', isValid);
        })
      }
    }
  });
})();

I am trying to validate input for Age field when it blurs out.Age value should be between 3 to 99.i.i.e check if the value is valid or invalid when user is done typing and leaves the text field.Then if the value is invalid, apply the has- class The directive though is not working. Did I miss anything ?

Upvotes: 2

Views: 2514

Answers (3)

Krzysztof Safjanowski
Krzysztof Safjanowski

Reputation: 7438

AngularJS 1.3.x introduces $validators pipeline - it is much simpler to write custom validation rules with them.

A collection of validators that are applied whenever the model value changes. The key value within the object refers to the name of the validator while the function refers to the validation operation. The validation operation is provided with the model value as an argument and must return a true or false value depending on the response of that validation.

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

app
  .controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  }).directive('ngAge', function NgLength() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, $element, $attrs, ngModel) {
        ngModel.$validators.validAge = function(modelValue, viewValue) {
          var age = modelValue || viewValue;
          return age > 3 && age < 100
        };
      }
    }
  });
.has-error {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<body ng-app="app">
  <form name="userForm" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
    <label class="control-label">Age</label>
    <input type="text" class="form-control" name="Age" ng-model="user.Age" ng-age placeholder="Age" />
  </form>
</body>

Upvotes: 2

sylwester
sylwester

Reputation: 16498

If really have to do that via custom directive please see below:

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app
  .directive('ngAge', NgLength);

function NgLength() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function($scope, $element, $attrs, ngModel) {
      $scope.$watch($attrs.ngModel, function(value) {
        var isValid = (value > 3 && value < 100);
        ngModel.$setValidity($attrs.ngModel, isValid);
      });
    }
  }
}
/* Put your css in here */

.has-error {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">

  <form name="userForm" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
    <label class="control-label">Age</label>
    <input type="text" class="form-control" name="Age" ng-model="user.Age" ng-age placeholder="Age" />

  </form>
</body>

Upvotes: 3

sylwester
sylwester

Reputation: 16498

You can use max, min directive. Please sample below

var app = angular.module('plunker', []);
.has-error {
  background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<html ng-app="plunker">



<body>

  <div class="row col-lg-offset-3">
    <form name="userForm" class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}" show-errors>
      <label class="control-label">Age</label>
      <input type="number" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age" max="100" min="3" />
   
  </form>
  </div>

Upvotes: 1

Related Questions