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

这是数据减少，动作增加（DDAU）原理的一个很好的例子。数据应流到您的组件（或元素），但只有在满足某些条件时才由应用程序更新。可悲的是，{{input}}助手不支持DDAU原则。但是您无需使用即可轻松实现目标：

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

我们使用的是标准<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');
    }
  }
}

请注意，notifyPropertyChange()如果新值不符合我们的标准，我们必须致电。这将触发UI更新以重置<input>元素的值。

我写了一个Ember Twiddle演示了这种方法：https ://ember-twiddle.com/bcf03934667364252e52b21930d664fd?openFiles = templates.application.hbs%2C