首页 文章

angular 2如何在串行化为JSON时保持正确的表单输入类型

提问于
浏览 次
0

我正在构建动态表单，如this .

我添加另一个 TextboxQuestion ，它需要一个数字输入 . 在提交时，将表单值转换为json为 JSON.stringify(this.form.value) （如在 dynamic-form.component.ts ：onSubmit中）时，数值将被字符串化为字符串 .

我的意思是：

而不是这个（JSON）：

{
  "mynumber" : 0
}

我懂了：

{
  "mynumber" : "0"
}

为了解决这个问题，__52621_我已经将控件放在一个循环中，该循环检查每个表单元素，如果其类型是这样，则将其值转换为整数 .

另一种解决方案是创建具有适当类型的ng模型，但由于表单是动态的，我无法为每种可能的表单创建接口/类 .

我敢打赌，使用JSON.stringify时，有更简单的解决方案来保持正确的类型 .

javascript angular typescript

1 回答

  • 1

    这里的问题是输入的表单控件类型被定义为字符串，即使输入的类型为number . 要更新它，请确保为数字组件定义新的 controlType .

    例如，您的 NumberQuestion 组件应类似于：

    export class NumberQuestion extends QuestionBase<string> {
  controlType = 'number';
  type: number;
}

    定义 controlType 后，请确保在 dynamic-form-question.component.html 模板下的switch语句中添加新选项：

    <input *ngSwitchCase="'number'" [formControlName]="question.key"
        [id]="question.key" type="number">

    现在，表单的最终输出应类似于：

    {"firstName":"Name","emailAddress":"Email","brave":"good","number":10}

    这是一个工作示例link .

    回复于

相关问题