Angular 2动态表单控件

时间:2016-05-21 12:38:47

标签: angular angular2-forms

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

问题标题是用户输入问题的文本字段。 选项字段也是一个文本字段,用户可以在其中添加问题选项。 用户可以为特定问题添加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",.......
}
}

有人可以指导吗?任何帮助都将非常感激。

1 个答案:

答案 0 :(得分:1)

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