Элемент управления динамической формой Angular 2

Я пытаюсь построить динамичную форму. В моем конкретном случае мне нужна форма, в которой пользователь может определять вопрос и динамически добавлять его параметры.

Заголовок вопроса - это текстовое поле, в которое пользователь вводит вопрос. Поле параметров также является текстовым полем, в которое пользователь добавляет параметры для вопроса. Пользователь может добавить 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 angular2-forms
person Naveed Ahmed    schedule 21.05.2016    source источник
comment
посетите этот :: angular- meteor.com/tutorials/socially/angular2/   -  person mayur    schedule 27.05.2016
comment
Здесь у вас есть дополнительная информация о динамических формах в Angular 2: playcode.org/dynamic-forms -in-angular-2   -  person Eusthace    schedule 29.05.2016
comment
Спасибо Mayur и Eusthace, обе ссылки генерируют форму только один раз из модели. Мне нужно разрешить пользователю добавлять или удалять элемент управления в группу форм после того, как он был сгенерирован. Например, пользователь может задать вопрос с количеством вариантов n. Когда пользователь нажимает кнопку добавления вопроса, отображается текстовое поле для текста вопроса и два текстовых поля по умолчанию для ввода текста параметров, я хочу разрешить пользователю также добавлять дополнительные параметры, например нажатие на кнопку «Добавить дополнительную опцию» должно отобразить другое текстовое поле для добавления опции, аналогично он должен иметь возможность удалить добавленную опцию, которая должна удалить текстовое поле опций.   -  person Naveed Ahmed    schedule 29.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

Взгляните на официальную документацию. По этой теме есть статья: https://angular.io/guide/dynamic-form

person pjmolina    schedule 09.03.2017