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

Странная ошибка, если честно, я тестировал, и она показала такое же поведение.

Однако вы можете обойти это, добавив директиву, которая, по-моему, намного чище, потому что она не загромождает ваш компонент функция

Директива:

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 2

Мне удалось решить мою проблему, используя (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;
  }
}

Answer 3

Можете попробовать это

<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;
      }
    }