argos/dmp-frontend/src/app/form/fields/dynamic-form-field.componen...

89 lines
3.7 KiB
HTML

<!-- <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> -->
<div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
<div [ngClass]="{true:'show', false:'hide'}[field.visible]">
<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" [(ngModel)]="field.value">
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key" [(ngModel)]="field.value">
<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)="toggleVisibility($event, field)" #ckb> <!--(change)="field.value = ckb.checked"-->
</div>
</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> <!--to do other rules -->
</ng-template>
</div> -->