How to make type=“number” to positive numbers only using ember js

It was only preventing negative numbers from being entered from up/down arrows, whereas user can type negative number from keyboard.

<div class="col-sm-2">
<label>Quantity</label><br>
input type="number" value=quantity min="0" class="form-control-
invoice"
</div>


1 Answer
1

This is a good example for data down, actions up (DDAU) principle. The data should flow down to your component (or element) but only by updated by your application if it matches certain criteria. Sadly the input helper does not support DDAU principle. But you could easily accomplish your goal without using it:

input

<input type="number" value=quantity onchange=action "updateQuantity" value="target.value" min="0" >


We are using a standard <input> element and bind it's value property to quantity. We bind a custom action to the change event. In that action we could check if the updated value meets our criteria and if so update quantity. The action may look like the following:

<input>

value

quantity

change

quantity

actions:
updateQuantity(val)
val = parseInt(val);
if (val >= 0)
this.set('quantity', val);
else
window.alert('number must not be negative');
this.notifyPropertyChange('quantity');





Please not that we have to call notifyPropertyChange() if the new value does not meet our criteria. This will trigger an update of UI to reset the value of the <input> element.

notifyPropertyChange()

<input>

I've written an Ember Twiddle demonstrating the approach: https://ember-twiddle.com/bcf03934667364252e52b21930d664fd?openFiles=templates.application.hbs%2C

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.