gpt4 book ai didi

angular - 为什么我不能使用 Angular NgModel 限制输入的值长度?

转载 作者:行者123 更新时间:2023-12-04 04:24:01 26 4
gpt4 key购买 nike

我有一个具有两种方式绑定(bind)的输入字段,我想将用户输入更改为大写并将其限制为 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 中调用一个方法,但结果是一样的

感谢您的帮助。

最佳答案

首先你需要了解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 - 为什么我不能使用 Angular NgModel 限制输入的值长度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58300440/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com