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.