In order to uppercase the textual input in a form's field, I have following code:

<ion-item>
  <ion-input label="Registration number *" labelPlacement="stacked" formControlName="carRegNr" type="text" autocapitalize="characters" placeholder="Registration number" clearInput="true" oninput="this.value = this.value.toUpperCase()">
  </ion-input>
</ion-item>

Problem now is that the last character of the input does not get capitalized. I.e. when I have a reference to the field value, it is shown as e.g. "CAR-REGi"

<span *ngIf="taskForm.value.carRegNr" class="form-header-label-text">{{taskForm.value.carRegNr}}</span>

Also when sending the value to the back-end, "CAR-REGi" is saved.

Am I overlooking something? How can I make sure the full string is uppercased?

In order to uppercase the textual input in a form's field, I have following code:

<ion-item>
  <ion-input label="Registration number *" labelPlacement="stacked" formControlName="carRegNr" type="text" autocapitalize="characters" placeholder="Registration number" clearInput="true" oninput="this.value = this.value.toUpperCase()">
  </ion-input>
</ion-item>

Problem now is that the last character of the input does not get capitalized. I.e. when I have a reference to the field value, it is shown as e.g. "CAR-REGi"

<span *ngIf="taskForm.value.carRegNr" class="form-header-label-text">{{taskForm.value.carRegNr}}</span>

Also when sending the value to the back-end, "CAR-REGi" is saved.

Am I overlooking something? How can I make sure the full string is uppercased?

• angular
• ionic-framework
• input

• do you need the database saved value to be uppercase? – Naren Murali Commented Nov 20, 2024 at 11:17

1 Answer 1

You should ensure you use (input) instead of onInput, the former is the angular way of event binding, the latter is javascript way.

<ion-item>
  <ion-input label="Registration number *" labelPlacement="stacked" formControlName="carRegNr" type="text" autocapitalize="characters" placeholder="Registration number" clearInput="true" (input)="this.value = this.value.toUpperCase()">
  </ion-input>
</ion-item>

Also you should use formControlName to store the value of the latest data. Then you can rewrite your code to.

HTML:

<ion-item>
  <ion-input label="Registration number *" labelPlacement="stacked" formControlName="carRegNr" type="text" autocapitalize="characters" placeholder="Registration number" clearInput="true" (input)="onInput()">
  </ion-input>
</ion-item>

<span *ngIf="taskForm.value.carRegNr" class="form-header-label-text">{{taskForm.value.carRegNr | uppercase}}</span>

Now update on the TS to uppercase, if you do not want the uppercase in the database then go for uppercase pipe.

onInput() {
  const ctrl = this.form.get('carRegNr');
  ctrl.patchValue(ctrl.value ? ctrl.value.toUpperCase() : ctrl.value);
}