Angular2 动态表单控件

Question

我正在尝试构建一个动态表单。在我的特殊情况下，我需要一个表单，用户可以在其中定义问题并动态添加其选项。

问题标题是用户输入问题的文本字段。选项字段也是一个文本字段，用户可以在其中为问题添加选项。用户可以为特定问题添加 2 个或更多选项。

我正在使用 Formbuilder 并且有这样的东西：

this.form = fb.group({
            title: ["", Validators.required],
            options:
            fb.group({
                option1: new Control(''),
                option2: new Control('')
                .....
            })
        });

我也知道我们可以使用 this.form.addControl 将控件添加到表单组，并使用 this.form.removeControl 删除控件。

我需要允许用户使用 add/remove 选项，但我知道如何命名这些动态添加的选项，这样当我提交响应时，我会将以下内容发布到服务器：

{
title:"My test question",
options:{
"option 1","option 2","option 3",.......
}
}

谁能指导一下？任何帮助将不胜感激。

Answer 1

看看官方文档。有一篇专门针对此主题的文章：https://angular.io/guide/dynamic-form

Angular2 动态表单控件

Angular 2 Dynamic Form Control

angular2-forms

angular