Angularjs - 验证自定义指令初始url值 [英] Angularjs - Validate initial url value with custom directive

问题描述

我有这种自定义的验证指令：

  / **
 *覆盖使用Django的URL验证默认URL验证
 *原始来源：http://stackoverflow.com/questions/21138574/overwriting-the-angularjs-url-validator
 * /
angular.module（'dmn.vcInputUrl'，[]）.directive（'vcUrl'，函数（）{  //匹配Django的URL验证，这使得schemeless的URL。
  VAR URL_REGEXP = /^((?:http|ftp)s?:\\/\\/)(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+(?:[A-Z]{2,6}\\.?|[A-Z0-9-]{2,}\\.?)|localhost|\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})(?::\\d+)?(?:\\/?|[\\/?]\\S+)$/i;  VAR验证=功能（值）{
    如果（URL_REGEXP.test（值）及和放大器; URL_REGEXP.test（的http：//！+值））{
      回归的http：//+价值;
      }其他{
        返回值;
      }
    }  返回{
    要求：'？ngModel'，
    链接：链接功能（范围，元素，ATTRS，ngModel）{
      功能allowSchemelessUrls（）{
        //默默prefixes schemeless网址以http：//转换期值模型值时。
        ngModel $ parsers.unshift（验证）。        ngModel。$ validators.url =功能（值）{
          返回ngModel。$的isEmpty（值）|| URL_REGEXP.test（值）;
        };
      }
      如果（ngModel＆安培;＆安培; attrs.type ===URL）{
        allowSchemelessUrls（）;
      }
    }
  };
}）;
 

它正常工作时，你'脏'通过输入或粘贴输入，但我需要它来运行这个验证，覆盖默认键入=URL验证时该值最初设置在ngModel。

我试着加入 ngModel $ formatters.unshift（验证）; ，但它导致。的http：//添加到输入端，我需要为了避免由于用户的更改是手动批准，这将是浪费时间来批准加入的http：//。

任何帮助将是AP preciated！

解决方案

设置NG-模式选项输入类型字段，例如：

\r

\r

＆LT;输入类型=文本\r
NG-模式选项={updateOn：默认，反跳：{'默认'：0}}＆LT; /输入＆GT;

\r

\r

\r

这将确保您的验证被炒鱿鱼，当值在ngModel最初设置，因为你在问题中已经指出。

查看详细ngModelOptions AngularJs文件建立：在这里输入链接的描述

I have this custom validation directive:

/**
 *  Overwrites default url validation using Django's URL validator
 *  Original source: http://stackoverflow.com/questions/21138574/overwriting-the-angularjs-url-validator
 */
angular.module('dmn.vcInputUrl', [])

.directive('vcUrl', function() {

  // Match Django's URL validator, which allows schemeless urls.
  var URL_REGEXP = /^((?:http|ftp)s?:\/\/)(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?::\d+)?(?:\/?|[\/?]\S+)$/i;

  var validator = function(value) {
    if (!URL_REGEXP.test(value) && URL_REGEXP.test('http://' + value)) {
      return 'http://' + value;
      } else {
        return value;
      }
    }

  return {
    require: '?ngModel',
    link: function link(scope, element, attrs, ngModel) {
      function allowSchemelessUrls() {


        // Silently prefixes schemeless URLs with 'http://' when converting a view value to model value.    
        ngModel.$parsers.unshift(validator);

        ngModel.$validators.url = function(value) {
          return ngModel.$isEmpty(value) || URL_REGEXP.test(value);
        };
      }
      if (ngModel && attrs.type === 'url') {
        allowSchemelessUrls();
      }
    }
  };
});

It works fine when you 'dirty' the input by typing or pasting, but I need it to run this validation, overwriting the default type="url" validation when the value is initially set in the ngModel.

I've tried adding ngModel.$formatters.unshift(validator); but it results in the 'http://' being added to input, which I need to avoid as user's changes are manually approved and it would be a waste of time to approve the addition of 'http://'.

Any help would be appreciated!

解决方案

Set ng-model-options on the input type field, for example:

<input type="text"
ng-model-options="{ updateOn: 'default', debounce: {'default': 0} }"</input>

This will ensure your validator gets fired "when the value is initially set in the ngModel", as you have stated in the question.

See detailed AngularJs documentaion on ngModelOptions:enter link description here

这篇关于Angularjs - 验证自定义指令初始url值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！