Блог

Главная - Вопросы по программированию - Динамические формы angular2

Динамические формы angular2

#angular #angular2-forms

#angular #angular2-формы

Вопрос:

Я создаю форму неизвестной длины. Отдельные входные данные могут иметь тип text, file, textarea и, возможно, даже select .

Я создал решение, используя *ngSwitch внутри *ngFor .

JSON, на котором я создаю форму:

 [{
    "name": "input1",
    "type": "text"
}, {
    "name": "input2",
    "type": "file"
}, {
    "name": "input3",
    "type": "text"
}]

и код:

 <div *ngFor="let part of myForm">   
    <div [ngSwitch]="part.type"> 
        <div *ngSwitchCase="'text'">
            <input/>
        </div>
        <div *ngSwitchCase="'file'">
            ....
        </div>
        ....
    </div>
</div>

Проблема с этим кодом заключается в том, что невозможно указать ngModel для отдельных входных данных, потому что, если бы было два ввода типа text, ngModel был бы дублированным.

Есть ли способ, которым я мог бы собрать все значения во что-то вроде массива? Можно ли создать решение с использованием реактивных форм?

Комментарии:

1. Я думаю, что ReactiveForms — это способ сделать это. angular.io/docs/ts/latest/cookbook/dynamic-form.html

2. Я реализовал решение с использованием реактивных форм, спасибо за подсказку. Что мне делать с этим вопросом?

3. Хороший вопрос, я бы просто оставил его на данный момент. Я бы создал ответ, но это была бы только ссылка на решение, которое не одобряется. Рад слышать, что у вас это работает!