Decimal Pipe

Ahhoz, hogy ezresenként szóközzel válassza el a számokat, egy egyszerű funkciót hozhat létre a számok formázásához és ezt a funkciót használhatja minden alkalommal, amikor a formAmount értéke változik.

Ezen kívül az Angular-ban is használhatja a DecimalPipe-ot, ami a számok formázására szolgál, és támogatja a különböző lokalizációkat is.

Íme egy példa a DecimalPipe használatával:

1. Először importálja a DecimalPipe-ot:

import { DecimalPipe } from '@angular/common';

2. Adjuk hozzá a DecimalPipe-ot a komponens konstruktorához:

constructor(private decimalPipe: DecimalPipe) { }

3. Hozzon létre egy függvényt a számok formázására:

formatNumber(value: number): string {
  return this.decimalPipe.transform(value, '1.0-0', 'hu-HU')?.replace(/,/g, ' ') || '';
}

Itt a '1.0-0' azt mondja meg, hogy nem jelenítsen meg tizedesjegyeket, és az 'hu-HU' a magyar lokalizációt használja. Az eredményben a vesszők helyett szóközök lesznek, mivel a .replace(/,/g, ' ') kifejezést használtuk.

4. Az amountRange értékváltozásánál frissítse a formAmount értékét a formázott értékkel:

this.form.get('amountRange')?.valueChanges.subscribe((value) => {
  const formattedValue = this.formatNumber(value);
  this.form.get('formAmount')?.setValue(formattedValue, { emitEvent: false });
});

Itt az { emitEvent: false } azt jelenti, hogy a setValue művelet nem fog értékváltozási eseményt kibocsátani, így elkerüli az eseményhurokot.

Ezzel a megoldással, amikor az amountRange csúszka értéke változik, a formAmount input mező értéke formázva lesz ezresenként szóközzel elválasztva.