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

Question

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

如果我输入">

abc"，它会将其正确替换为"ABC"，但只要我输入超过 3 个字符，其他字符就不会被删除。例如，"abcde"在输入中显示"ABCde"。 请参阅堆栈闪电战示例：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();
}

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

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

谢谢你的帮助。

Answer 1

首先，您需要了解视图模型和模型。

当您键入第四个字符时，模型仍然ABC，因此 Angular 不会更新 viewModel(源代码(，但输入元素仍将响应您的键入。

此问题的解决方案是手动控制输入元素值或设置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