Angular - 防止在输入类型=“数字”中输入超出范围的数字答案

【问题标题】：Angular - prevent entering number outside of range in input type="number"Angular - 防止在输入类型=“数字”中输入超出范围的数字
【发布时间】：2021-12-09 23:33:12
【问题描述】：

在我的项目中，我有一个input type="number"，用户应该在其中输入一个介于 1（总是）和另一个数字之间的数字。我想限制 UI 输入元素，这样只能输入该范围内的数字。到目前为止我的代码：

.html:

<p>Allowed values are 1 - {{max}}</p>
<input type="number" (input)="input($event)" />

.ts:

export class AppComponent {
  readonly max = 5;

  input(event: Event) {
    const inputElem = event.target as HTMLInputElement;
    if (+inputElem.value < 1) {
      inputElem.value = '1';
    } else if (+inputElem.value > this.max) {
      inputElem.value = this.max.toString();
    }
  }
}

Stackblitz here

代码可以按我的意愿工作，但我想知道是否有 Angular 的方式来做到这一点，[(ngModel)] 或 [ngModel] 和 (ngModelChange)。我尝试了一些东西，但没有成功。

【问题讨论】：

标签： angular input angular-ngmodel html-input

【解决方案1】：

和这个another SO非常相似

  readonly max = 5;
  mynumber = 2;
  validateInput(e: any, input: any = null) {
    let value = +e;
    if (value < 1) value = 1;
    if (value > this.max) value = this.max;
    this.mynumber = value;
    if (input.value != value) {
      const start = input.selectionStart ? input.selectionStart - 1 : -1;
      input.value = value;
      if (start>=0) input.selectionStart = input.selectionEnd = start;
    }
  }

<input type="number" #input [ngModel]="mynumber" 
     (ngModelChange)="validateInput($event,input)" />

见stackblitz

【讨论】：