javascript - ng-model - Empty input returns null - Stack Overflow

admin管理员组

文章数量:1332896

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 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!

• javascript
• angularjs
• angular-ngmodel
• angularjs-ng-model

Share Improve this question Follow edited Apr 12, 2018 at 19:22 Alexander Abakumov 14.6k1616 gold badges9797 silver badges133133 bronze badges asked May 3, 2017 at 5:49 SagieSagie 1,07444 gold badges1313 silver badges2727 bronze badges 5

• 1 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 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 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 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 Commented May 3, 2017 at 6:04
• I believe when you clear an input type="number" it bees 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 Commented Aug 27, 2018 at 16:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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)

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

本文标签： javascriptngmodelEmpty input returns nullStack Overflow