CODEWITHSUNDEEP
angulartypescript
Aymen Kanzari
Aymen Kanzari

Reputation: 2023

Angular - convert to lowercase in an input field

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());
}

Upvotes: 3

Views: 8682

Answers (4)

ilham doang
ilham doang

Reputation: 109

this function in angular 6 for underscore and lowercase: 

 underscore(selectkpi){
    this.selectedUnderKpi = selectkpi.replace(' ', '_').toLowerCase();
    var a = this.selectedUnderKpi
    console.log("ini = ",a);
  }

Upvotes: 0

YaakovHatam
YaakovHatam

Reputation: 2344

You can achieve what you want without event:

In your css add

input[type="text"] { text-transform: lowercase; }

and in .ts file use this.cmOrganizationForm.get('mail').toLowerCase();

Upvotes: 3

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

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});
  })
}

Upvotes: 8

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

we need to remove modelChange event emitter that should be used in Template Driven Form 'ngModel'.

Template:

<input type="text" formControlName="mail">

Component:

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

StackBlitz: https://stackblitz.com/edit/angular-wp4tim?file=src%2Fapp%2Fapp.component.ts

Upvotes: 1

Related Questions