Each letter should be automatically converted to uppercase.

#1 · April 5, 2018, 4:50 pm

Hi,

I have the following input in my form.

<mat-form-field [floatLabel]="floatLabels" fxFlex>
    <mat-label>{{'countries.CountryFlag' | translate}}</mat-label>
    <input matInput formControlName="countryFlag" [readonly]="!isEditMode" autofocus type="text" [textMask]="{mask: lkzMask}" />
    <mat-error *ngIf="countryFlag.hasError('required')">{{'countries.errors.CountryFlagRequired' | translate}}</mat-error>
</mat-form-field>

I'd like to automatically convert characters to uppercase as you type. How can I solve this problem?

#2 · April 6, 2018, 6:58 am

There are different possibilities, either you use CSS, either Bootstrap, either a directive/pipe to transform you text depending on the use case.

There are many examples to find on Google/Stackoverflow/Medium for what you want to achieve.

But the thing would be to transform the text in uppercase server side if you want it to be saved in uppercase. A client can always change settings.

Very simple if that would fit your needs:

IMPORTANT!

This forum is now archived. Click here for the New Support Forum