AngularJs input field with ng-model with filter issue

Question

I have several input fields and i wish to validate user input if is only white space. I try with directive or with filter. I prefer not to use $watch because there are too many input fields. What I need is: If User set only blank spaces in input field some function or directive to clean this white spaces. I can do this with jQuery or vanilla JS, but I prefer this result to be in angular way.

Where I`m wrong in directive or in filter

This is my code:

angular.module('app')
.directive('customSpaceValidation', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl.replace(/\s/g, '').length) {
                ctrl = "";
            }
            return ctrl;
        }
    };
}])
.filter('nospace', function () {
    return function (value) {
        if (!value.replace(/\s/g, '').length) {
            value = "";
        }
        return value;
    };
})

this is html with directive:

<input type="text" class="form-control" id="inputKey" ng-model="channel.key" customSpaceValidation data-ng-trim="false" ng-required="true" name="inputKey" required />

this is html with filter

<input type="text" class="form-control" id="inputKey" ng-model="channel.key | filter : nospace" data-ng-trim="false" ng-required="true" name="inputKey" required />

Filter trow exceptions:

ng-table-export.src.js:45 TypeError: ngModelSet is not a function
at NgModelController.$$writeModelToScope (ng-table-export.src.js:45)
at writeToModelIfNeeded (ng-table-export.src.js:45)
at ng-table-export.src.js:45
at validationDone (ng-table-export.src.js:45)
at processAsyncValidators (ng-table-export.src.js:45)
at NgModelController.$$runValidators (ng-table-export.src.js:45)
at NgModelController.$$parseAndValidate (ng-table-export.src.js:45)
at NgModelController.$commitViewValue (ng-table-export.src.js:45)
at ng-table-export.src.js:45
at Scope.$eval (ng-table-export.src.js:45)

Nikos Paraskevopoulos · Accepted Answer · 2016-11-14 13:29:01Z

1

You cannot use ng-model with filter because filtering is a one-way operation, while ng-model is two-way binding. The directive has to be snake-cased instead of camelCased when used in the HTML, i.e. custom-space-validation.

To actually validate, you need a validator:

.directive('customSpaceValidation', [function() {
    var RE = /^\s+$/;

    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            ngModel.$validators['customSpace'] = function(modelValue, viewValue) {
                var value = modelValue || viewValue;
                return !RE.test(value);
            };
        }
    };
}])

edited Nov 14, 2016 at 13:29

answered Nov 14, 2016 at 10:39

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

4 Comments

ALK Over a year ago

Yes I saw it, but i wish if string is only white spaces to delete them. I have a error massage if the field is empty, but I`m not sure why when i set white spaces the form is return valid. My wish is to check on user input set only white spaces to delete them I try with ngFocus, ng-init and etc. I can do this with JQuery, but i prefer to be with angular way. Thank You!

ALK Over a year ago

I'm sorry it did not explained in the question above

ALK Over a year ago

With jquery is only this code: $(function () { $('input[type="text"]').change(function () { if (!this.value.replace(/\s/g, '').length) { this.value = ""; } }); });

Nikos Paraskevopoulos Over a year ago

If you want to delete the spaces, it is still easy and similar. You have to use the $parsers pipeline (instead of the $validators) and do the tranformation there: ngModel.$parsers.push(function(value) { return RE.test(value) ? '' : value; });.

Collectives™ on Stack Overflow

AngularJs input field with ng-model with filter issue

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