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

63 lines
1.9 KiB
HTML

<div class="panel-body">
<div class="col-md-8">
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<div *ngFor = "let section of dataModel.sections">
<div *ngIf="section.groupFields.length>0 else sectionHeader">
<h3>{{section.title}}</h3>
<div *ngFor="let group of section.groupFields">
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
</div>
</div>
<ng-template #sectionHeader>
<h2>{{section.title}}</h2>
</ng-template>
</div>
<div *ngFor="let field of dataModel.fields">
<div [formGroup]="form" class="form-group">
<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
</div>
</div>
<!-- <div *ngFor="let group of dataModel.groups">
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
</div> -->
<div>
<button type="submit" class="btn btn-default" [disabled]="!form.valid">Save</button>
</div>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</form>
<p>Form value: {{ form.value | json }}</p>
</div>
<div class="col-md-4">
<h4>On this page:</h4>
<div *ngIf="dataModel.groups.length">
<toc [dataModel]="dataModel"></toc>
</div>
</div>
</div>
<div class="panel-footer">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
{{dirtyValues}}%
</div>
</div>
<!-- <button type="button" class="btn btn-info" onclick="signOut();">Sign out</button> -->
<a href="#" onclick="signOut();">Sign out</a>
</div>