angularjs – 如何禁用角度类型=电子邮件验证？

像其他人一样说,关闭角度默认输入验证有点复杂.您需要将自己的指令添加到输入元素并处理其中的内容. Sergey’s answer是正确的,但如果您在元素上需要多个验证器,并且不希望内置验证器触发,则会出现一些问题.

以下是验证添加了所需验证器的电子邮件字段的示例.我已经添加了代码来解释发生了什么.

输入元素

<input type="email" required>

指示

angular.module('myValidations',[])

.directive('input',function () {
  var self = {
      // we use ?ngModel since not all input elements 
      // specify a model,e.g. type="submit" 
      require: '?ngModel'
      // we need to set the priority higher than the base 0,otherwise the
      // built in directive will still be applied,priority: 1
      // restrict this directive to elements,restrict: 'E',link: function (scope,element,attrs,controller) {
        // as stated above,a controller may not be present
        if (controller) {

          // in this case we only want to override the email validation
          if (attrs.type === 'email') {
            // clear this elements $parsers and $formatters
            // NOTE: this will disable *ALL* previously set parsers
            //       and validators for this element. Beware!
            controller.$parsers = [];
            controller.$formatters = [];

            // this function handles the actual validation
            // see angular docs on how to write custom validators
            // http://docs.angularjs.org/guide/forms
            //
            // in this example we are not going to actually validate an email
            // properly since the regex can be damn long,so apply your own rules
            var validateEmail = function (value) {
              console.log("Validating as email",value);
              if (controller.$isEmpty(value) || /@/.test(value)) {
                controller.$setValidity('email',true);
                return value;
              } else {
                controller.$setValidity('email',false);
                return undefined;
              }
            };

            // add the validator to the $parsers and $formatters
            controller.$parsers.push(validateEmail);
            controller.$formatters.push(validateEmail);
          }
        }
      }
  };
  return self;
})

// define our required directive. It is a pretty standard
// validation directive with the exception of it's priority.
// a similar approach must be take with all validation directives
// you would want to use alongside our `input` directive
.directive('required',function () {
  var self = {
      // required should always be applied to a model element
      require: 'ngModel',restrict: 'A'
      // The priority needs to be higher than the `input` directive
      // above,or it will be removed when that directive is run,priority: 2,controller) {
        var validateRequired = function (value) {
          if (value) {
            // it is valid
            controller.$setValidity('required',true);
            return value;
          } else {
            // it is invalid,return undefined (no model update)
            controller.$setValidity('required',false);
            return undefined;
          }

        };
        controller.$parsers.push(validateRequired);
      }
  };
  return self;
})
;

你有它您现在可以控制type =“email”输入验证.请使用正确的正则表达式来测试电子邮件.

需要注意的是,在此示例中,validateEmail在validateRequired之前运行.如果您需要validateRequired在任何其他验证之前运行,那么只需将其添加到$parsers数组(使用unshift而不是push)即可.