Custom validation not working using Angular Js

Question

I have created directives for form controls. For required if value is blank validation works fine but I want to set required for empty and "-1" so modified selectControlDir in controlDirective.js. But getting error ctrl is not defined.

Select control directive code

function selectControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: {
              ngModel: '=',
              queObj: '='
            },
            template: '<div class="form-group">\n\
<label for="{{queObj._attributeName}}" class="col-sm-5 control-label">{{queObj._text}}</label>\n\
<div class="col-sm-6"><select {{queObj._attributeName}} ng-options="ans._value as ans._promptText for ans in queObj._answerOptions" ng-model="ngModel" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{queObj._attributeName}}" id="{{queObj._attributeName}}"></select>\n\
</div>'
            ,
            link: function (scope, element, attrs)
            {
                if(angular.isUndefined(scope.ngModel))
                {
                    scope.ngModel = scope.queObj._pageAttributes.defaultValue;
                }
                // add a parser that will process each time the value is
                // parsed into the model when the user updates it.
                ctrl.$parsers.unshift(function (value) {
                    if (value) {
                        // test and set the validity after update.
                        var valid = value.charAt(0) == '' || value.charAt(0) == '-1';
                        ctrl.$setValidity('required', valid);
                    }
                    // if it's valid, return the value to the model,
                    // otherwise return undefined.
                    return valid ? value : undefined;
                });
            }
        };
    }

What I am missing here? Please see plunker for complete code https://plnkr.co/edit/GA74YHNFxFb0ARg16Sjj?p=preview

If I remove this ctrl.$parsers.unshift code error gets off.

You can not add attribute by having interpolation directive like {{queObj._attributeName}} — Pankaj Parkar
– Pankaj Parkar, Commented Jul 27, 2016 at 6:01
ctrl.$parsers.unshift(function (value) { , added in directive for validation. — Praveen D
– Praveen D, Commented Jul 27, 2016 at 6:13

Silvinus · Accepted Answer · 2016-07-27 06:39:03Z

1

ctrl is undefined because you missed to set require property in your directive :

return {
        transclude: true,
        restrict: 'E',
        require: 'ngModel',
        scope: {
          ngModel: '=',
          queObj: '='
        },
        template: '...'
        ,
        link: function (scope, element, attrs, ctrl)
        { 
            if(angular.isUndefined(scope.ngModel))
            {
                scope.ngModel = scope.queObj._pageAttributes.defaultValue;
            }
            // add a parser that will process each time the value is
            // parsed into the model when the user updates it.
            ctrl.$validators.required = (function (value) {
                var valueToTest = value || '';
                // if it's valid, return the value to the model,
                // otherwise return undefined.
                return !(valueToTest.charAt(0) == '' || valueToTest.charAt(0) == '-1');
            });
        }

}

After defined require property, you can access to ctrl in link function

Edit: With this way, the two way binding (ngModel: '=') is unecessary

edited Jul 27, 2016 at 6:39

answered Jul 27, 2016 at 6:11

Silvinus

1,4459 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Praveen D Over a year ago

Thanks. I update plunker. I am trying to add validation but its not wroking. I am expecting there shoudl be required error for field "Ownership type"

Praveen D Over a year ago

everything is working in application, I am trying to add a validation to all controls if value is empty or -1 it should return error.

Silvinus Over a year ago

A more simple way is to use validators from ngModel (toddmotto.com/…). I update my answered with it

Praveen D Over a year ago

updated plunker with ctrl.$validators.required.... bu its not working. when I set please select in question "Ownership type" it should show error on touch and submit.

Collectives™ on Stack Overflow

Custom validation not working using Angular Js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related