argos/dmp-frontend/src/app/form/dynamic-form.component.html

<div class="parent-div">
		
	<div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
		
		<div class="col-md-12 form-body-container" id="form-container">

			<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
					
				<div *ngFor = "let section of dataModel.sections; let i = index;">							
					<df-section [section]="section" [form]="form.get('sections').get(''+i)" [pathName]="'sections.'+i"></df-section>
				</div>
	
				<!-- <div *ngFor="let group of dataModel.groups">
					<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
				</div> -->
	
	
			</form>
		</div>
	

		<!-- <div class="col-md-12 form-footer-seperator" >
		</div>

	
		<div class="col-md-12 form-footer-container" >
			
				<div >
					<div class="progress">
						<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
						</div>
					</div>
				</div>

			<div>
				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
			</div>
	 -->
			<!--
			<div *ngIf="payLoad" class="form-row">
				<strong>Saved the following values</strong><br>{{payLoad}}
			</div>
			-->
			
			
			<p>Form value: {{ form.value | json }}</p>
		
	
			
		<!-- 	<div class="text-center">
				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
					<li [ngClass]="{disabled:pagination.currentPage === 1}">
						<a (click)="setPage(1)" class="cursor-link" >First</a>
					</li>
					<li [ngClass]="{disabled:pagination.currentPage === 1}">
						<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
					</li>
					<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
						<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
					</li>
					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
						<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
					</li>
					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
						<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
					</li>
				</ul>
			</div> -->

	</div>	


<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
 -->		<!--
		<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
		-->
<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
	</div>
	
	<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
		<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
		<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
			<!--
			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
			-->
		<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
		</div> 
	</div>

	<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'shrink-width' }[expandedToc]" id="toc-container">
		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
	</div> -->
				
		
			
</div>


<!--Modal for Confirmation -->
<!-- <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to save and finalize?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
			</div>
		</div>
	</div>
</div> -->