Сделать только два десятичных после запятой (угловой)

Question

У меня есть директива для ввода текста, которая заменяет текстовые символы и позволяет вводить только десятичные числа.

Вот код этой директивы

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 -число десятичных символов.Мне нужно только два.Как я могу это сделать?

Answer 1

Так, чтобы показывать десятичные разряды и не разрешать символы, мне нужно написать директиву, подобную этой

    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();
        }
    }
}

Answer 2

В вашем шаблоне [^0-9].[^0-9] вы заменяете 3 символа пустой строкой. Вы сопоставляете не цифру, а любой символ, кроме новой строки, используя точку, и снова не цифру, используя отрицательный класс символов [^

Если вы хотите удалить все символы, кроме цифр и точек, вы все еще не уверены, что формат правильный, потому что тогда ... также может быть действительным.

Вместо замены попробуйте сопоставить значение с двумя десятичными знаками после точки.

^[0-9]+\.[0-9]{2}$

Если вы разрешите начать с точки, вы можете использовать * вместо +:

^[0-9]*\.[0-9]{2}$

Пример использования test :

let pattern = /^[0-9]+\.[0-9]{2}$/;
["2.22", "....", "1", "3.299"].forEach(s => console.log(s + ": " + pattern.test(s)));

Или используя match :

let pattern = /^[0-9]+\.[0-9]{2}$/;
["2.22", "....", "1", "3.299"].forEach(s => {
  let res = s.match(pattern);
  console.log((null === res ? "No match: " : "Match: ") + s)
});