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());
}
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});
})
}
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();
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
this function in angular 6 for underscore and lowercase:
underscore(selectkpi){
this.selectedUnderKpi = selectkpi.replace(' ', '_').toLowerCase();
var a = this.selectedUnderKpi
console.log("ini = ",a);
}
