How to Ensure Input Fields Display Periods Instead of Commas for Decimal Values in Angular?

How should I make the SIP minimum and SIP maximum input fields display values with periods instead of commas (like 50.00 instead of 50,00), please?`



Directive

@Directive({
selector: '[appCommaToDot]'
})
export class CommaToDotDirective {
constructor(private el: ElementRef) {}

@HostListener('input', ['$event'])
onInputChange(event: Event): void {
const input = this.el.nativeElement;
const value = input.value;

input.value = value.replace(/,/g, '.');
}
}


ts

export class EditPurchasableSecuritiesComponent implements OnInit, OnDestroy {

private unsubscribe$ = new Subject < void > ();

svm: string;
risk: string;
datedeb: Date;
datefin: Date;
min: number;
max: number;
sipminimum: any;
sipmaximum: any;

TIT: Tit[] = [];

constructor(
private service: EditPurchasableSecuritiesService,
private activatedRoute: ActivatedRoute,
private location: Location,
private router: Router,
private decimalPipe: DecimalPipe,

) { }

ngOnInit(): void {
let svm: string | null;
svm = this.activatedRoute.snapshot.paramMap.get('svm');
if (!svm) {
this.goBack();
return;
}
this.svm = svm;
this.editPurchasableSecuritiesManagement(this.svm);
this.datedeb = new Date();

}

ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}

editPurchasableSecuritiesManagement(svm: string): void {
this.service.editPurchasableSecuritiesManagement(this.svm).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {

this.TIT = res.TIT;
this.risk = res.TIT[0].AANBOD.RISK;
this.datedeb = new Date();
this.datefin = new Date(res.TIT[0].AANBOD.DATEVALID_FIN);
this.min = res.TIT[0].AANBOD.QTTE_MIN;
this.max = res.TIT[0].AANBOD.QTTE_MAX;
this.sipminimum = this.decimalPipe.transform(res.TIT[0].AANBOD.SIPMINIMUM, '1.2-2');
this.sipmaximum = this.decimalPipe.transform(res.TIT[0].AANBOD.SIPMAXIMUM, '1.2-2')
}
});
}

goBack(): void {
this.location.back();
}

updatePurchasableSecuritiesManagement(): void {
this.service.updatePurchasableSecuritiesManagement(this.svm, this.risk, this.datedeb, this.datefin, this.min, this.max,
this.sipminimum, this.sipmaximum).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
this.router.navigate(['functional-management/list-purchasable-securities']);
});
}
});
}

onInputChange(event: any, field: 'sipminimum' | 'sipmaximum'): void {
// Récupérer la valeur entrée
let value = event.target.value;

// Conserver uniquement les chiffres et la virgule décimale
value = value.replace(/[^0-9,\.]/g, ''); // Supprimer tout sauf chiffres, point et virgule

// Si un séparateur décimal est utilisé, ne garder que le premier (pas de multiples virgules ou points)
const parts = value.split(/[,.]/); // Diviser en utilisant point ou virgule
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join(''); // Conserver uniquement le premier séparateur
}

// Remplacer la virgule par un point (si nécessaire)
value = value.replace(',', '.'); // Utiliser un point comme séparateur décimal

// Convertir la valeur en nombre
const parsedValue = value ? parseFloat(value) : 0;

// Mettre à jour la variable en fonction du champ
if (field === 'sipmaximum') {
this.sipmaximum = parsedValue;
} else if (field === 'sipminimum') {
this.sipminimum = parsedValue;
}
}


}


template

<tr>
<th>SIP minimum</th>
<td>
<input id="sipminimum" name="sipminimum" type="text" class="form-control" [(ngModel)]="sipminimum" [value]="sipminimum | number:'1.2-2'" (input)="onInputChange($event, 'sipminimum')" style="width: 70%" required appCommaToDot />
</td>
</tr>
<tr>
<th>SIP maximum</th>
<td>
<input id="sipmaximum" name="sipmaximum" type="text" class="form-control" [(ngModel)]="sipmaximum" [value]="sipmaximum | number:'1.2-2'" (input)="onInputChange($event, 'sipmaximum')" style="width: 70%" required appCommaToDot />
</td>
</tr>


Thank you for your help.

Continue reading...