У меня есть случай в приложении Angular, где мне нужно принять значение десятичного числа в элементе управления.Проблема в том, что он должен принять число с запятой или точкой (как знак десятичной точки), а затем преобразовать его в правильный формат (скажем, ххх ххх ххх, уу).Это ДОЛЖНО быть реактивное решение формы.До сих пор я выполнял указанную ниже директиву, она прекрасно работает, но мне нужно преобразовать записанное значение в соответствующий формат и затем передать его в свойство связанного formControl.Теперь это не затрагивается, когда я набираю 1023.20 и 1023,20, преобразования не происходит, и я не могу использовать значение в математических операциях (они показывают мне значение NaN).Есть ли способ добиться такого поведения в реактивных формах углов?
import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { Logger } from '@app/core';
import { NgControl } from '@angular/forms';
const log = new Logger("DecimalNumberFormatterDirective");
@Directive({
selector: '[decimalNumberFormatter]',
providers: [DecimalPipe]
})
export class DecimalNumberFormatterDirective implements OnInit {
private el: HTMLInputElement;
private _format: string = "1.2-2";
private _locale: string = "somelocale";
constructor(private elementRef: ElementRef, private decimalPipe: DecimalPipe, private control: NgControl) {
this.el = elementRef.nativeElement;
}
ngOnInit(): void {
this.el.value = this.transformValue(this.el.value);
}
@HostListener("change", ["$event", "$event.target.value"])
onBlur(event: any, value: any) {
log.debug(value);
let str = this.parseNumber(value);
this.el.value = this.transformValue(str);
}
transformValue(value: any): string {
let currency = this.decimalPipe.transform(value, this._format, this._locale);
return currency.trim();
}
parseNumber(str: string): number {
return parseFloat(str.replace(" ", "").replace(",", "."))
}
}