Angular 6 Reactive Form Input Value to UpperCase

Question

I am using Reactive form in Angular 6. For input type text I want it to be uppercase. I tried the solution

(input)="form.patchValue({name: $event.target.value.toUpperCase()})"

The solution works fine, but the only problem when I move cursor to middle and type a character, the cursor moves at the end.

Is there any other approach or any better solution?

Answer 1

You can try this:

const yourControl = this.form.get('yourControlName');
yourControl.valueChanges.subscribe(() => {
  yourControl.patchValue(yourControl.value.toUpperCase(), {emitEvent: false});
});