Question

我在angularjs中编写了一个Web应用程序，并使用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>

当我的自定义指令验证无效时，我似乎无法显示消息。我该怎么做呢？感谢您的帮助。

Answer 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

Answer 2

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

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

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

使用ngMessages验证自定义指令

2 个答案: