Angular 2 动态表单提交时如何保持表单输入的正确JSON类型

我之前在做Angular动态表单的时候也碰到过一模一样的问题！手动循环转换虽然能解决，但确实不够优雅，这里给你几个更可维护的方案：

方案一：在表单控件创建时自动转换类型 #

既然你用的是Reactive Forms，完全可以在构建表单组的时候，针对数值类型的TextboxQuestion，通过valueChanges订阅把输入的字符串自动转成数字：

// 在dynamic-form.component.ts的表单构建逻辑中
buildForm() {
  const formGroup = new FormGroup({});
  for (const question of this.questions) {
    const control = new FormControl(question.value || 0, question.validators);
    // 判断是否为数值类型的文本框
    if (question.controlType === 'textbox' && question.type === 'number') {
      control.valueChanges.pipe(
        distinctUntilChanged() // 避免重复转换
      ).subscribe(rawValue => {
        // 处理空值或非数字输入，这里默认转成0，你也可以改成null
        const numericValue = isNaN(Number(rawValue)) ? 0 : Number(rawValue);
        // 用emitEvent: false防止循环触发valueChanges
        control.setValue(numericValue, { emitEvent: false });
      });
    }
    formGroup.addControl(question.key, control);
  }
  this.form = formGroup;
}

这样表单控件的value本身就是数字类型，提交时直接JSON.stringify(this.form.value)就能得到{ "mynumber" : 0 }的结果，不用再额外处理。

方案二：自定义数值输入控件（更适合长期维护） #

如果你的动态表单需要频繁处理数值输入，不如封装一个自定义的数值输入组件，实现ControlValueAccessor接口，从根源上处理类型转换：

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

@Component({
  selector: 'app-numeric-input',
  template: `
    <input 
      type="number" 
      [(ngModel)]="innerValue"
      (blur)="onTouched()"
    />
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumericInputComponent),
      multi: true
    }
  ]
})
export class NumericInputComponent implements ControlValueAccessor {
  innerValue: number = 0;

  onChange: (value: number) => void = () => {};
  onTouched: () => void = () => {};

  writeValue(value: any): void {
    // 从表单接收值时转换为数字
    this.innerValue = isNaN(Number(value)) ? 0 : Number(value);
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  set innerValue(val: number) {
    if (val !== this._innerValue) {
      this._innerValue = val;
      this.onChange(val);
    }
  }

  get innerValue(): number {
    return this._innerValue;
  }

  private _innerValue: number = 0;
}

然后在动态表单的模板中，判断如果是数值类型的TextboxQuestion，就渲染这个自定义组件，而不是普通的input。这样表单绑定的值天然就是数字类型，序列化时完全不用操心。

方案三：提交时递归转换（兼容已有代码） #

如果不想改动表单构建的逻辑，也可以写一个递归函数来批量转换所有可转成数字的字符串，比手动循环单个控件更灵活（尤其适合嵌套表单）：

// 工具函数：递归遍历对象，转换数字字符串为数字类型
convertNumericValues(obj: any): any {
  if (typeof obj === 'string' && !isNaN(Number(obj))) {
    return Number(obj);
  }
  if (Array.isArray(obj)) {
    return obj.map(item => this.convertNumericValues(item));
  }
  if (typeof obj === 'object' && obj !== null) {
    return Object.fromEntries(
      Object.entries(obj).map(([key, value]) => [key, this.convertNumericValues(value)])
    );
  }
  return obj;
}

// 在onSubmit中使用
onSubmit() {
  const processedValue = this.convertNumericValues(this.form.value);
  const jsonString = JSON.stringify(processedValue);
  // 后续提交逻辑...
}

个人更推荐方案一或二，因为从表单控件的层面处理类型转换，更符合Angular Reactive Forms的设计理念，也能避免后续新增数值控件时重复写转换逻辑。

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