首页 > 解决方案 > 点后仅保留两位小数(角度)

问题描述

我有一个文本输入指令,它替换文本符号并只允许输入十进制数字。

这是该指令的代码

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

@Directive({
    exportAs: 'decimal-number-directive',
    selector: 'decimal-number-directive, [decimal-number-directive]'
})
export class DecimalNumberDirective {
    private el: NgControl;
    constructor(ngControl: NgControl) {
        this.el = ngControl;
    }
    // Listen for the input event to also handle copy and paste.
    @HostListener('input', ['$event.target.value'])
    onInput(value: string) {
        // Use NgControl patchValue to prevent the issue on validation
        this.el.control.patchValue(value.replace(/[^0-9].[^0-9]/, ''));
    }
}

现在我可以写 n 个十进制符号了。我只需要两个。我怎么能做到这一点?

标签: javascriptregexangulartypescript

解决方案


所以为了显示小数位并且不允许符号我需要写这样的指令

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

@Directive({
    exportAs: 'decimal-number-directive',
    selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
    private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
    private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-'];
    constructor(private el: ElementRef) {}
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        console.log(this.el.nativeElement.value);
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }
        let current: string = this.el.nativeElement.value;
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

推荐阅读