【发布时间】：2016-09-18 16:23:45
【问题描述】：
我正在尝试构建一个动态表单。在我的特殊情况下，我需要一个表单，用户可以在其中定义问题并动态添加其选项。
问题标题是用户输入问题的文本字段。 选项字段也是一个文本字段，用户可以在其中为问题添加选项。 用户可以为特定问题添加 2 个或更多选项。
我正在使用 Formbuilder 并且有这样的东西：
this.form = fb.group({
title: ["", Validators.required],
options:
fb.group({
option1: new Control(''),
option2: new Control('')
.....
})
});
我也知道我们可以使用 this.form.addControl 将控件添加到表单组，并使用 this.form.removeControl 删除控件。
我需要允许用户添加/删除选项，但我注意到如何命名这些动态添加的选项，以便当我提交响应时，我会将以下内容发布到服务器：
{
title:"My test question",
options:{
"option 1","option 2","option 3",.......
}
}
有人可以指导吗？任何帮助将不胜感激。
【问题讨论】：
-
这里有更多关于 Angular 2 中的动态表单的信息：playcode.org/dynamic-forms-in-angular-2
-
谢谢 Mayur 和 Eusthace，这两个链接只从一个模型生成一个表单。我需要的是允许用户在生成表单组后向表单组添加或删除控件。例如，用户可以定义一个带有 n 个选项的问题。当用户单击添加问题时，它会显示一个用于问题文本的文本框和两个用于输入选项文本的默认文本框，我还希望允许用户添加其他选项，例如点击添加更多选项应该显示另一个文本框来添加选项，同样他应该能够删除一个应该删除选项文本框的添加选项。