为什么我不能用 Angular NgModel 限制输入的值长度？

Question

我有一个双向绑定的输入字段，我想将用户输入更改为大写并将其限制为 3 个字符。我在变量的设置器中这样做。如果我尝试执行子字符串，则大写替换有效，它不再更新字段值，但属性已正确更新。

如果我输入“abc”，它会正确地将其替换为“ABC”，但只要我输入超过 3 个字符，其他字符就不会被删除。例如“abcde”在输入中显示“ABCde”。 请参阅 stackblitz 示例：https://stackblitz.com/edit/angular-bpuh8a

<input type="text" id="airport" name="airport" [(ngModel)]="airport">

private _airport = '';
get airport(): string {
  return this._airport;
}
set airport(value: string) {
  this._airport = value.substring(0, 3).toUpperCase();
}

我知道我可以使用 maxlength 限制字段长度并且它有效，但我想了解为什么我在这里所做的不起作用。

我也试过在 ngModelChange 中调用一个方法，但结果是一样的

感谢您的帮助。

Answer 1

首先你需要了解viewModel和model。

当你输入第四个字符时，model 仍然是ABC，所以 Angular 不会更新 viewModel (Source code)，但是输入元素仍然会响应你的输入。

解决这个问题的方法是手动控制输入元素值。或设置maxLength。

<label for="airport">Airport </label>
<input #input type="text" id="airport" name="airport" [ngModel]="airport" (ngModelChange)="onChange($event)">
{{ airport }}

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('input', { static: false }) input: ElementRef<HTMLInputElement>;
  airport = '';

  onChange(value: string) {
     this.airport = value.substring(0, 3).toUpperCase();
     this.input.nativeElement.value = this.airport;
  }
}

https://stackblitz.com/edit/angular-nwwjs7?file=src/app/app.component.ts