unchecked rule visibility

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

@@ -29,7 +29,7 @@
 <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
   <div [ngClass]="{true:'show', false:'hide'}[field.visible]">
     
-    <label [attr.for]="field.key">{{field.label}}</label>
+    <label *ngIf="field.controlType != 'checkbox'" [attr.for]="field.key">{{field.label}}</label>
     <div>{{field.description}}</div>
     
     <input  *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
@@ -37,12 +37,17 @@
       on change event the listener is triggered on blur -->
 
     <select *ngSwitchCase="'dropdown'" class="form-control" [id]="field.key" [formControlName]="field.key"  [required]="field.required">
-      <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
+      <option *ngFor="let opt of field.options" [value]="opt.key"  (change)="toggleVisibility($event, field, true)" >{{opt.value}}</option>
     </select>
 
-    <input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [type]="field.type"
+    <div *ngSwitchCase="'checkbox'" class="checkbox">
-       (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value"> <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility 
+        <label class="checkBoxLabelCustom">
-        // without property [checked] as pages change the checkboxes of the previous pages lose the checked pro  [checked] = "field.value" #ckb -->
+            <input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [type]="field.type"
+            (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}} <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility 
+             // without property [checked] as pages change the checkboxes of the previous pages lose the checked pro  [checked] = "field.value" #ckb -->
+        </label>
+      </div>
+   
     
       <textarea *ngSwitchCase="'textarea'"  class="form-control" [formControlName]="field.key" [id]="field.key" 
       [required]="field.required"  (ngModelChange) = "toggleVisibility($event, field,false)"> </textarea> 

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

@@ -11,7 +11,8 @@ import { RuleStyle } from '../../entities/common/rulestyle';
 
 @Component({
     selector: 'df-field',
-    templateUrl: './dynamic-form-field.component.html'
+    templateUrl: './dynamic-form-field.component.html',
+    styles:['.checkBoxLabelCustom {font-weight: 700;}']
 })
 
 export class DynamicFormFieldComponent {
@@ -91,7 +92,7 @@ export class DynamicFormFieldComponent {
                 this.hideField(targetField, rule);
             }
         }
-        if (rule._ruleStyle == "checked") {  //checkbox field     
+        if (rule._ruleStyle == "checked") {  //checkbox field    
             if (field.value == true) {
                 targetField.visible = true;
                 this.AddvalidationRules(rule._target);
@@ -99,6 +100,17 @@ export class DynamicFormFieldComponent {
                 this.hideField(targetField, rule);
             }
         }
+        if (rule._ruleStyle == "unchecked") {  //checkbox field 
+            if (field.value !=="")   {
+                if (field.value == false) {
+                    targetField.visible = true;
+                    this.AddvalidationRules(rule._target);
+                } else {
+                    this.hideField(targetField, rule);
+                }
+            }
+            
+        }
         if (rule._ruleStyle == "existence") {
             if (field.visible == "true" || field.visible == true) {
                 targetField.visible = true;

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

@@ -115,7 +115,7 @@ export class dataModelBuilder {
                         }]
                 });
                 fieldsVisible.push(newfield);
-            }else if (element.viewStyle._renderstyle == "textarea") {
+            } else if (element.viewStyle._renderstyle == "textarea") {
                 let newfield: FieldBase<any>;
                 let rule = new Rule();
                 newfield = new TextAreaField({
@@ -136,17 +136,17 @@ export class dataModelBuilder {
         return fieldsVisible;
     }
 
-    private getGroups(fieldGroups: any, fields: any[] , dataValues) {
+    private getGroups(fieldGroups: any, fields: any[], dataValues) {
         let groups: GroupBase<any>[] = [];
-        
+
         if (fieldGroups.length > 1) {
             fieldGroups.forEach(fieldGroup => {   // each fiedgroup fills with its fields from json  
                 let newfldGroup = new GroupBase();
                 newfldGroup.groupFields = new Array();
                 fields.forEach(field => {
                     if (fieldGroup._id == field.group) {
-                        if(dataValues!="")
+                        if (dataValues != "")
-                            if(dataValues[fieldGroup._id][field.key] != undefined) // to put values in fields
+                            if (dataValues[fieldGroup._id][field.key] != undefined) // to put values in fields
                                 field.value = dataValues[fieldGroup._id][field.key].value == undefined ? dataValues[fieldGroup._id][field.key] : dataValues[fieldGroup._id][field.key].value;
                         newfldGroup.groupFields.push(field);
                     } else {
@@ -182,52 +182,6 @@ export class dataModelBuilder {
     }
 
 
-    private getDummyGroups() {
-
-        let groups: GroupBase<any>[] = [];
-
-
-        let group: GroupBase<any>;
-        group = new GroupBase<any>({
-            key: "adfgadfsg",
-            title: "GroupA",
-            rules: new Array(),
-            groupFields: new Array(),
-            value: "value",
-            visible: true,
-            order: 1
-            //,
-            //controlType: "none"
-        });
-
-
-        let newfield1: FieldBase<any>;
-        newfield1 = new TextboxField({
-            key: "tf1-455",
-            label: "Field from group1",
-            value: 'this is a groupfield',
-            required: true,
-            ordinal: 1
-        });
-        group.groupFields.push(newfield1);
-
-        let newfield2: FieldBase<any>;
-        newfield2 = new TextboxField({
-            key: "tf1-443",
-            label: "Another field from group1",
-            value: 'this is a groupfield',
-            required: true,
-            ordinal: 2
-        });
-        group.groupFields.push(newfield2);
-
-        groups.push(group);
-
-
-        return groups;
-
-    }
-
     private getFieldsAttributes(attributes: any, functions: any, fields: any[]) {
         let attribute: Attribute[] = [];
         attributes.forEach(attr => {
@@ -247,10 +201,7 @@ export class dataModelBuilder {
                 if (attr.sources.source.length != undefined) {
                     for (var i = 0; i < attr.sources.source.length; i++) {
                         if (attr.sources.source[i].url !== undefined) {
-
-
                             fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source[i].url._value;
-
                             this.restBase.proxy_get(attr.sources.source[i].url._value).subscribe((data) => {
                                 console.log(data);
                                 newAttribute.sources.forEach(src => {
@@ -283,10 +234,7 @@ export class dataModelBuilder {
                 }
 
                 if (attr.sources.source.url !== undefined) {
-
-
                     fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source.url._value;
-
                     this.restBase.proxy_get(attr.sources.source.url._value).subscribe((data) => {
                         console.log(data);
                         newAttribute.sources.forEach(src => {
@@ -311,52 +259,46 @@ export class dataModelBuilder {
                             src.params.push(prm);
                         }
 
-
                     });
                 }
-
-
-
             }
+            if(attr.validation.rule != undefined)
+                if (attr.validation.rule.length)
+                    for (var i = 0, len = attr.validation.rule.length; i < len; i++) {
+                        let rule = new Rule();
+                        rule.ruleStyle = attr.validation.rule[i]._ruleStyle;
+                        rule.ruleType = attr.validation.rule[i]._type;
+                        if (attr.validation.rule[i]._ruleStyle == "regex")
+                            rule.regex = attr.validation.rule[i].__cdata;
+                        if (attr.validation.rule[i]._ruleStyle == "customValidation") {
+                            rule.method = attr.validation.rule[i]._method;
+                            functions.forEach(fnc => {
+                                if (fnc._id == rule.method)
+                                    rule.methodJs = fnc.script.__cdata;
+                            });
+                        }
 
-
+                        newAttribute.validation.push(rule);
-            if (attr.validation.rule.length)
-                for (var i = 0, len = attr.validation.rule.length; i < len; i++) {
-                    let rule = new Rule();
-                    rule.ruleStyle = attr.validation.rule[i]._ruleStyle;
-                    rule.ruleType = attr.validation.rule[i]._type;
-                    if (attr.validation.rule[i]._ruleStyle == "regex")
-                        rule.regex = attr.validation.rule[i].__cdata;
-                    if (attr.validation.rule[i]._ruleStyle == "customValidation") {
-                        rule.method = attr.validation.rule[i]._method;
-                        functions.forEach(fnc => {
-                            if (fnc._id == rule.method)
-                                rule.methodJs = fnc.script.__cdata;
-                        });
                     }
+                else {
+                    if (attr.validation.rule) {
+                        let rule = new Rule();
+                        rule.ruleStyle = attr.validation.rule._ruleStyle;
+                        rule.ruleType = attr.validation.rule._type;
+                        if (attr.validation.rule._ruleStyle == "regex")
+                            rule.regex = attr.validation.rule.__cdata;
+                        if (attr.validation.rule._ruleStyle == "customValidation") {
+                            rule.method = attr.validation.rule._method;
+                            functions.forEach(fnc => {
+                                if (fnc._id == rule.method)
+                                    rule.methodJs = fnc.__cdata;
+                            });
 
-                    newAttribute.validation.push(rule);
+                        }
-                }
-
-            else {
-                if (attr.validation.rule) {
-                    let rule = new Rule();
-                    rule.ruleStyle = attr.validation.rule._ruleStyle;
-                    rule.ruleType = attr.validation.rule._type;
-                    if (attr.validation.rule._ruleStyle == "regex")
-                        rule.regex = attr.validation.rule.__cdata;
-                    if (attr.validation.rule._ruleStyle == "customValidation") {
-                        rule.method = attr.validation.rule._method;
-                        functions.forEach(fnc => {
-                            if (fnc._id == rule.method)
-                                rule.methodJs = fnc.__cdata;
-                        });
 
+                        newAttribute.validation.push(rule);
                     }
-
-                    newAttribute.validation.push(rule);
                 }
-            }
 
             attribute.push(newAttribute);
             //if (fields.find(x => x.key == newAttribute.id).url.url == null)