Angular语言 - 使用ngModel和ngModelChange手动限制输入的最大值

Question

我试图手动限制用户在输入中输入超过某个值的值。我使用Angular 9和ngModel作为输入。

正如你在下面的代码中看到的，在ngModelChange上，如果age的输入值大于27，我将其设置为27。

如果用户输入一个更大的数字，如144，当用户输入最后一个4时，在输入框中显示27。但对于前缀为27的数字，如271、2700等，不改变输入框中的显示值。有没有人知道为什么，有办法让它正确显示?

请注意，对于所有较大的数字，变量age被正确地设置为27。只是对于前缀为27的数字，输入框显示不会改变。

Codepen链接:https://codepen.io/baggasumit/pen/MWVgaqZ

@Component({
selector: 'my-app',
template: `
<h1>ngModel Example</h1>
<label>Age </label>
<input type="number" max="27" [ngModel]="age" (ngModelChange)=onAgeChange($event) />
<br>
<br>
<div>Age is set to {{age}}</div>
`
})
class AppComponent {
public age;

public onAgeChange(newAge) {
if (newAge > 27) {
this.age = 27;
} else {
this.age = newAge;
}
console.log(this.age);
}
}

Answer 1

您还需要更新html元素输入的#myInput值。

const { Component, VERSION } = ng.core;
@Component({
selector: 'my-app',
template: `
<h1>ngModel Example</h1>
<label>Age </label>
<input type="number" #myInput [(ngModel)]="age" (ngModelChange)=onAgeChange(myInput) />
<br>
<br>
<div>Age is set to {{age}}</div>
`
})
class AppComponent {
public age;

public onAgeChange(myInput) {
if (this.age > 27) {
this.age = 27;
} 
myInput.value = this.age
console.log(this.age);
}
}

// main.js
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;
const { FormsModule } = ng.forms;
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
class AppModule {}
const { platformBrowserDynamic } = ng.platformBrowserDynamic; 
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));