angularjs - 如何覆盖 Angular 类型=数字验证？

Question

我正在编写一条指令来验证瑞典社会安全号码 (personnummer)。用于这样的输入元素:

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

瑞典社会安全号码的格式为yyyymmdd-nnnn，例如 19121212-1212

只要我使用 type="text"，我的指令就有效。但由于我希望在移动浏览器上使用数字键盘，然后我改为 type="number":

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

然后，只有当我不在输入中输入破折号 (-) 时，我的验证器才会工作，例如 191212121212 。如果我输入 19121212-1212 则它不是有效号码。并且 ng-invalid ng-invalid-number 类被添加到我的输入元素

当我编写指令时，我按照文档如何修改内置验证器 https://docs.angularjs.org/guide/forms但它似乎不适用于 type=number 验证，或者我错过了什么？我使用的是 Angular 1.3(和 1.4)。

我的指令代码:

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;
    };
    }
};
});

以我为例的笨蛋 http://plnkr.co/edit/OFYG06YEFwKg8zrLYVN1?p=preview

Answer 1

你可以通过标签中的 novalidate 属性告诉 html 不要验证 html 表单。当您在 angularjs 中进行验证时，您不需要通过 HTML 再次验证它。

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