How to convert a comma to dot automatically?

Issue

When the user enters a comma in the INPUT, I would like the comma to be automatically transformed in a dot. Is it possible?

<label>Number </label>
<input type="number" maxlength="5" />

Here is a reproduction -> Link

Solution

You can make something like this old SO about mask

Create a directive

@Directive({
  selector: '[notdot]'
})
export class NotDotDirective {

  constructor(@Optional() @Host()private control:NgControl) {}
  @HostListener('input', ['$event'])
  change($event) {

    const item = $event.target
    const value = item.value;
    const pos = item.selectionStart; //get the position of the cursor

    const matchValue = value.replace(/,/g, '.')
    if (matchValue!=value)
    {
      if (this.control)
        this.control.control.setValue(matchValue, { emit: false });

      item.value = matchValue;
      item.selectionStart = item.selectionEnd = pos; //recover the position
    }
  }
}

And use like

<input notdot maxlength="5"/>

NOTE You can use also with template driven forms or with ReactiveForms

<input notdot [(ngModel)]="variable" maxlength="5"/>

<input notdot [formControl]="control" maxlength="5"/>

You can see in this stackblitz

Answered By - Eliseo