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, May 03 '17 at 05: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, May 03 '17 at 06: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, May 03 '17 at 06:03
I'm voting to close this question as off-topic because he already found the best solution — Ramesh Rajendran, May 03 '17 at 06: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, Aug 27 '18 at 16:37

score 2 · Answer 1 · edited May 23 '17 at 12:02

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

score 2 · Accepted Answer · answered May 03 '17 at 06:28

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)

ng-model - Empty input returns null

2 Answers2