Geek Answers Handbook

How to redefine the type of angles = checking the number?

I am writing a directive that will check the Swedish Social Security Number (personnummer). Used for an input element as follows:

<input type="text" ng-model="pnr" pnrvalidator />

The Swedish Social Security Number is in the format yyyymmdd-nnnn e.g. 19121212-1212

My directive works while I use type="text" . But since I would like the number keyboard to be used in mobile browsers, then I changed to type="number" :

 <input type="number" ng-model="pnr" pnrvalidator />

Then my validator only works if I did not enter a dash (-) in my input, for example, 191212121212. If I enter 19121212-1212, then this is not a real number. And the ng-invalid classes ng-invalid-number classes are added to my input element

When I wrote my directive, I followed the documentation on how to modify the built-in validators https://docs.angularjs.org/guide/forms But this does not seem to apply to the type=number check, or am I missing something? I am using angular 1.3 (and 1.4).

My directive code is:

 angular.module('example').directive('pnrvalidator', function(){ return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { var validatePnr = function(inputString){ /* * My validation logic here. Removed for this example */ }; ctrl.$validators.number = function(modelValue, viewValue) { if (ctrl.$isEmpty(modelValue)) { // consider empty models to be valid return true; } if (validatePnr(viewValue)) { // it is valid return true; } // it is invalid return false; }; } }; });

Plunker with my example http://plnkr.co/edit/OFYG06YEFwKg8zrLYVN1?p=preview

+7
angularjs validation forms
source share
3 answers

you can tell html not to check the html form with the novalidate attribute in the tag. Since you are checking in angularjs, you do not need it to be validated again by HTML.

http://www.w3schools.com/tags/att_form_novalidate.asp

0
source share

HTML allows nothing but a number or a decimal number (using step="any" to be careful, this will make angular consider it invalid ... however, you can create your own validation method in the controller:

 $scope.validated = function(){ if (null !== $scope.pnr) ){ $scope.pnr = $scope.pnr.split("-").join(); if(typeof parseInt($scope.pnr, 10) = 'integer') return true; else return false; } else { return false; } };

it's just a random check of not necessarily what you want ...

Then it has the ng-class "error", which is included if checked === false

something like:

 <form name="myForm" ng-submit="validated && submittedSSN"> ng-class="{strike: deleted, bold: important, 'has-error': error}" <input type="number" ng-class=" {error: !validated}" ng-model="pnr" pnrvalidator /> </form>

CSS should also have something for error.

 .error { background: red; border:red; color: lime; }

- Pay attention to this joke, which will be insane.

https://docs.angularjs.org/api/ng/directive/ngClass

Also see iPhone UIWebview: how to get a numeric keypad? Is it possible? How to add custom validation to an AngularJS form?

Accordingly, you can make type="tel" , which will only work with Safari.

0
source share

I did some more research on my problem with <input type="number"/> and randomly checking numbers containing dashes, like 1234-1234. And it seems that now it is impossible to solve. (I would like to use type = "number" to get a numeric keyword for mobile browsers)

You can turn off the number of corners check by deleting all parsers in my directory link function

 ctrl.$parsers = [];

Angular then says that this is a valid number and the addition of the ng-valid-number class. But this does not help, because the browser (except IE11) returns an empty string when entering a number containing a dash in the middle, for example 1234-1234.

According to How to get the original value of the <input type = "number" →> field? and https://html.spec.whatwg.org/multipage/forms.html#states-of-the-type-attribute is the correct behavior for the browser according to the HTML specification. It can be tested with this code:

 <!DOCTYPE html> <html> <head> <script data-require=" jquery@2.1.4 " data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <h1>Input test</h1> <input type="number" id="myInput"/> Value=<span id="myValue"></span> <script> $('#myInput').keyup(function(){ var value = $(this).val(); $('#myValue').text(value); }); </script> </body> </html>

You can use type="tel" , but on iOS you get a numeric keypad without a dash. So this will not work either. A great blog post that describes different browser support for different input types: http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/

The HTML 5.1 specification proposes another attribute 'inputmode', which may have the value 'numeric' inputmode="numeric" . The inputmode should tell the browser which input engine would be most useful for users entering content into the form control. https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute . But there is no browser support yet. http://www.wufoo.com/html5/attributes/23-inputmode.html

So it seems that at the moment I should use <input type="text"/>

0
source share

More articles:


All Articles