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

I like use <input style="text-transform:uppercase"> and in submit trasnform the variable. Another way you must take account if you type in middle of the input — Eliseo
– Eliseo, Commented Apr 8, 2019 at 19:24

Naga Sai A · Accepted Answer · 2019-04-08 18:12:24Z

2

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

answered Apr 8, 2019 at 18:12

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Eliseo Over a year ago

the problem with your code is when you try to keyup in middle of the input

Naga Sai A Over a year ago

@Eliseo, that scenario is not possible as per SO question , as maxlength is only two

Eliseo Over a year ago

::glups:: I dont see this detail

Naga Sai A Over a year ago

@Eliseo, i just tried to keyup in the middle of input , it works as expected - codesandbox.io/s/0pwrknw97l .. This works in that scenario because I am changing complete input value to uppercase not based on location :)

Eliseo Over a year ago

when I type "abde", and I put the cursor between b and d and type c (to form "abcde", the cursor goes to the end of the input. Therefore, if you write in the html {{state.value}}, you can see that the value is not to upper. If you put maxlength="2" and type ab, go yo the first, remove the "a" and type C, the cursor goes to the end too

|

imanshu15 · Accepted Answer · 2019-04-08 18:11:29Z

1

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

answered Apr 8, 2019 at 18:11

imanshu15

7644 silver badges24 bronze badges

Collectives™ on Stack Overflow

Reactive forms Angular format input data

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related