如何在mat-form中将输入值转为小写？表单提交值异常排查

你遇到的问题本质是Angular Reactive Forms的模型驱动特性导致的：当你用formControlName绑定表单控件时，Angular会维护一个独立的表单模型（也就是FormControl实例），DOM输入框的显示值和模型值是单向绑定关系。你通过oninput="this.value = this.value.toLowerCase()"只是修改了DOM输入框的显示内容，但并没有同步更新到FormControl的实际值里——提交表单时，你获取的是模型里的原始输入值，所以才会出现“控制台看到DOM值是小写，但提交变回原始输入”的情况。

下面提供两种常用的靠谱方案，你可以根据需求选择：

方案一：通过valueChanges实时同步模型值（推荐） #

利用FormControl的valueChanges observable监听输入变化，在回调里将值转为小写后更新模型，同时避免循环触发：

ngOnInit(): void {
  this.generalInfoForm = new FormGroup({
    hiveTable: new FormControl('', [Validators.required]),
  });

  // 监听hiveTable字段的变化
  const hiveTableControl = this.generalInfoForm.get('hiveTable');
  hiveTableControl?.valueChanges.subscribe((value) => {
    // 只有当当前值不是小写时才更新，避免循环触发
    if (value && value !== value.toLowerCase()) {
      // 使用setValue时设置emitEvent: false，防止再次触发valueChanges
      hiveTableControl.setValue(value.toLowerCase(), { emitEvent: false });
    }
  });
}

这种方式既能让用户实时看到小写的输入，又能保证模型值始终是小写，提交时直接取模型值即可。

方案二：提交前统一转换模型值 #

如果你不需要实时让用户看到小写，只需要提交时转小写，可以在提交方法里手动处理：

onSubmit(): void {
  if (this.generalInfoForm.valid) {
    // 复制表单值并转换hiveTable为小写
    const submitData = {
      ...this.generalInfoForm.value,
      hiveTable: this.generalInfoForm.value.hiveTable.toLowerCase()
    };
    // 这里提交submitData即可
    console.log('提交数据:', submitData);
  }
}

为什么不推荐直接修改DOM？ #

Angular的Reactive Forms设计核心是模型驱动，所有表单操作都应该围绕FormControl/FormGroup进行，直接修改DOM会打破模型和视图的一致性，容易出现各种难以排查的同步问题，所以不建议用oninput这种原生DOM操作的方式。

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