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

Question

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

如果我输入 "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。

当您键入第四个字符时，模型仍然是 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

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

Why I can not limit an input's value length with Angular NgModel?

typescript

angular2-ngmodel

angular

two-way-binding