В принципе, я хочу создать динамическую форму с вложенными объектами, такими как рисунок ниже:
- Выплаты в массиве на модели
- Мы должны иметь возможность добавлять/удалять выплаты при необходимости.
- Форма должна синхронизировать основные элементы управления формами и модель.
- Количество выплат является произвольным и должно быть загружено в форму из модели
Нет рабочих примеров, которые я мог бы найти, как это сделать в Angular 2, хотя это было действительно легко сделать в Angular 1.
Ниже мой оригинальный вопрос, с тех пор я обновил его для разъяснения (см. выше):
Сначала я просто хотел указать, что я знаю, что новая версия Angular 2 rc.2 только что была выпущена несколько дней назад. Таким образом, код для создания динамической вложенной формы, возможно, изменил некоторые, но недостаточно документации, чтобы понять это.
В последней версии Angular 2 (я в настоящее время использую rc.1, но планирую обновить до rc.2) Мне нужно создать форму вроде этого (псевдокод представления):
<form [ngFormModel]="form" (ngSubmit)="onSubmit()">
<input type="text" ngControl="name">
<div *ngFor="let expense for expenses; let i = index;" control-group="expenses">
<input type="text" ngControl="expense.amount" [(ngModel)]="myModel.expenses[i].amount">
<input type="checkbox" ngControl="expense.final" [(ngModel)]="myModel.expenses[i].final">
</div>
<a class="button" (click)="addExpenseControl()">Add</a>
<a class="button" (click)="deleteExpenseControl()">Delete</a>
</form>
Таким образом, псевдокод выше не будет работать, но, честно говоря, из-за отсутствия документации я не могу понять, как подключить что-то подобное. Там несколько руководств по вложенной ControlGroup, но это не будет соответствовать этому случаю, поскольку мы должны иметь возможность динамически добавлять и удалять группы управления, а также мне нужно иметь возможность синхронизировать их с моделью.
Я нашел этот plunkr здесь, предоставленный командой Angular, которая позволяет добавлять элементы управления в форму - но это не добавление/удаление ControlGroup, а используя ControlArray, и я не уверен, что это применимо здесь?
Я очень хорошо знаком с использованием более новых форм на основе моделей Angular 2, но я хватаю за ресурсы, чтобы правильно вложить их (динамически!) и привязать эти вложенные данные к основной модели формы. Как я могу ссылаться на вложенные элементы управления в представлении? Является ли псевдокод выше даже близко? Я бы опубликовал код с моего контроллера, но, честно говоря, я не знаю, с чего начать, когда дело доходит до вложенных расходов (ControlGroup??) выше...