CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Alex Coroza
Alex Coroza

Reputation: 1757

Multiple Directives on an Element NOT WORKING

I have an input element with two directives(attribute) in it. it adds an error class if the input is not valid.

<input required alpha type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" />

and these are my directives

// SHOWS AN ERROR IF THE INPUT IS EMPTY
directives.required = function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.on('keyup', function(event) {
                if(elem.val().trim() == '') {
                    elem.prop('title', 'This input is required!');
                    elem.addClass('error');
                } else {
                    elem.prop('title', '');
                    elem.removeClass('error');
                }
            })
        }
    }   
};

// SHOWS AN ERROR IF THE INPUT CONTAINS NON ALPHA CHARACTERS
directives.alpha = function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var regexp = /^[A-Za-z ñÑ]+$/;
            var char;
            elem.on('keyup', function(event) {
                if(!regexp.test(elem.val())) {
                    elem.prop('title', 'This input can contain letters only!');
                    elem.addClass('error');
                } else {
                    elem.prop('title', '');
                    elem.removeClass('error');
                }
            })
        }
    }   
};

But it didnt do what i expect. only one directive is working! When I tried to remove the attribute alpha , required now works! Can someone tell me why it works like this?

Upvotes: 0

Views: 125

Answers (2)

gkalpak
gkalpak

Reputation: 48211

What you want can be achieved with built-in directives and controller-functionality:

<!-- HTML -->
<input type="text" name="firstName" placeholder="First name" ng-model="someProp"
        ng-pattern="/^[A-Za-z ñÑ]*$/" ng-required="true"
        title="{{form1.firstName.$error.pattern?'Should only contain letters':
                 form1.firstName.$error.required?'This field is required':''}}" />

/* CSS */
input.ng-invalid-pattern,
input.ng-invalid-required {
    /* Put the styles for your .error class here */
}

See, also, this short demo.

Upvotes: 0

Kostya Shkryob
Kostya Shkryob

Reputation: 2369

They doesn't work together because they overwrite each other changes. I added extra condition to avoid this:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <div  ng-controller="MainCtrl">
            <input required="" alpha="" type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" />
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('MainCtrl', ['$scope', function($scope) {

            }]).directive('required', function() {
                return {
                    restrict: 'A',
                    link: function(scope, elem, attrs) {
                        elem.on('keyup', function(event) {
                            var title = 'This input is required!';
                            if(elem.val().trim() == '') {
                                elem.prop('title', 'This input is required!');
                                elem.addClass('error');
                            } else if (elem.prop('title') == title) {
                                elem.prop('title', '');
                                elem.removeClass('error');
                            }
                        })
                    }
                }   
            }).directive('alpha', function() {
                return {
                    restrict: 'A',
                    link: function(scope, elem, attrs) {
                        var regexp = /^[A-Za-z]*$/;
                        var char;
                        elem.on('keyup', function(event) {
                            var title = 'This input can contain letters only!';
                            if(!regexp.test(elem.val())) {
                                elem.prop('title', title);
                                elem.addClass('error');
                            } else if (elem.prop('title') == title) {
                                elem.prop('title', '');
                                elem.removeClass('error');
                            }
                        })
                    }
                }   
            });
        </script>
    </body>
</html>

Upvotes: 1

Related Questions