javascript - Validate custom directive using ngMessages - Stack Overflow

admin管理员组

文章数量:1193808

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

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.

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

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.

• javascript
• html
• angularjs
• validation
• ng-messages

Share Improve this question Follow asked Jun 30, 2015 at 0:11 northsideknightnorthsideknight 1,55711 gold badge1515 silver badges3131 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 21

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

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:

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

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

There is more compact alternative to Huy's solution:

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

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

本文标签： javascriptValidate custom directive using ngMessagesStack Overflow