Angular ng-class work with input[text] but not input[number]

Question

I am new to angular and unfortunately running into an issue.

I have the following input for a form:

<div class="form-group" ng-class="{'not-empty': mailingzip.value}">
          <input type="number" name="mailingzip" ng-minlength="5" ng-maxlength="5" ng-model="mailingzip" class="inputfield form-control" id="mailingzip" required>
          <label for="mailingzip" class="animated-label">Zip</label>
</div>

However, the class not-empty does not get applied to the div when there is an input.

When I change the input type to "text" however, it all works perfectly.

Is there a different attribute for input[number] which i will have to use?

Thanks for your help!!

NTP · Accepted Answer · 2018-04-03 20:19:46Z

1

You can check your input to see if it is greater than zero

<div class="form-group" ng-class="{'not-empty': mailingzip > 0}">
          <input type="number" name="mailingzip" ng-minlength="5" ng-maxlength="5" ng-model="mailingzip" class="inputfield form-control" id="mailingzip" required>
          <label for="mailingzip" class="animated-label">Zip</label>
</div>

answered Apr 3, 2018 at 20:19

NTP

4,4483 gold badges18 silver badges25 bronze badges

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

5 Comments

Tom Over a year ago

this works, thanks. One question - it works only when the ng-minlength and ng-maxlength requirement is fulfilled - otherwise it is not applying the class. Do you know why this could happen?

NTP Over a year ago

it is because model value is not set when ng-minlength and ng-maxlength requirement is not fulfilled, so in other words mailingzip is undefined when requirement is not met therefore mailingzip > 0 is false.

NTP Over a year ago

I'm glad I could help.

Tom Over a year ago

would you have an idea by any chance how this could be achieved even if the ng-requirement is not fullfilled? could i use mailingzip.$dirty for example or any attribute which checks if it has been touched? I tried using $dirty but it didnt seem to work.

NTP Over a year ago

I think you can use ng-keypress to set some property to true.

Collectives™ on Stack Overflow

Angular ng-class work with input[text] but not input[number]

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related