@cb7777

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

Доброго времени суток, есть форма, выглядит она вот так
602e0f56e8b51673410536.png
Нужно по нажатию кнопки + добавлять такой же фрагмент как на скриншоте, но чтобы в итоге данные были разные. При нажатии на кнопку - удалять последнего.
<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>
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ответы на вопрос 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>

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
Artezio Москва
от 160 000 до 220 000 ₽