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

Question

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>

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

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 note 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.

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