angularJS required is not working in directive

Question

I have an input="text" which is required.

The below code is a directive for text which force user to type only numbers.

By its default required warning is ON. Now the problem is if you type any keyword except numbers in the textbox, it will not type the character ( which is fine ) but the required error will disappear!!!!!! the result is a textbox with empty value and not required error message !!!

angular.module('league').directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

<input type="text" class="CreateTxt" ng-model="league.name" name="leagueName" required />
<span ng-show="myForm.leagueName.$error.required" style="color:red">Its required...</span>

p0stm · Accepted Answer · 2016-07-04 09:55:17Z

1

Couldn't you achieve the same behavior with using type="number"?

You need to change the

return undefined;

to

return null;

Otherwise angular will result in parse error, which is not required error. So you did almost everything good except your choice for the fallback value.

answered Jul 4, 2016 at 9:55

p0stm

934 bronze badges

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

1 Comment

Arash Over a year ago

i dont want to use of type=number because it allow users to type 'e' and some other problems are there.

Collectives™ on Stack Overflow

angularJS required is not working in directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related