ng-model: empty strings should be null

Question

If I use ng-model for an input field and empty it, angular sets it to '' instead of null even if it was null before.

This is a problem in my case because I need to send null to the server if the input field is empty, and not ''.

Is there a way to tell angular setting "empty" input models to null?

kapace · Accepted Answer · 2015-01-15 19:40:46Z

48

You may want to $watch for the empty value and set it to null:

<input type="text" ng-model="test.value" />

$scope.$watch('test.value', function (newValue, oldValue) {
  if(newValue === "")
    $scope.test.value = null;
});

Another way would be to use a custom directive and apply a $parsers in it:

<input type="text" ng-model="test.value" empty-to-null />

myApp.directive('emptyToNull', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function(viewValue) {
                if(viewValue === "") {
                    return null;
                }
                return viewValue;
            });
        }
    };
});

edited Jan 15, 2015 at 19:40

kapace

3577 silver badges12 bronze badges

answered Aug 16, 2014 at 22:04

Mik378

22.2k15 gold badges94 silver badges191 bronze badges

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

5 Comments

Mik378 Over a year ago

Ok, you may configure the scope as isolated in the directive to have a better encapsulation.

Episodex Over a year ago

This directive works, but only if the input was changed. If the view was loaded and input untouched then still when getting this value in the controller it will be empty string instead of null. Any ideas how to fix this?

Mik378 Over a year ago

You could simply add this at the top of the link function: if(scope.value === '') scope.value = null;

Episodex Over a year ago

Thanks for answer. I tried but it doesn't work. scope does not contain value. Should it be some isolated scope?

Mik378 Over a year ago

In this example, it's assumed that the contextual scope contains a value property. As this directive simply reads one value (no assignment), it's unnecessary to make an isolate scope.

Collectives™ on Stack Overflow

ng-model: empty strings should be null

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related