Directive Angular JS input validation

Question

I have the following html:

<tbody>
  <tr ng-repeat="item in itens">
    <td width="75%">
      {{ item.name }}
    </td>
    <td width="25%">
      <input type="text" 
      class="form-control " 
      ng-model="item.value"
      ui-money-mask="2"
      ng-test'>
      <span style="font-size: 10px;">From {{ item.val_min | currency:"R$ ":2 }} To {{ item.val_max | currency:"R$ ":2 }}</span>                  
    </td>
  </tr>
</tbody>

What i need is a Directive who validates the input; if the user types a value outside the range of item.val_min and item.val_max, the input show a invalid message.

How can i get item.val_min and item.val_max values inside my directive, and how to set the input as invalid during the user typing?

If you use <input type="number" />, you can use ng-min / ng-max directives — DerekMT12
I try ng-min and ng-max, but with them i get the validation only after i submit my form. Is there a way to do that after the user types on the input field? — eduardo Uchida

csjoshi04 csjoshi04 · Accepted Answer · 2016-05-02T19:09:34

You don't actually need a directive in this case. Below is how I will solve it.

JS code

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

    app.controller('MainCtrl', function($scope) {
        $scope.items = [{
            "name": "abc",
            "value": 12,
            "val_min": 10,
            "val_max" : 99
        }, {
            "name": "xyz",
            "value": 121,
            "val_min": 10,
            "val_max" : 99
        }, {
            "name": "pqr",
            "value": 9,
            "val_min": 10,
            "val_max" : 99
        }]
        $scope.isShowErrorMessage = function(modelVal, minVal, maxVal){
            return modelVal < minVal || modelVal > maxVal;
        }
    });

HTML code:

<body >
<table ng-controller="MainCtrl" >
    <tbody>
    <tr ng-repeat="item in items track by $index">
        <td width="75%">
            {{ item.name }}
        </td>
        <td width="25%">
            <input type="text" class="form-control" ng-model="item.value" name="input" min-max-val mn-val="12" mx-val="23" data-model="{{item.value}}" />
            <span style="font-size: 10px;">From {{ item.val_min | currency:"R$ ":2 }} To {{ item.val_max | currency:"R$ ":2 }}</span>
            <span ng-show="item.value < item.val_min || item.value > item.val_max">The entered value {{item.value}} is not within the range of {{item.val_min}} and {{item.val_max}}</span>
        </td>
    </tr>
    </tbody>
</table>

Let me know if this is not what you were looking for.

Directive Angular JS input validation

1 Answers