Angular - convert to lowercase in an input field

Question

i have an email input, i want when i write in the input uppercase letters it converts them into lowercase letters

i tried this method but it shows me an errer

ERROR RangeError: Maximum call stack size exceeded

<input type="text" formControlName="mail" (ngModelChange)="toLowerCase($event)">

private toLowerCase(event): void {
    this.cmOrganizationForm.get('mail').setValue(event.toLowerCase());
}

Answer 1

Please don't use ngModelChange event when you are using Reactive forms.

---

Listen to valueChanges subscription of your form control and set the value under the subscription, with emitEvent as false, this will not emit valueChanges event again.

Try this out, this will not emit valueChanges event again

private ngOnInit(): {
  this.cmOrganizationForm.get('mail').valueChanges.subscribe((event) => {
     this.cmOrganizationForm.get('mail').setValue(event.toLowerCase(), {emitEvent: false});
  })
}