输入数字上的 NgModelChange 不更新视图

Question

我目前正在尝试创建一个输入数字，以防止用户输入高于 @Input() maxValue 的数字，我是这样实现的：

HTML :

<input
    class="number-selector-input"
    type="number"
    [(ngModel)]="value"
    (ngModelChange)="checkValue($event)"
/>

打字稿：

public checkValue(value) {
  if (value > this.maxValue) { 
    this.value = this.maxValue;
  }
  if (value < this.minValue) { 
    this.value = this.minValue;
  }
}

它工作得很好，但仍然有一个我无法理解的问题。我的 maxValue 等于 100，当我输入 150 或 200 时，它会自动更改为 100，但是当我输入 1000 时，输入的数字不会更新。

当我尝试在控制台或直接在 HTML 中显示该值时，模型正确地等于 100。您有什么想法可以帮助我理解这一点吗？

Answer 1

你能试试这个吗

<input
        class="number-selector-input"
        type="number"
        [(ngModel)]="value"
        (ngModelChange)="checkValue($event)"
    />
    
    public checkValue(value) {
      if (+value > this.maxValue) { 
        this.value = this.maxValue;
      }
      if (value < this.minValue) { 
        this.value = this.minValue;
      }
    }

Answer 2

老实说，这是一个奇怪的错误，我进行了测试，它显示了相同的行为。

但是，您可以通过添加一个指令来规避这个问题，我认为它也更清晰，因为它不会使您的组件因功能而混乱

指令：

import { Directive, Input, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[minMax]'
})
export class MinMaxDirective {

  @Input()
  public min: number;

  @Input()
  public max: number;

  constructor(private ref: ElementRef) { }

    @HostListener('input', [ '$event' ])
  public onInput(a_Event: InputEvent): void {
    let val = parseInt(this.ref.nativeElement.value);
    if(this.max !== null && this.max !== undefined  && val >= this.max)
      this.ref.nativeElement.value = this.max.toString();
    else if (this.min !== null && this.min !== undefined  && val <= this.min)
      this.ref.nativeElement.value = this.min.toString();
  }

}

用法：

<input
    [(ngModel)]="value"
    [min]="minValue"
    [max]="maxValue"
    minMax
    class="number-selector-input"
    type="number"/>

演示：https://stackblitz.com/edit/angular-input-min-max-directive

Answer 3

我设法通过使用 (keyup) 而不是 (ngModelChange) 解决了我的问题:

(ngModelChange)="checkValue($event)" --> (keyup)="checkValue($event)"

并且 checkValue(value) 方法变为：

public checkValue(event) {
  if (event.target.value > this.maxValue) {
    this.value = this.maxValue;
  }
  if (event.target.value < this.minValue) {
    this.value = this.minValue;
  }
}

输入数字上的 NgModelChange 不更新视图

NgModelChange on input number not updating the view

input

angular-ngmodel

angular