使用 ngMessages 验证自定义指令

Posted

技术标签:

【中文标题】使用 ngMessages 验证自定义指令【英文标题】:Validate custom directive using ngMessages 【发布时间】:2015-09-16 14:47:01 【问题描述】:

我用 angularjs 编写了一个网络应用程序,并使用angular material(不确定这是否与问题相关)和ngMessages 为用户提供无效输入的反馈。

通常,对于提供的指令的验证,我可以通过类似于以下方式进行验证:

<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>

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

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
        
    ;

并将其包含在我的输入中...

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

我知道它会验证输入,因为如果根据我的自定义指令的验证输入无效,则该字段将变为红色并且 $invalid 值设置为 true,但我不知道如何使用 ngMessages 显示消息基于这种情况发生的时间。

<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>

当我的自定义指令验证无效时,我似乎无法收到消息。我该怎么做呢? 提前感谢您的帮助。

【问题讨论】:

【参考方案1】:

您已经非常接近了,只需在您的 link 函数中添加一些验证即可:

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 会调用$validators 对象中的所有验证函数。 ng-message 将根据函数名称显示。 有关 $validators 的更多信息:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

【讨论】:

我发现您的评论非常有用。我找不到那个名字必须有 ng-messages。谢谢【参考方案2】:

Huy 的解决方案有更紧凑的替代方案:

link: function($scope, $element, $attrs, ngModel)
    //validation true or false
    ngModel.$setValidity('required',validation);

    ngModel.$setValidity('customdir',validation);

【讨论】:

以上是关于使用 ngMessages 验证自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

测试自定义验证 angularjs 指令

AngularJS自定义验证指令 - 如何避免使用隔离范围

在自定义验证器指令中注入 ngControl,导致循环依赖

带有错误消息的自定义验证器的 angularjs 指令

Angular2如何对自定义验证器指令进行单元测试?

AngularJS 自定义表单验证指令在我的模式中不起作用