Как скопировать часть шаблона?

Question

[cb7777]

Доброго времени суток, есть форма, выглядит она вот так

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

<div class="sub" #sub>
					<div class="row">
						<div class="col-6 m-1">
							<mat-label>ФИО абонента</mat-label>
							<input type="text" tabIndex="7" class="form-control" [(ngModel)]="fio_sub"/>
						</div>
						<div class="col-5 m-1">
							<mat-label>Статус</mat-label>
							<ng-select
								tabIndex="8"
								[items]="status_sub"
								bindLabel="name"
								bindValue="id"
								dropdownPosition = "top"
								notFoundText="Не найдено"
								loadingText="Загрузка..."
								[selectOnTab]="true"
								[loading]="loadingStatus"
								[(ngModel)]="selectedStatus"
							>
							</ng-select>
						</div>
					</div>
					<div class="row">
						<div class="col-6 m-1">
							<mat-label>Дата начала </mat-label>
							<input type="date" tabIndex="9" class="form-control" [(ngModel)]="dateBegin"  max="9999-12-12" />
						</div>
						<div class="col-5 m-1">
							<mat-label>Дата окончания </mat-label>
							<input type="date" tabIndex="10" class="form-control" [(ngModel)]="dateEnd"  max="9999-12-12" />
						</div>
					</div>
				</div>

Comments

[Евгений]

Сделай эту часть отдельным компонентом и рули. Таким образом данные у тебя разные, а на форме просто список таких маленьких компонентов.

[cb7777]

Евгений, Про создания отдельного компонента понял, но как программно создать сколько требуется нет. У Вас не будет примера ?

[Евгений]

cb7777, код писать не буду ибо лень, попробую на пальцах объяснить. Вот у тебя форма, на ней вот такой кусок с кнопкой "Добавить", и список (читай массив) маленьких компонентов. Ты их просто циклом (*ngFor) рисуешь на страницу. По клику на кнопку "Добавить" ты просто в список (массив) добавляешь новый пустой компонент, это приводит к тому, что состояние основного компонента меняется, view рендерится и вуаля! мы видим еще один элемент. Примеров в интернете нагуглить можно много.

[Антон Швец]

cb7777, FormArray погугли

Answer 1

[Андрей К.]

Создай интерфейс

interface User {
 fio_sub: string;
 selectedStatus: number;
 dateBegin: Date;
 dateEnd: Date;
}

объявляешь массив этих интерфейсов в компоненте
users: User[] = [];
и оборачиваешь всю форму в *ngFor.

<div *ngFor="let user of users" class="sub" #sub>
 <input [(ngModel)]="user.fio_sub"/>
</div>

Ну, соответственно на кнопку + добавляешь пустой интерфейс.

Comments

[cb7777]

Спасибо большое за помощь.