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?
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.
<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);
}