more form ui changes
This commit is contained in:
parent
f3d9597a54
commit
8efe88c5fa
|
|
@ -1,31 +1,3 @@
|
|||
<!-- <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 [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
|
||||
|
||||
|
||||
|
|
@ -37,18 +9,6 @@
|
|||
<input class="form-control" formControlName="value">
|
||||
</div>
|
||||
|
||||
<!--input or change event
|
||||
on change event the listener is triggered on blur -->
|
||||
|
||||
<!-- <div *ngSwitchCase="'dropdown'">
|
||||
|
||||
<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> -->
|
||||
|
||||
<div *ngSwitchCase="'combobox'">
|
||||
<!--TODO-->
|
||||
<div *ngIf="this.field.data.type === 'autocomplete'">
|
||||
|
|
@ -59,14 +19,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div *ngSwitchCase="'checkbox'" class="checkbox">
|
||||
<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 *ngSwitchCase="'checkBox'" class="checkbox">
|
||||
<df-checkbox [form]="form" [field]="field"></df-checkbox>
|
||||
</div>
|
||||
|
|
@ -95,6 +47,57 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- <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> -->
|
||||
|
||||
|
||||
<!--input or change event
|
||||
on change event the listener is triggered on blur -->
|
||||
|
||||
<!-- <div *ngSwitchCase="'dropdown'">
|
||||
|
||||
<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> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div *ngSwitchCase="'checkbox'" class="checkbox">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fieldset-component {
|
||||
border:1px solid grey;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.fieldset-extended-desc {
|
||||
color: lightslategray;
|
||||
}
|
||||
|
||||
.content-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
<div [id]="compositeField.id" [formGroup]="form">
|
||||
<h4>{{compositeField.title}}</h4>
|
||||
<h4>{{compositeField.description}}</h4>
|
||||
<h4>{{compositeField.extendedDescription}}</h4>
|
||||
<div class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
|
||||
<h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
|
||||
<div class="content-left-margin">
|
||||
<h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
|
||||
<h4 *ngIf="compositeField.extendedDescription">
|
||||
<i>{{compositeField.extendedDescription}}</i>
|
||||
</h4>
|
||||
<div *ngFor="let field of compositeField.fields; let i = index;">
|
||||
<df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->
|
||||
</div>
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
import { CompositeField } from '../../models/CompositeField';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { Section } from '../../entities/model/section';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'df-composite-field',
|
||||
templateUrl: './dynamic-form-composite-field.html',
|
||||
styleUrls: [
|
||||
'./dynamic-form-composite-field.css'
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DynamicFormCompositeFieldComponent implements OnInit{
|
||||
|
||||
|
|
|
|||
|
|
@ -5,3 +5,18 @@
|
|||
.show {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.group-component {
|
||||
border:1px solid grey;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group-extended-desc {
|
||||
color: lightslategray;
|
||||
}
|
||||
|
||||
.content-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
<div [id]="group.id" [formGroup]="form" >
|
||||
<div class="group-component" [id]="group.id" [formGroup]="form">
|
||||
<h4>{{path + ' ' + group.title}}</h4>
|
||||
<h4 >{{group.description}}</h4>
|
||||
<h4 >{{group.extendedDescription}}</h4>
|
||||
<div class="content-left-margin">
|
||||
<h5 *ngIf="group.description">{{group.description}}</h5>
|
||||
<h5 *ngIf="group.extendedDescription" class="group-extended-desc">
|
||||
<i>{{group.extendedDescription}}</i>
|
||||
</h5>
|
||||
<div *ngFor="let compositeField of group.compositeFields; let i = index;">
|
||||
<df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path+'.'+(i+1)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
|
||||
<df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path+'.'+(i+1)"
|
||||
[pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { FieldGroup } from '../../models/FieldGroup';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { NgForm } from '@angular/forms';
|
||||
import { Rule } from '../../entities/common/rule';
|
||||
|
|
@ -9,7 +9,8 @@ import { Rule } from '../../entities/common/rule';
|
|||
@Component({
|
||||
selector: 'df-group',
|
||||
templateUrl: './dynamic-form-group.component.html',
|
||||
styleUrls: ['./dynamic-form-group.component.css']
|
||||
styleUrls: ['./dynamic-form-group.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DynamicFormGroupComponent implements OnInit {
|
||||
@Input() group: FieldGroup
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<p-panel [header]="path+' '+section.title" [toggleable]="true">
|
||||
<p-panel [toggleable]="true">
|
||||
<p-header>
|
||||
<div class="ui-helper-clearfix">
|
||||
<h2>{{path}} {{section.title}}</h2>
|
||||
</div>
|
||||
</p-header>
|
||||
|
||||
<div [id]="section.id" [formGroup]="form">
|
||||
<h4>{{section.description}}</h4>
|
||||
<h4>{{section.extendedDescription}}</h4>
|
||||
<h3 *ngIf="section.description">{{section.description}}</h3>
|
||||
<h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
|
||||
<div *ngIf="section.fieldGroups">
|
||||
<div *ngFor="let group of section.fieldGroups; let j = index;">
|
||||
<df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import { FormGroup } from '@angular/forms';
|
||||
import { Section } from '../../entities/model/section';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'df-section',
|
||||
templateUrl: './dynamic-form-section.html',
|
||||
styleUrls: [
|
||||
'./dynamic-form-section.css'
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DynamicFormSectionComponent implements OnInit {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue