more form ui changes
This commit is contained in:
parent
f3d9597a54
commit
8efe88c5fa
|
|
@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
|
|||
@Injectable()
|
||||
export class Section {
|
||||
title: string;
|
||||
description:string;
|
||||
description: string;
|
||||
id: string;
|
||||
defaultVisibility: boolean;
|
||||
ordinal: number;
|
||||
page:number;
|
||||
page: number;
|
||||
}
|
||||
|
|
@ -1,3 +1,52 @@
|
|||
<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
|
||||
|
||||
|
||||
<label>{{path+' '+field.title}}</label>
|
||||
|
||||
<div *ngSwitchCase="'freetext'">
|
||||
<label>{{field.description}}</label>
|
||||
<div>{{field.extendedDescription}}</div>
|
||||
<input class="form-control" formControlName="value">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'checkBox'" class="checkbox">
|
||||
<df-checkbox [form]="form" [field]="field"></df-checkbox>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'textarea'">
|
||||
<textarea class="form-control" formControlName="value"> </textarea>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'booleanDecision'">
|
||||
<df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'radiobox'">
|
||||
<df-radiobox [form]="form" [field]="field"></df-radiobox>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'label'"> </div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div [formGroup]="form" class="form-group">
|
||||
|
||||
|
||||
|
|
@ -26,21 +75,11 @@
|
|||
|
||||
</div> -->
|
||||
|
||||
<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
|
||||
|
||||
|
||||
<label>{{path+' '+field.title}}</label>
|
||||
|
||||
<div *ngSwitchCase="'freetext'">
|
||||
<label>{{field.description}}</label>
|
||||
<div>{{field.extendedDescription}}</div>
|
||||
<input class="form-control" formControlName="value">
|
||||
</div>
|
||||
|
||||
<!--input or change event
|
||||
<!--input or change event
|
||||
on change event the listener is triggered on blur -->
|
||||
|
||||
<!-- <div *ngSwitchCase="'dropdown'">
|
||||
<!-- <div *ngSwitchCase="'dropdown'">
|
||||
|
||||
<autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
|
||||
|
||||
|
|
@ -49,52 +88,16 @@
|
|||
</select>
|
||||
</div> -->
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div *ngSwitchCase="'checkbox'" class="checkbox">
|
||||
|
||||
<!-- <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>
|
||||
|
||||
<div *ngSwitchCase="'textarea'">
|
||||
<textarea class="form-control" formControlName="value"> </textarea>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'booleanDecision'">
|
||||
<df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'radiobox'">
|
||||
<df-radiobox [form]="form" [field]="field"></df-radiobox>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'label'"> </div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</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 *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 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>
|
||||
|
||||
</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{
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,19 @@
|
|||
|
||||
.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" >
|
||||
<h4 >{{path+' '+group.title}}</h4>
|
||||
<h4 >{{group.description}}</h4>
|
||||
<h4 >{{group.extendedDescription}}</h4>
|
||||
<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>
|
||||
<div class="group-component" [id]="group.id" [formGroup]="form">
|
||||
<h4>{{path + ' ' + group.title}}</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->
|
||||
</div>
|
||||
|
|
@ -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,19 +1,23 @@
|
|||
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',
|
||||
})
|
||||
export class DynamicFormSectionComponent implements OnInit{
|
||||
selector: 'df-section',
|
||||
templateUrl: './dynamic-form-section.html',
|
||||
styleUrls: [
|
||||
'./dynamic-form-section.css'
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DynamicFormSectionComponent implements OnInit {
|
||||
|
||||
@Input() section: Section
|
||||
@Input() form: FormGroup;
|
||||
@Input() pathName:string;
|
||||
@Input() path:string;
|
||||
constructor(){}
|
||||
@Input() section: Section
|
||||
@Input() form: FormGroup;
|
||||
@Input() pathName: string;
|
||||
@Input() path: string;
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(){
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue