如何在 Angular 中停止 keyup 事件的传播？答案

【问题标题】：How to stop the propagation of keyup events in Angular?如何在 Angular 中停止 keyup 事件的传播？
【发布时间】：2021-07-10 13:01:07
【问题描述】：

我正在尝试创建一个只包含数字并允许小数点后两位数的输入字段。我想在小数点后 2 位后停止用户输入。这样无论用户输入什么，都不会输入该值。我正在使用keyup 事件，因为keypress 实际上取值较晚，因此会产生检查问题。在我使用的 HTML 中：

<input
formControlName="WorkhoursPerWeek"    
class="mon-input-num"
(keyup)="validateNumber($event)"                                   
 />

在 Typescript 中，函数如下：

validateNumber(event: Event): Boolean {
    const DECIMAL_PLACES_REGEX = /^\d*\.?\d{0,2}$/;
    if (!DECIMAL_PLACES_REGEX.test(event.target["value"])) {
        return false;
    } else {
        return true;
    }
}

我尝试使用event.stopPropagation() 和event.preventDefault() 在keyup 函数上输入用户。关于如何停止用户字段输入的任何想法？

【问题讨论】：

标签： javascript angular dom-events

【解决方案1】：

正如你所说，你的支票太迟了。

解决这个问题的最简单方法如下：

注意：WorkhoursPerWeek 应该真的是驼峰式的 workhoursPerWeek

validateNumber(event: Event): Boolean {
    const DECIMAL_PLACES_REGEX = /^\d*\.?\d{0,2}$/;
    if (!DECIMAL_PLACES_REGEX.test(event.target["value"])) {
        let myValue = this.form.controls.WorkhoursPerWeek.value;
        myValue = myValue.substring(0, myValue.length-1);
        this.form.controls.WorkhoursPerWeek.setValue(myValue);
    }
}

【讨论】：