在我的專案中，我有一個input type="number"用戶應該輸入一個介于 1（總是）和另一個數字之間的數字。我想限制 UI 輸入元素，這樣只能輸入該范圍內的數字。到目前為止我的代碼：
.html：
<p>Allowed values are 1 - {{max}}</p>
<input type="number" (input)="input($event)" />
.ts：
export class AppComponent {
readonly max = 5;
input(event: Event) {
const inputElem = event.target as HTMLInputElement;
if ( inputElem.value < 1) {
inputElem.value = '1';
} else if ( inputElem.value > this.max) {
inputElem.value = this.max.toString();
}
}
}
在這里堆疊閃電戰
代碼按我的意愿作業，但我想知道是否有一種 Angular 方式來做到這一點，使用[(ngModel)]or[ngModel]和(ngModelChange)。我嘗試了一些東西，但沒有成功。
uj5u.com熱心網友回復：
你可以結合(input)使用[(ngmode)]類似↓
<input (input)="KeyPress($event)" [(ngModel)]="value" />
上 ↓
KeyPress(event: any) {
console.log(this.value);
let newValue = event.target.value;
let regExp = new RegExp('^[1-5] $');
if (!regExp.test(newValue)) {
event.target.value = newValue.slice(0, -1);
}
}
這里的樣本
欲了解更多解釋，你可以檢查↓
(change) vs (ngModelChange) 角度
Angular（更改）事件不會觸發所有更改
uj5u.com熱心網友回復：
它與另一個 SO非常相似
readonly max = 5;
mynumber = 2;
validateInput(e: any, input: any = null) {
let value = e;
if (value < 1) value = 1;
if (value > this.max) value = this.max;
this.mynumber = value;
if (input.value != value) {
const start = input.selectionStart ? input.selectionStart - 1 : -1;
input.value = value;
if (start>=0) input.selectionStart = input.selectionEnd = start;
}
}
<input type="number" #input [ngModel]="mynumber"
(ngModelChange)="validateInput($event,input)" />
見堆疊閃電戰
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334773.html