angular - Angular 7 - 动态计算输入数字onChange的步骤属性

Question

我需要实现一个 number 类型的输入字段，其中 step 属性是动态计算的。

初始步长 = 5 当达到 25 时，将步长更改为 10

这就是我的代码的样子：

我的模板.html：

<input step="{{this.step}}" type="number" min="10" formControlName="share" (change)="computeStep()">

MyComponent.ts ：

ngOnInit(){
    this.step = 5;
}
...
computeStep() {
    if (this.myGroupForm.value.share >= 25) {
      this.step = 10;
    } else {
      this.step = 5;
    }
}

这是不正确的行为。当达到 25 时，步长值按预期为 10，但下一个输入值是 30 而不是 35。

标签： angularangular-reactive-forms

Answer 1

如果您删除min="10"，它将起作用。

如果更改min="10"为min="9"，则输入值为9、19、29。

因此，看起来通过定义min="10"，浏览器会确保输入值可以减少到 10，所以它会从 25 增加到 30，所以如果你继续点击减少按钮，它可以减少到 10。

所以你应该玩转min属性。

希望能帮助到你！