Add validation for input field for either 7 or 9 digits in AngularJS

Question

I am trying to add validation in my input field so that it can accept either 7 or 9 digits but I could not find any way to do this. In my code, I added ng-minlength=7 and ng-maxlength=9 but it does not solve my purpose .

I want to add either 7 or 9 digits only so If I enter 8 digits in my box it should show an error. Below code I used but it does not fulfill my requirement-

     <div class="form-group" ng-class="{ 'has-error' : myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched ) || myForm.num.$error.minlength || myForm.num.$error.maxlength}">

    <label for="UserName" style="color:#767676" class="" ng-hide="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.maxlength)">Number</label>
                       <label class="error_message_text" ng-show="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.maxlength)">
                            Please enter the number of either 7 or 9 digits
                        </label><br>
    <input type="text" numbers-only name="num" class="form-control" ng-class="" ng-minlength="7" ng-maxlength="9" ng-model="user.name" ng-required='!user.memNo' required/>

</div>

I have created a plunker here- https://plnkr.co/edit/S39AZNzlHa2vW6uQDuov?p=preview

Can anybody help me in my validations?

Answer 1

What @JBNizet mentioned is perfectly correct. Alternatively, you can create a directive for this as well. See a working example below for the same. Look for the directive length7Or9:

angular.module('myApp', []).controller("myCtrl", function($scope) {
  $scope.changeme = function() {
    alert('here');
  }

}).directive('numbersOnly', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        if (text) {
          var transformedInput = text.replace(/[^0-9]/g, '');

          if (transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
          }
          return transformedInput;
        }
        return undefined;
      }

      ngModelCtrl.$parsers.push(fromUser);
    }
  };
}).directive('length7Or9', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      ngModelCtrl.$validators.myLength = function(modelValue, viewValue) {
        if (!viewValue) {
          return false;
        }

        return (viewValue.length === 7 || viewValue.length === 9);
      }
    }
  };
});

.registration-form .form-control {
  border-radius: 2px;
}
.registration-form .has-error .form-control,
.registration-form .has-error .form-control:hover,
.registration-form .has-error .form-control:active {
  border-color: red;
  box-shadow: none !important;
}
.has-error input[type="text"]:focus,
.has-error input[type="password"]:focus,
.has-error input[type="number"]:focus {
  background-color: red !important;
}
.registration-form label {
  font-weight: normal;
}
.registration-form .form-group input[type="text"]:focus,
.registration-form .form-group input[type="password"]:focus,
.registration-form .form-group input[type="number"]:focus {
  outline: none;
  box-shadow: none !important;
  background-color: #18b6d6;
}
.error_message_text {
  color: red;
}
.glyphicon {
  vertical-align: bottom;
  float: right;
}
.dob-select-container {
  margin: 0px;
  padding: 0px;
}
.dob-select-container .dd .ddTitle .ddTitleText {
  width: 100%;
}
.styled-select {
  display: inline-block;
  height: 33px;
  margin-right: 10px;
}
.styled-select .ddcommon {
  width: 78px !important;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container registration-form">
    <form name="myForm" class="form-inline" novalidate>
      <h3 style="color: #818285;">Login<span class="glyphicon glyphicon-info-sign "></span></h3>


      <br>

      <div class="form-group" ng-class="{ 'has-error' : myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched ) || myForm.num.$error.myLength}">

        <label for="UserName" style="color:#767676" class="" ng-hide="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.maxlength)">Number</label>
        <label class="error_message_text" ng-show="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.myLength)">
          Please enter the number of either 7 or 9 digits
        </label>
        <br>
        <input type="text" numbers-only name="num" class="form-control" ng-model="user.name" ng-required='!user.memNo' required length-7-or-9 />

      </div>
      <br>
      <br>
      <button type="submit" class="btn btn-blue-1">Submit</button>

    </form>
  </div>
</div>

Answer 2

Use

ng-pattern="/^\d{7}$|^\d{9}$/"