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

Posted 2023-03-05

【中文标题】Angular - 防止在输入类型=“数字”中输入超出范围的数字

【英文标题】：Angular - prevent entering number outside of range in input type="number"

【发布时间】：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)。我尝试了一些东西，但没有成功。

【参考方案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