Typescript + Html: How To Force Uppercase In An Input Field

I'm working with angular (typescript) and I have a modelform in html where the user has to insert a code field and a description field. The code field must always be entered by the

Solution 1:

You can simply add oninput="this.value = this.value.toUpperCase()" in your <input> tag and it will instantly convert any input in your input field to Uppercase.

Solution 2:

If you're working with ngModel, you can use ngModelChange to do it this way with JavaScript's .ToUpperCase().

<input [ngModel]="person.Name" (ngModelChange)="person.Name = $event.toUpperCase()">

Solution 3:

Based on @Ali Heikal answer it should be:

<input #code formControlName="code" (input)="code.value = code.value.toUpperCase()"type="text">

Or use .toLocaleUpperCase() if necessary.

Solution 4:

You can use a pattern attribute to limit the allowed input. You may also want to assist the user by upper-casing their input.

<inputtype="text"pattern="[A-Z]*"name="example" />

Solution 5:

This worked for me. I just used keyup and whenever a user adds a character it automatically converts it to Uppercase, not just in the UI but in the model as well.

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