Angular 8 数字输入最小值/最大值

Question

我有一个 Angular 8 应用程序。我想要做的是不允许用户在数字输入中设置除 0-100 范围之外的任何其他值

我在想这样的事情

<input type="number" [ngModel]="value" (ngModelChange)="validateValue($event)">

和

value = 100;

validateValue(event: number) {
    if (event > 100) {
      this.value = 100;
    } else if (event < 0) {
      this.value = 0;
    } else {
      this.value = event;
    }
}

当有 100 时，我删除最后一位数字并写入 5(所以现在我应该有 105)，它会发挥作用并将值更改为 100。

当我用光标选择整个数字并写入例如 105 时，它也会发挥神奇的作用。

但是。当我使用步进箭头或光标选择最后一个数字并更改最后一个数字时，魔法并没有发生。

为什么这不起作用？

Answer 1

我自己也遇到了这个问题。正如您所发现的，Angular 似乎并不关注数字输入上设置的最大/最小属性。这些仅由微调器按钮关注(实际上由浏览器直接管理，而不是 Angular)。在传统的 HTML/JavaScript 中，超出字段范围的键入值被视为“未定义”；在 Angular 中，它接受输入的值。

这个解决方法应该可以达到你想要的效果；如果您(或阅读本文的任何人)希望将超出范围的值设置为“未定义”，请删除 setTimeout() 调用。

public realValue : number;
public min : number = 0;
public max : number = 100;

get value() : number {
    return this.realValue;
}

set value(newValue : number) {
    this.realValue = newValue;
    if(this.realValue < this.min){
        this.realValue = undefined;
        setTimeout(() => {this.realValue = this.min;});
    }
    else if(this.realValue > this.max){
        this.realValue = undefined;
        setTimeout(() => {this.realValue = this.max;});
    }
}

<input type="number" [(ngModel)]="value" [min]="min" [max]="max" (ngModelChange)="changeCallback()" />

使用 getter 和 setter 创建伪属性，通过您的自定义逻辑路由 Angular 的 ngModel 绑定(bind)，确保该值始终保持在您的范围内，无论它如何设置。不幸的是，似乎确实有必要将该值短暂地设置为“未定义”；由于某种原因，当我直接将 realValue 设置为 min 或 max 时，Angular 并没有更新字段中的显示值。将其设置为未定义，然后使用 setTimeout 设置所需的值，似乎会强制更新，尽管结果会出现奇怪的闪烁行为。