Reactive forms Angular format input data

Question

Hi I am new to Angular Reactive forms and have been working on trying to figure this out.

What I want to do is format the input data to uppercase:/

<input #stateInput matInput type="text" 
formControlName="state" 
[matAutocomplete]="autoState" maxlength="2"
(keyup)="stateInput.value.toUpperCase()" 
required>

I haven't been able to get this to work?

Any help is appreciated

Thanks

Answer 1

To achieve expected result , use below option

Issue: After changing input value to uppercase, it has to be reassigned to show in Input field

 <input type="text" [formControl]="state" #stateInput (keyup)="stateInput.value = stateInput.value.toUpperCase()" /> 

code sandbox for reference - https://codesandbox.io/s/6l9nk4k2zn

Answer 2

you can just simple use below code which will convert input to UpperCase instantly ,

oninput="this.value = this.value.toUpperCase()"

here is an example Example