2017-12-28 17:32:28 +01:00
|
|
|
<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
|
2017-12-06 12:39:49 +01:00
|
|
|
|
2018-01-03 12:36:28 +01:00
|
|
|
<!-- <h5 *ngIf="field.title">{{field.title}}</h5> -->
|
2017-12-06 12:39:49 +01:00
|
|
|
|
2017-12-11 09:10:54 +01:00
|
|
|
|
|
|
|
<div [class.content-left-margin]="field.title">
|
2017-12-28 17:32:28 +01:00
|
|
|
<h5 *ngIf="field.description">{{field.description}}</h5>
|
|
|
|
<h5 *ngIf="field.extendedDescription" class="field-extended-desc">
|
|
|
|
<i>{{field.extendedDescription}}</i>
|
|
|
|
</h5>
|
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div *ngSwitchCase="'freetext'">
|
2017-12-28 17:32:28 +01:00
|
|
|
<mat-form-field>
|
2018-01-05 08:49:12 +01:00
|
|
|
<input matInput formControlName="value" placeholder="{{field.data.label}}">
|
2017-12-28 17:32:28 +01:00
|
|
|
</mat-form-field>
|
2017-12-06 12:39:49 +01:00
|
|
|
</div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div *ngSwitchCase="'combobox'">
|
|
|
|
<!--TODO-->
|
|
|
|
<div *ngIf="this.field.data.type === 'autocomplete'">
|
|
|
|
<df-autocomplete [form]="form" [field]="field"></df-autocomplete>
|
|
|
|
</div>
|
|
|
|
<div *ngIf="this.field.data.type === 'wordlist'">
|
|
|
|
<df-dropdown [form]="form" [field]="field"></df-dropdown>
|
|
|
|
</div>
|
2017-12-28 17:32:28 +01:00
|
|
|
|
2017-12-06 11:35:50 +01:00
|
|
|
</div>
|
2017-12-06 12:39:49 +01:00
|
|
|
|
|
|
|
<div *ngSwitchCase="'checkBox'" class="checkbox">
|
|
|
|
<df-checkbox [form]="form" [field]="field"></df-checkbox>
|
2017-12-06 11:35:50 +01:00
|
|
|
</div>
|
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div *ngSwitchCase="'textarea'">
|
2017-12-28 17:32:28 +01:00
|
|
|
<mat-form-field>
|
|
|
|
<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"> </textarea>
|
|
|
|
<button mat-button *ngIf="form.get('value').value" matSuffix mat-icon-button aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
|
|
|
|
<mat-icon>close</mat-icon>
|
|
|
|
</button>
|
|
|
|
</mat-form-field>
|
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
</div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div *ngSwitchCase="'booleanDecision'">
|
|
|
|
<df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
|
|
|
|
</div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div *ngSwitchCase="'radiobox'">
|
|
|
|
<df-radiobox [form]="form" [field]="field"></df-radiobox>
|
|
|
|
</div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div *ngSwitchCase="'label'"> </div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
<div [hidden]="isValid">
|
|
|
|
<div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
|
|
|
|
<div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
|
|
|
|
<div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
|
|
|
|
</div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
|
|
|
</div>
|
2017-12-28 17:32:28 +01:00
|
|
|
</div>
|
2017-12-06 11:35:50 +01:00
|
|
|
|
2017-11-27 14:40:16 +01:00
|
|
|
<!-- <div [formGroup]="form" class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label [attr.for]="field.key">{{field.label}}</label>
|
|
|
|
|
|
|
|
<div [ngSwitch]="field.controlType">
|
|
|
|
|
|
|
|
|
|
|
|
<input *ngSwitchCase="'textbox'" class ="form-control" [formControlName]="field.key"
|
|
|
|
[id]="field.key" [type]="field.type" required ="field.required">
|
|
|
|
|
|
|
|
|
|
|
|
<select [id]="field.key" *ngSwitchCase="'dropdown'" class ="form-control" [formControlName]="field.key">
|
|
|
|
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
|
|
<input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value"
|
|
|
|
[id]="field.key" [type]="field.type" (change)="field.value = ckb.checked" #ckb>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="alert alert-danger" *ngIf="!isValid">{{field.label}} is required</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
2017-12-05 17:56:21 +01:00
|
|
|
|
2017-12-06 11:35:50 +01:00
|
|
|
<!--input or change event
|
2017-11-27 14:40:16 +01:00
|
|
|
on change event the listener is triggered on blur -->
|
|
|
|
|
2017-12-06 11:35:50 +01:00
|
|
|
<!-- <div *ngSwitchCase="'dropdown'">
|
2017-11-27 14:40:16 +01:00
|
|
|
|
|
|
|
<autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
|
|
|
|
|
|
|
|
<select *ngIf="!field.url" class="form-control" [id]="field.key" formControlName="field.key" [required]="field.required" (change)="toggleVisibility($event, field, false)">
|
|
|
|
<option *ngFor="let opt of field.options" [value]="opt._value" >{{opt._label}}</option>
|
|
|
|
</select>
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
2017-12-06 11:35:50 +01:00
|
|
|
|
|
|
|
<!-- <div *ngSwitchCase="'checkbox'" class="checkbox">
|
2017-11-27 14:40:16 +01:00
|
|
|
<label class="checkBoxLabelCustom">
|
|
|
|
<input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
|
|
|
|
(change)="toggleVisibility($event, field, true)" [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
|
|
|
|
</label>
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
<!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
|
|
|
|
<div *ngIf= "field.rules; else elseBlock ">
|
|
|
|
<div *ngIf="field.rules.length > 0; else elseBlock">
|
|
|
|
<div *ngFor="let rule of field.rules">
|
|
|
|
<div *ngIf="rule._type == 'fieldVisible'; else otherRuleBlock">
|
|
|
|
<div hidden="{{ruleVisibleMethod(field, rule, dataModel)}}">
|
|
|
|
<label [attr.for]="field.key">{{field.label}}</label>
|
|
|
|
|
|
|
|
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
|
|
|
|
required="field.required">
|
|
|
|
|
|
|
|
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key">
|
|
|
|
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
|
|
|
|
</select>
|
|
|
|
|
|
|
|
<input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
|
|
|
|
(change)="field.value = ckb.checked" #ckb>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ng-template #elseBlock>
|
|
|
|
<label [attr.for]="field.key">{{field.label}}</label>
|
|
|
|
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
|
|
|
|
required="field.required">
|
|
|
|
|
|
|
|
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key">
|
|
|
|
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
|
|
|
|
</select>
|
|
|
|
|
|
|
|
<input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
|
|
|
|
(change)="field.value = ckb.checked" #ckb>
|
|
|
|
|
|
|
|
</ng-template>
|
|
|
|
|
|
|
|
<ng-template #otherRuleBlock>
|
|
|
|
|
|
|
|
</ng-template>
|
|
|
|
|
2017-09-18 11:38:06 +02:00
|
|
|
</div> -->
|