argos/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html

<form *ngIf="form" novalidate [formGroup]="form">
	<div class="dynamic-form-editor row">
		<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication>

		<div class="col-12" id="form-container">
			<mat-vertical-stepper #stepper [linear]="false">
				<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
					<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
						<mat-step [stepControl]="sectionFormGroup">
							<ng-template matStepLabel>{{pageFormGroup.get('title').value}}</ng-template>
							<div *ngIf="stepper.selectedIndex == z" class="row">
								<app-form-section class="col-12" [form]="sectionFormGroup" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"></app-form-section>
							</div>
						</mat-step>
					</div>
				</div>
			</mat-vertical-stepper>
		</div>
	</div>
</form>