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

改用FormControl和validators：

<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)]);

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

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

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

Angular 2+ (ngModelChange) 自身输入

Angular 2+ (ngModelChange) on input on itself

angular

angular-ngmodelchange