javascript - Angular 2在字符串化为JSON时如何保持表单输入的正确类型

Question

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

我添加了另一个需要数字输入的TextboxQuestion。提交时，当将表单值转换为 JSON 作为 JSON.stringify(this.form.value) (如 dynamic-form.component.ts : onSubmit)时，数值被字符串化为字符串。

我的意思是:

而不是这个(JSON):

{
  "mynumber" : 0
}

我得到了这个:

{
  "mynumber" : "0"
}

为了解决这个问题，onSubmit()我将控制放在一个循环中，该循环检查每个表单元素，如果其类型是整数，则将其值转换为整数。

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

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

Answer 1

这里的问题是，即使输入是数字类型，输入的表单控件类型也被定义为字符串。要更新此内容，请确保为数字组件定义新的 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一个工作示例。