ng-model - Empty input returns null

Question

I have this input:

<input ng-model="data.value" type="number" placeholder="0" value="0">

When I changed the input (for example to 1) and then delete it the data.value holds null. I want that when I delete the input data.value will hold 0 as a default value.

I saw this solution: Angular ng-model: empty strings should be null

This is solution will work for me but I want to know if there any other solution without $watch or ng-change function.

Thanks in advance!

I think the cleanest would be to create a custom attribute directive that requires ng-model and then applies a custom parser that transforms the value to 0, which is mentioned in the solution you linked to. — Strille
– Strille, Commented May 3, 2017 at 5:54
But in that case it would set it to 0. If I will have some other inputs and for each input I want other default value I will need to have a lot of directives. @Strille — Sagie
– Sagie, Commented May 3, 2017 at 6:00
Who told you need lot of directive, just create a single directive and call it to all the text box's where you want. — Ramesh Rajendran
– Ramesh Rajendran, Commented May 3, 2017 at 6:03
I'm voting to close this question as off-topic because he already found the best solution — Ramesh Rajendran
– Ramesh Rajendran, Commented May 3, 2017 at 6:04
I believe when you clear an input type="number" it becomes null. In my case I have ng-min="1" and ng-max="1000" and I want clearing the field to make it invalid and trigger my validation message. Do you think I should try to use ng-change and manually set the error myself? — Naomi
– Naomi, Commented Aug 27, 2018 at 16:37

tanmay · Accepted Answer · 2017-05-03 06:28:45Z

If I will have some other inputs and for each input I want other default value I will need to have a lot of directives

You could have a defaultValue attr for the directive which would be provided while using the directive from HTML. Something like this:

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

Now you can easily pass different default values from outside and it will be set when string is emptied.

HTML would be like,

<input ng-model="data.value" type="number" placeholder="0" value="0" 
       empty-to-default default-value="5">

working plunker (open console to notice how it sets default value 5 since string is emptied and passed value is 5)

Community · Accepted Answer · 2017-05-23 12:02:17Z

2

This is solution will work for me but I want to know if there any other solution without $watch

The link what you found, also had a solution with using $watch

If you want to use ng-change

Jus try this

<input ng-model="data.value" type="number" ng-change="defaultValue()" 
placeholder="0" value="0">

// controller

$scope.defaultValue=function()
{
  if($scope.data.value==null || $scope.data.value==='')
  {
    $scope.data.value=0;
  }
}

But Directive is one of the best way than other options

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 3, 2017 at 6:09

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Collectives™ on Stack Overflow

ng-model - Empty input returns null

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related