Angularjs与指令初始表单验证 [英] Angularjs initial form validation with directives

问题描述

我有一个名为验证指令有效数用于设置使用$ setValidity一种形式的有效性 - 这工作得很好，我输入到任何文本值输入框已经应用到作为一个属性的指令。

I have a validation directive called valid-number that is used to set the validity of a form using $setValidity - this works fine for any text values that I type into the input box that have the directive applied to as an attribute.

的HTML是

<form name="numberForm">
<input name="amount" type="text" ng-model="amount" required  valid-number /></form>

该指令是如下

angular.module('test',[]).directive('validNumber',function(){
            return{
                require: "ngModel",
                link: function(scope, elm, attrs, ctrl){

                    var regex=/\d/;
                    ctrl.$parsers.unshift(function(viewValue){
                        var floatValue = parseFloat(viewValue);

                        if(regex.test(viewValue)){
                            ctrl.$setValidity('validNumber',true);
                        }
                        else{
                            ctrl.$setValidity('validNumber',false);
                        }
                        return viewValue;
                    });
                }
            };
        });

不过，我也想被触发验证和CSS设置为无效clsss如果输入框被初始化时首先加载页面的值是无效的，例如，如果我设置 $ scope.amount ='不是一个数字我所期望的输入框中有适用于它的指令，但没有喜悦。为了让不是一个数字来突出显示为无效，我必须做出改变的输入，这会触发指令的内容。

However, I would also like the validation to be triggered and set the css to an invalid clsss if the value the input box is initialised to when the page is first loaded is invalid, eg if I set $scope.amount = 'not a number' I would expect the input box to have had the directive applied to it, but no joy. In order for not a number to be highlighted as invalid I have to make a change to the contents of the input, which triggers the directive.

我怎么能保证指令适用于不管＆LT;输入＆GT; 被初始化以

How can I ensure the directive applies to whatever the <input> is initialised with?

一个完整的code例子是在这里;

A full code example is here;

http://jsfiddle.net/JW43C/5/

推荐答案

$解析器数组包含将被应用到该模型从接收值的函数列表视图（什么用户类型）和 $格式化数组包含之前它在视图中显示正在应用到模型值的函数列表。

$parsers array contains a list of functions that will be applied to the value that model receives from the view (what user types in), and $formatters array contains the list of functions that are being applied to the model value before it's displayed in the view.

在您的指导您正确使用了 $解析器数组，但你还需要添加 $格式化阵列如果你想验证初始值：

In your directive you correctly used the $parsers array, but you also need to add the $formatters array if you want the initial value to be validated:

angular.module('test',[]).directive('validNumber',function(){
  return{
    require: "ngModel",
    link: function(scope, elm, attrs, ctrl){
      var regex = /^\d$/;
      var validator = function(value){
        ctrl.$setValidity('validNumber', regex.test(value));
        return value;
      };

      ctrl.$parsers.unshift(validator);
      ctrl.$formatters.unshift(validator);
    }
  };
});

演示plunker

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