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

why don't you just use CSS to do the job?

 .uppercase{ text-transform: uppercase; }

 <input class="uppercase" type="text" placeholder="type here">

Answer 2

You can try this:

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

Answer 3

I know this is reeeeally late, but...

You could hook on to the (change) event instead of the (input) event. Your case changes won't execute until after the user leaves the field, but it will prevent the cursor from jumping.

You case changes will still execute if the user submits the form by pressing Enter while in the field.