106 lines
4.4 KiB
HTML
106 lines
4.4 KiB
HTML
<div>
|
|
<div [formGroup]="form">
|
|
<div class="row">
|
|
<mat-form-field>
|
|
<input matInput placeholder='Id' type="text" formControlName="id">
|
|
</mat-form-field>
|
|
<div>
|
|
<div formGroupName="viewStyle">
|
|
<mat-form-field>
|
|
<mat-select placeholder="View Style" formControlName="renderStyle" (change)="onchangeCombo()">
|
|
<mat-option value="textarea">textarea</mat-option>
|
|
<mat-option value="booleanDecision">booleanDecision</mat-option>
|
|
<mat-option value='combobox'>combobox</mat-option>
|
|
<mat-option value="checkBox">checkBox</mat-option>
|
|
<mat-option value="freetext">freetext</mat-option>
|
|
<mat-option value="radiobox">radiobox</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
|
|
<div *ngSwitchCase="'combobox'">
|
|
<combobox-component [form]="form" [dataModel]="dataModel"></combobox-component>
|
|
</div>
|
|
<div *ngSwitchCase="'radiobox'">
|
|
<radiobox-component [form]="form" [dataModel]="dataModel"></radiobox-component>
|
|
</div>
|
|
<div *ngSwitchCase="'freetext'">
|
|
<freetext-component [form]="form" [dataModel]="dataModel"></freetext-component>
|
|
</div>
|
|
<div *ngSwitchCase="'textarea'">
|
|
<textarea-component [form]="form" [dataModel]="dataModel"></textarea-component>
|
|
</div>
|
|
<div *ngSwitchCase="'booleanDecision'">
|
|
<booleanDecision-component [form]="form" [dataModel]="dataModel"></booleanDecision-component>
|
|
</div>
|
|
<div *ngSwitchCase="'checkBox'">
|
|
<checkbox-component [form]="form" [dataModel]="dataModel"></checkbox-component>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row">
|
|
<div class="form-group col-md-6">
|
|
<label>description</label>
|
|
<input type="text" class="form-control" formControlName="description">
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label>extendedDescription</label>
|
|
<input type="text" class="form-control" formControlName="extendedDescription">
|
|
</div>
|
|
</div> -->
|
|
<div class="row">
|
|
<div *ngIf="isFieldMultiplicityEnabled" formGroupName="multiplicity">
|
|
<div>
|
|
<h5>Multiplicity</h5>
|
|
<mat-form-field class="full-width">
|
|
<input matInput type="number" placeholder="Min" formControlName="min">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="full-width">
|
|
<input matInput type="number" placeholder="Max" formControlName="max">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<mat-form-field class="full-width">
|
|
<input matInput type="number" placeholder="Ordinal" formControlName="ordinal">
|
|
</mat-form-field>
|
|
<div formGroupName="defaultValue">
|
|
<mat-form-field class="full-width">
|
|
<input matInput type="text" placeholder="Default Value" formControlName="value">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div formArrayName="validations">
|
|
<div *ngFor="let validation of form['controls']['validations']['controls']; let i=index">
|
|
<mat-form-field>
|
|
<mat-select placeholder='Validation' [formControlName]="i">
|
|
<mat-option *ngFor="let option of validationsOptions" [value]="option.key">{{option.value}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<mat-checkbox *ngIf="showMultiplicity" [(ngModel)]="isFieldMultiplicityEnabled" (ngModelChange)="onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled)">Multiplicity</mat-checkbox>
|
|
<mat-expansion-panel *ngFor="let rule of dataModel.visible.rules let i=index;">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>{{i + 1}}. Rule {{i + 1}}</mat-panel-title>
|
|
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteRule(i);">
|
|
<span class="glyphicon glyphicon-erase"></span>
|
|
</button>
|
|
</div>
|
|
</mat-expansion-panel-header>
|
|
<rule-form [form]="form.get('visible').get('rules').get(''+i)" [dataModel]="rule"></rule-form>
|
|
</mat-expansion-panel>
|
|
<a (click)="addNewRule()" style="cursor: pointer">
|
|
Add Rule +
|
|
</a>
|
|
|
|
|
|
</div>
|