无法使用NG-MINLENGTH个输入与角定制指令 [英] Unable to use ng-minlength for input with custom directive in Angular

问题描述

我已经基于一个电话号码本上要点的格式化指令。一般的一切伟大工程。但是，如果我加入NG-或MINLENGTH NG-最大长度的验证要求，输入将不接受任何输入的。

  .directive（'phonenumberDirective'，['$过滤'，函数（$过滤器）{    功能链接（范围，元素，属性）{    scope.inputValue = scope.phonenumberModel;    范围。$腕表（'inputValue将'，功能（价值属性oldValue）{      值=字符串（值）;
      变种数= value.replace（/ [^ 0-9] + /克，''）;
      scope.phonenumberModel =号;
      scope.inputValue = $滤波器（'PHONENUMBER'）（数）;
    }）;
   }  返回{
    链接：链接，
    限制：'E'，
    范围： {
      phonenumberPlaceholder：'=占位符，
      phonenumberModel：'=模式}，
      模板：'＆LT;输入NG模型=inputValue将TYPE =电话ID =手机NAME =手机NG-MINLENGTH个=7级=PHONENUMBER形式控制占位={{phonenumberPlaceholder} }要求/＆GT; 
    }
}]）;
 

HTML

 ＆LT;标签类=控制标签为=手机＆GT;电话和LT; /标签＆gt;
＆LT; PHONENUMBER指导性占位='[phone]'的模式='contactForm.contact.phone'＆GT;＆LT; / PHONENUMBER-指令＆GT;＆LT;跨度NG秀=$ myForm.phone＆error.required放大器;＆安培;！myForm.phone $不变
|| myForm.phone $ error.required＆放大器;＆安培; ！myForm.phone $不变
|| 。myForm.phone $ error.minlength＆放大器;＆安培; ！myForm.phone $不变级=帮助块＆GT;
输入您的电话号码＆LT; / SPAN＆GT;
 

解决方案

如果我正确地理解你的问题，这是正常现象。你的 NG-模型将不会被如果输入不经过验证管道更新。

在这种情况下，你不会看到你的守望者被解雇，直到 NG-MINLENGTH个得到满足。

顺便说一句，你可能要考虑使用 ngModelController 上属性级别的指令（你是一个元素指令）作为一种更角的方式来维持的观点的价值和它的基础模型值之间的差异。您目前正在更新 inputValue将正在寻求更新 inputValue将观察者，这可能会导致意外的行为中。

I've based a phone number formatting directive on this gist. Everything generally works great. But if I add a ng-minlength or ng-maxlength validation requirement, the input won't accept any input at all.

.directive('phonenumberDirective', ['$filter', function($filter) {

    function link(scope, element, attributes) {

    scope.inputValue = scope.phonenumberModel;

    scope.$watch('inputValue', function(value, oldValue) {

      value = String(value);
      var number = value.replace(/[^0-9]+/g, '');
      scope.phonenumberModel = number;
      scope.inputValue = $filter('phonenumber')(number);
    });
   }

  return {
    link: link,
    restrict: 'E',
    scope: {
      phonenumberPlaceholder: '=placeholder',
      phonenumberModel: '=model'},
      template: '<input ng-model="inputValue" type="tel" id="phone" name="phone" ng-minlength="7" class="phonenumber form-control"  placeholder="{{phonenumberPlaceholder}}" required /> '
    }
}]);

HTML:

<label class="control-label" for="phone">Phone</label>
<phonenumber-directive placeholder="'[phone]'" model='contactForm.contact.phone'></phonenumber-directive>

<span ng-show="myForm.phone.$error.required && !myForm.phone.$untouched 
|| myForm.phone.$error.required && !myForm.phone.$untouched 
|| myForm.phone.$error.minlength && !myForm.phone.$untouched" class="help-block">
Enter your phone number</span>

解决方案

If I understand your question correctly, this behavior is expected. Your ng-model won't be updated if the input does not pass through the validation pipeline.

In this case, you won't see your watcher get fired until ng-minlength is met.

As an aside, you may want to consider using ngModelController on an attribute-level directive (yours is an element directive) as a more "Angular" way to maintain differences between the view value and its underlying model value. You are currently updating inputValue inside a watcher that is looking for updates to inputValue, which may lead to unexpected behavior.

这篇关于无法使用NG-MINLENGTH个输入与角定制指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！