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

我正在构建动态表单，如中所示

我添加了另一个需要数字输入的

TextboxQuestion

。提交时，当将表单值转换为json时，如

json.stringify（this.form.value）

（如

dynamic form.component.ts

：onSubmit），数值将被字符串化

我的意思是：

而不是这个（JSON）：

我明白了：

{
  "mynumber" : "0"
}

为了解决这个问题，

onSubmit（）

我将控件放在一个循环中，该循环检查每个表单元素，以将其值转换为整数（如果其类型是整数）

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

---

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

这里的问题是，即使输入的类型是number，输入的表单控件类型也被定义为string。要更新此项，请确保为数字组件定义新的

controlType

例如，您的

NumberQuestion

组件应类似于：

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

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

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

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

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

---

下面是一个工作示例。

问题与

JSON.stringify

@AluanHaddad没有任何关系，谁告诉了我相反的情况？相信我。

此.form.value中的类型错误

。在浏览器控制台中尝试，使用number类型的属性字符串化对象。您将看到它被正确序列化。@AluanHaddad是的，我试着说同样的话：）angular 2/typescript应该有一个聪明的解决方案，这就是我所寻找的。在您提供的链接中，动态表单是使用

QuestionService

服务生成的。您是否使用类似的方法？如果是，您如何定义您的输入？它是

text

还是

number

类型？实际上，我也尝试过这个，但我有另一个问题，让我问你（当然这个答案实际上回答了原始问题，所以我接受了。谢谢）。我想在创建问题时输入默认值，当输入0时，它不会显示（显示其他值）。我要做的是：questions=[…，newnumberquestion（{…，value:0}），…]。如果我设置了值：“0”，则会显示该值，但会再次出现json问题。你知道吗？我将尝试用你的例子来向你展示。这里是：如果你看例子1，会显示默认值，但在json中它是一个字符串。在示例2中，默认值为0，未显示。在示例3中，默认值为9，如图所示，json也是正确的。那么，为什么不显示0？每个问题的

键

属性应该不同。否则，将为每个项目指定相同的值。此外，该值应该是数字而不是字符串。最后，默认值0将显示为空输入。对不起，我忘了保存我的工作了。看看这个：我试图做的是不显示为空输入。与其他数字一样，默认值为0。您可以定义占位符，而不是传递“0”字符串。这样可以确保输入值是一个数字，并且用户在输入中看到0：