Angular validation

Question

I want to make a form with validation of different fields: date, time, non-integer number. and valid 1.23 \ 1.23 \ 123

var app = angular.module('HelloHabr', []); function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } app .controller('userController', function($scope) { $scope.mimimi = null; }) .directive('mimimi', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$setValidity('mimimi', false); ctrl.$parsers.unshift(function(mimimi) { mimimi = (mimimi.replace(',', ".")); if (isNumeric(mimimi)) { ctrl.$setValidity('mimimi', true); return mimimi; } else { ctrl.$setValidity('mimimi', false); return undefined; } }); } }; });

 input.ng-valid { background-color: #81F7F3; } input.ng-invalid { background-color: #F78181; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <div ng-app="HelloHabr"> <form name="userForm"> <div ng-controller="userController"> <input class="form-control" type="text" name="LovelyMimimi" ng-model="mimimi" mimimi/> </div> <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> </form> </div>

but this is one input, and what to do next is not very clear

  <input class="form-control" type="date" name="2nd" ng-model="lol" required lol/> <input class="form-control" type="time" name="3hd" ng-model="time" required time/>

untenable because they do not validate

If you add this directive to other input - there will be more than one input from
But how to add a directive for the dddd-mm-yy date or for the time h24: mm: ss
you can simply use input type="date" , input type="time"
besides, nothing prevents to make two more directives on analogs with those already mentioned, but instead of using IsDate use IsDate and IsTime

des1roer des1roer 1.832 sixteen 46 · Accepted Answer · 2016-04-20T07:19:01

in draft form

  <div ng-app="HelloHabr"> <form name="userForm"> <div ng-controller="userController"> <input class="form-control" type="text" name="1st" ng-model="mimimi" mimimi/> <input class="form-control" type="date" name="2nd" ng-model="lol" lol/> <input class="form-control" type="time" name="3hd" ng-model="time" required time/> </div> <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> </form> <style> input.ng-valid { background-color: #81F7F3; } input.ng-invalid { background-color: #F78181; } </style> </div>

js

 var app = angular.module('HelloHabr', []); function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } function isValidDate(dateString) { var arr = dateString.split('-'); if (arr[0].length == 4 && arr[1] >= 1 && arr[1] <= 12 && arr[2] >= 1 && arr[2] <= 31) return true; } function isValidTime(dateString) { var arr = dateString.split(':'); if (arr[0].length = 2 && arr[0] >= 0 && arr[0] <= 12 && arr[1].length == 2 && arr[1] >= 0 && arr[1] <= 59 && arr[2].length == 2 && arr[2] >= 0 && arr[2] <= 59) return true; } app.directive('mimimi', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { ctrl.$setValidity('mimimi', false); ctrl.$parsers.unshift(function (mimimi) { mimimi = (mimimi.replace(',', ".")); if (isNumeric(mimimi)) { ctrl.$setValidity('mimimi', true); return mimimi; } else { ctrl.$setValidity('mimimi', false); return undefined; } }); } }; }); app.directive('lol', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { ctrl.$setValidity('lol', false); ctrl.$parsers.unshift(function (lol) { if (isValidDate(lol)) { ctrl.$setValidity('lol', true); return lol; } else { ctrl.$setValidity('lol', false); return undefined; } }); } }; }); app.directive('time', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { ctrl.$setValidity('time', false); ctrl.$parsers.unshift(function (time) { if (isValidTime(time)) { ctrl.$setValidity('time', true); return time; } else { ctrl.$setValidity('time', false); return undefined; } }); } }; });

Answer 2 · 2016-04-21T07:15:44

Apparently there is no need for validators / directives at all; standard input attributes are sufficient.

It looks like the next option only works for Chrome. For other browsers, you still have to make your directives.

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

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <div ng-app="HelloHabr"> <form name="userForm"> <div> <input class="form-control" numbers type="number" step="0.001" name="1st" ng-model="mimimi" required /> <input class="form-control" type="date" name="2nd" ng-model="lol" required /> <input class="form-control" type="time" name="3rd" ng-model="time" required /> </div> <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> <div> Number errors: <pre>{{userForm['1st'].$error | json}}</pre> Date errors: <pre>{{userForm['2nd'].$error | json}}</pre> Time errors: <pre>{{userForm['3rd'].$error | json}}</pre> </div> </form> <style> input.ng-valid { background-color: #81F7F3; } input.ng-invalid { background-color: #F78181; } </style> </div>

@ des1roer, as already added in the answer - it seems to work only in chrome: both separators in numbers and date and time controls

Angular validation

2 answers 2

More articles: