Ionic Angular：表单字段值最后一个字符无法转大写

问题场景 #

你使用Ionic的ion-input实现表单字段自动转大写，代码如下：

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

但遇到问题：输入值的最后一个字符无法转为大写（例如显示为CAR-REGi），且这个半大写的值会被发送到后端保存，展示代码为：

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

原因分析 #

原生oninput事件的触发时机和Angular表单控件的value同步逻辑存在差异：当输入最后一个字符时，oninput的转换操作可能还未完成，Angular就已经将未转换的值同步到了表单控件中，导致最后一个字符未被转换。另外，autocapitalize="characters"只是提示软键盘自动大写，无法强制保证输入内容一定为大写。

解决方案 #

推荐以下几种可靠的实现方式：

方式1：监听表单控件的valueChanges（最推荐） #

直接通过Angular表单的valueChanges监听值变化，转换后更新表单控件，确保值完全同步：

// 在组件初始化表单后添加监听
ngOnInit() {
  // 假设taskForm是已初始化的FormGroup
  this.taskForm.get('carRegNr')?.valueChanges.subscribe(value => {
    if (value) {
      const upperValue = value.toUpperCase();
      // 设置emitEvent: false避免循环触发监听
      this.taskForm.get('carRegNr')?.patchValue(upperValue, { emitEvent: false });
    }
  });
}

模板中可以去掉原生oninput属性：

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

方式2：使用Ionic的ionInput事件 #

利用Ionic封装的ionInput事件（比原生oninput更适配Ionic组件），在事件触发时转换值并同步表单：

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

组件中实现事件处理方法：

handleCarRegInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  if (inputElement.value) {
    const upperValue = inputElement.value.toUpperCase();
    inputElement.value = upperValue;
    // 同步更新表单控件的值
    this.taskForm.get('carRegNr')?.setValue(upperValue);
  }
}

方式3：提交时统一转换（兜底方案） #

如果不需要实时显示大写，可以在表单提交时统一转换值，作为兜底：

onSubmit() {
  if (this.taskForm.valid) {
    const submitData = { ...this.taskForm.value };
    // 转换车牌号为大写
    if (submitData.carRegNr) {
      submitData.carRegNr = submitData.carRegNr.toUpperCase();
    }
    // 发送submitData到后端
  }
}

内容的提问来源于stack exchange，提问作者NorthFred