Angular.js: number input filter is not working if we clear the value

Created on 26 Nov 2014 · 5Comments · Source: angular/angular.js

if we clear the number input value(make it empty) ideally filter shouldn't be applied and all values should be listed. Right now if we apply some filter by putting number lets say 5 in input box it works fine and all data matching 5 is listed down. Now if we clear the value in input box, ideally all values should be listed (no filter) but angular applies null filter for numbers and everything is filtered out (ng-repeat doesn't list anything).

input type="number" ng-model="age"

filter:age

Note: No issue with type=text input

forms low confusing bug

Source

webtunings

Most helpful comment

(As you mentioned) this happens because input[number] assigns null to the model when the field is empty.

Expecting this to work the way you expect it to is reasonable (imo), but I am not sure how we could address this.
Fixing it on the filter side is not desirable, because null can be a valid value to look for (and we can't treat it as undefined). Fixing it on the NgModelController is probably not a viable solution either.

@others: Thoughts ?

In the meantime, you could use this (not so beautiful) work-around:

<input type="number" ng-model="search.posts" />
...
<div ng-repeat="user in users | filter:((search.posts===null)?undefined:search)">...</div

Demo fiddle

gkalpak on 26 Nov 2014

👍2

All 5 comments

(As you mentioned) this happens because input[number] assigns null to the model when the field is empty.

@others: Thoughts ?

In the meantime, you could use this (not so beautiful) work-around:

<input type="number" ng-model="search.posts" />
...
<div ng-repeat="user in users | filter:((search.posts===null)?undefined:search)">...</div

Demo fiddle

gkalpak on 26 Nov 2014

👍2

We return null because returning undefined from a parser sets a parse error. Another reason why that is not the best design.

Narretz on 26 Nov 2014

@Narretz I was about to ask why we don't return undefined :-)

pkozlowski-opensource on 26 Nov 2014

I know this post is kinda old but i had a really bad time figuring out how to solve this problem so I want to share my solution. Add a oninput event to your input field and in the javascript function check if the value of this field is an empty string, if so delete the value of the input field with:
delete document.getElementById('whatever').value;