Angular timepicker绑定keyup事件截取大于12的输入值不生效问题

问题根因 #

你当前逻辑存在两个核心问题：

• 仅修改了方法内的局部变量selectedNumber，没有将处理后的值回写到输入框，也没有同步更新双向绑定的selectedTime变量，因此界面不会生效
• [(ngModel)]绑定的selectedTime本身是Date类型，无法直接执行字符串的slice方法，需要先提取时间分量再做修改

修复方案（适配你现有写法） #

直接修改事件对应的输入框值，同时同步更新绑定的Date对象即可：

public preventNum(e: KeyboardEvent){ 
    const inputEl = e.target as HTMLInputElement;
    const inputVal = inputEl.value.trim();
    const numVal = parseInt(inputVal, 10);
    // 排除非数字和不大于12的场景
    if (isNaN(numVal) || numVal <=12) {
        console.log('else');
        return;
    }
    // 截取第一位
    const processedVal = inputVal.slice(0, 1);
    // 回写到输入框
    inputEl.value = processedVal;
    // 同步更新绑定的Date对象，此处以修改小时为例
    if (this.selectedTime) {
        this.selectedTime.setHours(parseInt(processedVal, 10));
        // 手动触发对象变更，让ngModel感知到更新
        this.selectedTime = new Date(this.selectedTime);
    }
}

模板部分不需要修改，保持原有绑定即可。

更稳妥的替代方案 #

如果你使用的是主流的Angular时间选择器组件，本身自带范围限制能力，不需要自行写截取逻辑：
以常用的ngx-bootstrap timepicker为例，只需给组件设置最大时间限制即可自动拦截大于12的输入：

// 组件类中定义最大时间为12点59分
public maxTime = new Date();
ngOnInit() {
    this.maxTime.setHours(12,59,0);
}

<timepicker  
    [(ngModel)]="selectedTime"  
    [max]="maxTime"
>

内容的提问来源于stack exchange，提问作者fipodas