angular - Angular 2+ (ngModelChange) 本身的输入

Question

我有数字输入字段，我想限制它，所以最大值将为 100。所以当用户按数字输入数字时，我希望它被实时限制。为此，我正在使用(ngModelChange).

例子：

• 用户输入 1 即可，
• 用户再次输入1，就OK了，
• 用户再次输入1会自动将111替换为100，就OK了
• 用户再次输入 1 它应该自动替换为 100。但它保持 1001 并且它将继续添加有关 ngModelChange 限制的数字。

这是html代码：

<!-- NOT WORKING -->
<input type="number"
       class="form-control"
       maxlength="3"
       [(ngModel)]="period"
       (ngModelChange)="onValueChange()"
       id="period" placeholder="0" min="0"
       max="100" step="1" name="period">

<!-- WORKING -->
<p>{{period}}</p>

它的控制器：

  public period: number;

  onValueChange() {
     if (this.period > 100) this.period = 100;
  }

这将更新期间，但只有一次。如果我继续输入更多数字，它不会更新输入字段。也不maxlength="3"工作

我尝试了相同的概念，但在段落上并且它正在工作。可能问题仅出在输入字段上。

Answer 1

由于您在 ngModelChange 中更新模型值，因此模型值与视图值不同步。尝试在 settimeout 内异步更新模型值。

onValueChange() {
    setTimeout(()=>{
      if (this.period > 100) this.period = 100;
    })
  }

Answer 2

尝试使用而(input)不是(ngModelChange)：

(input)="onValueChange($event)"

在您的 ts 代码中将是：

onValueChange(event): void {
  console.log(event);
  let p = event.target.value;
  if (p > 100) this.period = 100;
}

Answer 3

使用FormControlandvalidators代替：

<input class="form-control" 
        type="number" 
        min="0" 
        max="100" 
        placeholder="0" 
        [(ngModel)]="period" 
        name="period" 
        [formControl]="period">

this.period= new FormControl("", [Validators.max(100)]);