使用ngMessages验证自定义指令 [英] Validate custom directive using ngMessages

问题描述

我在写一个angularjs Web App和使用角材料（不知道这是相关的问题）和 ngMessages 为无效输入用户提供反馈。

I writing a web app in angularjs and using angular material (not sure if that is relevant to the question) and ngMessages to provide feedback for invalid inputs to the user.

通常，对于指令的验证来提供，我可以以类似于方法验证

Usually, for validation of directives provided, I can validate in a way similar to:

<md-input-container>
    <input required name="myInput" ng-model="someModel">
    <div ng-messages="formName.myInput.$error">
        <div ng-message="required">This field is required.</div>
    </div> 
</md-input-container>

但是，如果我创建自己的自定义指令...

But if I created my own custom directive...

moduleName.directive('ngCustomdir', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModel){
            //do some validation
            return validation; //<--true or false based on validation
        }
    };
}

和它列入我的输入...

and include it in my input...

<input required ng-customdir name="myInput" ng-model="someModel">

我知道它验证输入，因为如果根据我的自定义指令的验证输入无效，现场变成红色和$无效的值设置为true，但我不知道如何使一个消息，ngMessages出现根据当这种情况发生。

I know it validates the input, because if the input is invalid based on my custom directive's validation, the field turns red and the $invalid value is set to true, but I do not know how to make a message appear with ngMessages based on when this happens.

<div ng-messages="formName.myInput.$error">
    <div ng-message="required">This field is required.</div>
    <div ng-message="customdir">This is what I need to appear.</div>
</div>

我似乎无法得到时，我自定义指令验证是无效的出现一条消息。我该怎么做呢？
感谢您提前帮助。

I cannot seem to get a message to appear when my custom directive validation is invalid. How do I do this? Thanks for the help in advance.

推荐答案

您已经非常接近，只是添加一些验证在你的链接功能：

You are getting very close, just add some validation in your link function:

link: function($scope, $element, $attrs, ngModel){
        ngModel.$validators.required = function(modelValue) {
              //true or false based on required validation
        };

        ngModel.$validators.customdir= function(modelValue) {
              //true or false based on custome dir validation
        };
    }

在该模式的转变，AngularJS会调用在 $验证对象中所有验证功能。在NG-消息将显示基于函数的名称。
关于$验证的介绍：

When the model changes, AngularJS will call all the validate functions in $validators object. The ng-message will display based on the function name. More infomation about the $validators:

<一个href=\"https://docs.angularjs.org/api/ng/type/ngModel.NgModelController\">https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

<一个href=\"http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html\">http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

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