Angular 为什么我不能限制输入'；s值长度与角度模型？

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

如果我输入“abc”，它会正确地将其替换为“abc”，但只要我输入的字符超过3个，其他字符就不会被删除。例如，“abcde”在输入中显示“abcde”。 请参见stackblitz示例：

我知道我可以用maxlength限制字段长度，它是有效的，但我想知道为什么我在这里做的不起作用

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

---

感谢您的帮助。

首先，您需要了解viewModel和model

键入第四个字符时，model仍然是

ABC

，因此Angular不会更新viewModel（），但输入元素仍会响应您的键入

此问题的解决方案是手动控制输入元素值。或设置

maxLength

机场
{{机场}

从'@angular/core'导入{Component，ViewChild，ElementRef}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChild（'input'，{static:false}）input:ElementRef；
机场=''；
onChange（值：字符串）{
this.airport=value.substring（0,3）.toUpperCase（）；
this.input.nativeElement.value=this.airport；
}
}

---

谢谢，即使使用[（ngModel）]而不是（ngModelChange），这也很有效。现在我需要了解ViewChild的用法，我想我需要阅读文档：）

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

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