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

你可以试试这个：

public value;

  validateWhite(event: number) {

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

在模板中：

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

对我来说效果很好:)

Answer 2

我自己也遇到了这个问题。正如您所发现的，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 绑定，确保该值始终保持在您的范围内，无论它是如何设置的。不幸的是，似乎确实有必要将该值短暂设置为“未定义”。出于某种原因，当我直接将 realValue 设置为 min 或 max 时，Angular 并没有更新字段中显示的值。将其设置为 undefined，然后使用 setTimeout 设置所需的值，似乎会强制更新，尽管结果会出现奇怪的闪烁行为。

Answer 3

尝试使用 Min 和 Max 属性。

   <input type="number" min="1" max="5">

这不会让步进箭头允许超过数字