Ionic ion-input type="numeric"在iOS下输入逗号为何导致form.value为null？

问题核心 #

Angular响应式表单默认仅识别.作为小数点分隔符，当iOS系统数字格式设为1.234.567,89（逗号为小数点）时，输入的逗号无法被表单数字控件解析，导致form.value返回null；而格式设为1,234,567.89时可正常工作，需兼容两种场景。

解决方案 #

方案1：监听输入事件转换分隔符（快速实现） #

直接在ion-input上绑定输入事件，手动处理逗号与点的转换，确保表单能正确识别值：

模板代码：

<ion-input 
  type="numeric" 
  inputmode="decimal" 
  [formControl]="amountControl"
  (input)="convertDecimalSeparator($event)"
></ion-input>

组件逻辑：

import { FormControl } from '@angular/forms';

amountControl = new FormControl('');

convertDecimalSeparator(event: Event): void {
  const input = event.target as HTMLIonInputElement;
  let value = input.value || '';

  // 过滤非数字、非分隔符的字符
  value = value.replace(/[^0-9.,]/g, '');

  // 处理逗号作为小数点的情况
  if (value.includes(',')) {
    // 若同时存在点（千分位），先移除点再将逗号转为点
    if (value.includes('.')) {
      value = value.replace(/\./g, '').replace(',', '.');
    } else {
      // 仅存在逗号，直接转为点
      value = value.replace(',', '.');
    }
  }

  // 更新表单值，关闭事件触发避免循环
  this.amountControl.setValue(value, { emitEvent: false });
}

方案2：自定义数字输入组件（全局复用） #

如果多个页面需要兼容该场景，可封装自定义表单组件，实现ControlValueAccessor统一处理：

1. 创建app-numeric-input组件：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-numeric-input',
  template: `
    <ion-input 
      type="numeric" 
      inputmode="decimal" 
      [value]="currentValue"
      (input)="onInputChange($event)"
      (blur)="onTouched()"
    ></ion-input>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumericInputComponent),
      multi: true
    }
  ]
})
export class NumericInputComponent implements ControlValueAccessor {
  currentValue = '';
  private onChangeFn: (value: string) => void = () => {};
  private onTouchedFn: () => void = () => {};

  writeValue(value: string): void {
    this.currentValue = value || '';
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChangeFn = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouchedFn = fn;
  }

  onInputChange(event: Event): void {
    const input = event.target as HTMLIonInputElement;
    let value = input.value || '';

    // 分隔符转换逻辑同方案1
    value = value.replace(/[^0-9.,]/g, '');
    if (value.includes(',')) {
      value = value.includes('.') 
        ? value.replace(/\./g, '').replace(',', '.') 
        : value.replace(',', '.');
    }

    this.currentValue = value;
    this.onChangeFn(value);
  }

  onTouched(): void {
    this.onTouchedFn();
  }
}

2. 在页面中使用自定义组件：

<app-numeric-input [formControl]="amountControl"></app-numeric-input>

方案3：适配系统区域设置（更贴合原生体验） #

通过Angular的LOCALE_ID配置，结合系统区域自动识别小数点分隔符：

1. 导入并注册区域数据：

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';
import localeDe from '@angular/common/locales/de'; // 示例：德语区域用逗号做小数点

registerLocaleData(localeEn);
registerLocaleData(localeDe);

2. 动态获取系统区域并设置LOCALE_ID：

import { Device } from '@capacitor/device';

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: LOCALE_ID,
      useFactory: async () => {
        const langInfo = await Device.getLanguageCode();
        // 根据系统语言返回对应区域标识，如"de-DE"、"en-US"
        return langInfo.value || 'en-US';
      }
    }
  ]
})
export class AppModule {}

该方案需配合DecimalPipe处理值的显示，确保输入与显示的格式匹配，避免用户混淆。

额外提示 #

• 测试时切换iOS「设置-通用-语言与地区-数字格式」验证两种场景
• 提交数据时可将表单的字符串值转为数值类型：Number(this.amountControl.value)
• 保留type="numeric"与inputmode="decimal"，确保弹出数字键盘的原生体验

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