dynamic style and class from xml

This commit is contained in:
annampak 2017-10-06 17:33:08 +03:00
parent eefe053701
commit 8c44b7c128
6 changed files with 42 additions and 17 deletions

View File

@ -1,4 +1,4 @@
<div [formGroup]="form" class="form-group">
<div [formGroup]="form" [ngStyle] = "customStyle" [class]="classFromJson" >
<h4 [id]= "group.key">{{group.title}}</h4>
<div *ngFor="let field of group.groupFields" >
<df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
@ -6,4 +6,4 @@
</div>
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->

View File

@ -1,6 +1,6 @@
import { DataModel } from '../../entities/DataModel';
import { GroupBase } from './group-base';
import { Component,Input, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
@ -15,20 +15,31 @@ export class DynamicFormGroupComponent implements OnInit {
@Input() dataModel: DataModel;
@Input() group: GroupBase<any>;
@Input() form: FormGroup;
@Input() customStyle: {};
@Input() classFromJson: string ;
constructor() {
}
ngOnInit() {
let st = this.group.style == "any" ? "" : this.group.style;
this.classFromJson = this.group.class == "" ? "" : this.group.class;
this.customStyle = {};
if (st != "") {
st.replace(/"/g, '\\"');
var attributes = st.split(';');
for (var i = 0; i < attributes.length; i++) {
var entry = attributes[i].split(':');
entry[1].replace(/["]/g, " ");
//this.customStyle[entry[0]] = '2px solid #c1baba';
var a = entry[0];
this.customStyle[a] = entry[1];
}
}
}
}
}

View File

@ -10,6 +10,8 @@ export class GroupBase<T>{
order:number;
controlType:string;
section:string;
style:string;
class: string;
constructor(options: {
value?: T,
@ -20,7 +22,9 @@ export class GroupBase<T>{
visible?: boolean,
order?: number,
controlType?: string
section?: string
section?: string,
style?:string
class?:string
} = {}) {
this.value = options.value;
this.key = options.key || '';
@ -31,5 +35,7 @@ export class GroupBase<T>{
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || '';
this.section = options.section || '';
this.style = options.style || '';
this.class = options.class || '';
}
}

View File

@ -128,7 +128,9 @@ export class DynamicFormFieldComponent {
}
});
this.form.controls[field].setValidators(arrayVal);
this.form.controls[field].setValidators(arrayVal); //Multiple Validators, Usage of array because setValidator override any validators that are provided during initialistaion
}
}

View File

@ -135,6 +135,8 @@ export class dataModelBuilder {
newfldGroup.title = fieldGroup.title.__cdata;
newfldGroup.key = fieldGroup._id;
newfldGroup.section = fieldGroup._section;
newfldGroup.style = fieldGroup.visible._style;
newfldGroup.class = fieldGroup.visible._cssclass;
groups.push(newfldGroup)
});
}

View File

@ -62,3 +62,7 @@ body {
border-left: 5px solid #a94442; /* red */
}
.form-groupCustom {
border: 2px solid #A11515;
}