dynamic style and class from xml

dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html

@@ -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"-->

dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts

@@ -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];
+      }
+    }
 
 
-    
-  }
-
+}
+
 }

dmp-frontend/src/app/form/dynamic-form-group/group-base.ts

@@ -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 || '';
     }
 }

dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts

@@ -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
+            
+            
         }
 
     }

dmp-frontend/src/app/services/dataModelBuilder.service.ts

@@ -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)
                 });
         }

dmp-frontend/src/styles.css

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