Angular小数位数限制指令问题：表单提交时值多一位字符

你的问题出在事件监听时机不对和未同步Angular表单模型两个核心点上：

1. 仅监听keydown事件无法覆盖所有输入场景（比如粘贴、输入法候选词确认等），且setTimeout的异步回滚会导致Angular表单模型（ngModel）已捕获错误值——即便输入框显示回滚了，提交时模型里仍是多一位的错误值。
2. 直接修改nativeElement.value不会触发Angular变更检测，视图与模型不同步，最终提交时取的是模型里的错误值。

修正后的指令代码 #

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
    selector: '[restrictedDecimals]'
})
export class InstrumentDecimalsDirective implements OnInit {
    @Input() decimals = 0;
    @Input() separator = '.';
    private decimalRegex!: RegExp;

    constructor(
        private readonly el: ElementRef<HTMLInputElement>,
        private readonly control: NgControl // 注入NgControl同步表单模型
    ) {}

    ngOnInit() {
        // 提前初始化正则，避免重复创建与转义错误
        if (this.decimals <= 0) {
            this.decimalRegex = /^\d*$/;
        } else {
            const escapedSeparator = this.separator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            this.decimalRegex = new RegExp(`^\\s*\\d*(?:${escapedSeparator}\\d{0,${this.decimals}})?\\s*$`);
        }
    }

    @HostListener('input')
    onInput() {
        const inputValue = this.el.nativeElement.value.trim();
        let validValue = inputValue;

        // 过滤非法内容，直接保留合法部分
        if (inputValue && !this.decimalRegex.test(inputValue)) {
            if (this.decimals > 0 && inputValue.includes(this.separator)) {
                const [integerPart, decimalPart] = inputValue.split(this.separator);
                validValue = `${integerPart}${this.separator}${decimalPart.slice(0, this.decimals)}`;
            } else {
                validValue = inputValue.replace(/\D/g, '');
            }
        }

        // 同步视图与表单模型，确保提交值一致
        this.el.nativeElement.value = validValue;
        if (this.control.control) {
            this.control.control.setValue(validValue, { emitEvent: false });
        }
    }

    // 辅助：阻止无效按键，提升输入体验
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
        const key = event.key;

        if (allowedKeys.includes(key) || /\d/.test(key) || (key === this.separator && !this.el.nativeElement.value.includes(this.separator))) {
            return;
        }
        event.preventDefault();
    }
}

关键改进点 #

• 改用input事件：覆盖所有输入场景，实时过滤值，避免异步回滚的延迟问题。
• 注入NgControl同步模型：修改输入值后同步更新表单控件模型，确保视图与模型完全一致。
• 优化正则逻辑：提前初始化正则，避免动态拼接的性能问题与转义错误，匹配规则更精准。
• 主动过滤非法内容：直接截取合法部分，比回滚旧值的用户体验更流畅。

使用注意事项 #

• 确保指令所在输入框绑定了ngModel或formControl，否则NgControl注入会报错。
• 如需支持负数，可在正则与按键拦截逻辑中添加负号判断。

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