Question

我试图在Angular中实现时间选择器，而且我在查找如何检查文本输入是否有效方面遇到了一些麻烦。在html中，我有一个绑定到keyPress函数的输入元素。

<input matInput style="text-align: right;" [(ngModel)]="hour" type="number" min="0" max="23" (keypress)="keyPress($event)">

keyPress(event: any) {
    const pattern = /^(([[0|1]\d)|(2[0-3]))$/;
    let inputChar = String.fromCharCode(event.charCode);
    let tempHour = this.hour;
    if (!tempHour) {
        tempHour = '0';
    }
    let newHour = (+tempHour * 10 + +inputChar).toString();
    if (newHour.length === 1) {
        newHour = '0' + newHour;
    }

    if (!pattern.test(newHour)) {
        event.preventDefault();
    }
}

这里的问题是传递给keyPress函数的事件只包含当前按下的键。除非用户移动输入光标，否则此工作正常。例如：如果用户按下键＆＃34; 1＆＃34;，然后向后移动光标并输入＆＃34; 9＆＃34;。我的代码将它视为19并让它通过，但实际输入是91.所以我想我需要一些如何获得光标位置？或者有更好的方法来解决这个问题吗？非常感谢！

Answer 1

问题是按键事件发生在ngModel更新你的＆＃34;小时＆＃34;变量。在您的情况下，我建议对ngModel已经完成更新后触发的更改事件做出反应。

(change)="onChange($event)"

然后你的方法看起来像这样

<input matInput style="text-align: right;" [(ngModel)]="hour" type="number" min="0" max="23" (change)="onChange($event)">

private lastValue: number = 0;

onChange(event: any) {
    const pattern = /^(([[0|1]\d)|(2[0-3]))$/;

    if (!pattern.test(this.hour)) {
        this.hour = this.lastValue;
    } else {
       this.lastValue = this.hour;
    }    
}

在更新之前检查html输入

1 个答案: