Validate custom directive using ngMessages

Question

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.

Answer 1

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

Answer 2

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