使用ngMessages驗證自定義指令

Question

我在angularjs中編寫Web應用程序並使用角度材料 （不確定這是否與問題相關）和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);
}