Angular: How to force uppercase in an input field

Question

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 user, always in uppercase.

I found and followed this question: How to convert input value to uppercase in angular 2 (value passing to ngControl)

but the last letter that the user inserts remains lowercase however .. The fundamental thing is that the database always comes in all uppercase (I also put a limit of 4 characters that works properly) this is my code now, but as written above it does not work properly:

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

has anyone found a quick, functional and fast solution?

thank you!

Answer 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.

Answer 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()">

Answer 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.

Answer 4

You could create an Angular Directive which transforms all user input to uppercase.

The Directive extends DefaultValueAccessor:

@Directive({
  selector: 'input[toUppercase]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => UpperCaseInputDirective),
    },
  ],
})
export class UpperCaseInputDirective extends DefaultValueAccessor {
  @HostListener('input', ['$event']) input($event: InputEvent) {
    const target = $event.target as HTMLInputElement;
    const start = target.selectionStart;

    target.value = target.value.toUpperCase();
    target.setSelectionRange(start, start);

    this.onChange(target.value);
  }

  constructor(renderer: Renderer2, elementRef: ElementRef) {
    super(renderer, elementRef, false);
  }
}

Use the Directive like this on the input:

<input name="myTdfInput" type="text" [(ngModel)]="value" toUppercase>

The solution works in both Reactive Forms and Template Driven Forms.

See working demo on Stackblitz: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers-czivy3?file=src/app/to-uppercase.directive.ts

Credits for the solution go to: https://twitter.com/BartBurgov (See his tweet here: https://twitter.com/BartBurgov/status/1582394428748009477?s=20&t=RiefRcZ1B8IF42wp2rWzaQ)

Answer 5

A bit late, but I'm surprised to don't see the css alternative.

Add on the input field:

.input-upper{
    text-transform: uppercase;
}

Answer 6

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()})"

Answer 7

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

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