AngularJS - Check if an input of type "number" has a value, 0 being a valid value

Question

I am struggling to get AngularJS to work properly with a small thing that I am trying to implement.

I have an input of type number (which likely causes the issue) which is bound to a variable in my controller, and I need to disable a button if this input is empty.

Here's the code for my input and button:

<input type="number" min="0" max="20" ng-model="student.mark">

<button ng-disabled="!student">Send</button>

I tried several solutions to disable my button if the field is empty, but enable it if it has a value of 0:

<button ng-disabled="!student || !student.mark">Send</button>

<button ng-disabled="!student || !angular.isNumber(student.mark)">Send</button>

<button ng-disabled="!student || student.mark == ''">Send</button>

<button ng-disabled="!student || student.mark === ''">Send</button>

None of those seem to work. It will work properly if I have any number in my input, but either the button will be disabled if I have the value "0", or the button will stay enabled if I put a valid value and then remove it.

What makes me think that it should work is the fact that if I display the value using {{ student.mark }}, the value 0 will indeed show as "0" and an empty input will show as empty.

Thanks.

perhaps you have more logic behind the scenes, but it works if you have just ng-disabled="!student.mark" (maybe you need && instead of ||) — Aleksey Solovey
– Aleksey Solovey, Commented Jan 10, 2018 at 11:19
@AlekseySolovey With this solution the button is disabled when the value of the field is "0" while it should be enabled. — AntoineB
– AntoineB, Commented Jan 10, 2018 at 11:22
IMHO i think disabling a submit btn is a bad practice. Having a good constrain validation on the form gives meningsfull errors to the form, you don't get them if you can't click the submit btn — Endless
– Endless, Commented Jan 10, 2018 at 11:38

subodhkalika · Accepted Answer · 2018-01-10 11:27:10Z

1

NOTE : 0 is treated as false.

In your controller define

 $scope.student.mark = null;

Use condition

 ng-disabled="student.mark == null && student.mark < 0"

answered Jan 10, 2018 at 11:27

subodhkalika

2,3151 gold badge11 silver badges20 bronze badges

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

Comments

nisanarz · Accepted Answer · 2018-01-10 11:54:33Z

1

I would suggest you to use form for that, something like that:

<form name="formName" ng-submit="someMethod(student)" autocomplete="off" 
novalidate>

<input type="number" min="0" max="20"
    ng-model="student.mark" placeholder="e.g. 12"
    ng-required="true" /> 
<button type="submit" value="Send" ng-disabled="formName.$invalid || <something else here>" />
</form>

edited Jan 10, 2018 at 11:54

answered Jan 10, 2018 at 11:32

nisanarz

9271 gold badge12 silver badges22 bronze badges

2 Comments

AntoineB Over a year ago

I cannot really apply that solution as I have a form (without the form tag) in each row of a table, which makes it not valid HTML if I add the form tag. Not great but yeah...

nisanarz Over a year ago

bummer :/, I usually prefer to use form in this cases. maybe next time it will helps you :)

AntoineB · Accepted Answer · 2018-01-10 11:25:37Z

0

I tried a few more things and actually testing if the value is null did the trick:

<button ng-disabled="!student || student.mark === null">Send</button>

answered Jan 10, 2018 at 11:25

AntoineB

4,6847 gold badges31 silver badges68 bronze badges

Collectives™ on Stack Overflow

AngularJS - Check if an input of type "number" has a value, 0 being a valid value

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related