Toc improvements, visibility rules

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

@@ -33,7 +33,7 @@
     <div>{{field.description}}</div>
     
     <input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
-       [(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex">
+       [(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex" (blur) = "toggleVisibility($event, field)">
 
     <select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control"[formControlName]="field.key" [(ngModel)]="field.value"  [required]="field.required">
       <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>

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

@@ -79,17 +79,36 @@ export class DynamicFormFieldComponent {
                 this.dataModel.getFieldByKey(rule._target).visible = false;
             }
         }
+        if (rule._ruleStyle == "existence") {     
+            if (field.visible == "true" || field.visible == true) {
+                this.dataModel.getFieldByKey(rule._target).visible = true;
+                this.AddvalidationRules(rule._target);
+            } else {
+                this.dataModel.getFieldByKey(rule._target).visible = false;
+            }
+        }
+        if (rule._ruleStyle == "regex") {     
+            if (new RegExp(rule.__cdata).test(field.value)) {
+                this.dataModel.getFieldByKey(rule._target).visible = true;
+                this.AddvalidationRules(rule._target);
+            } else {
+                this.dataModel.getFieldByKey(rule._target).visible = false;
+            }
+        }
     }
 
     toggleVisibility(e, field, ckb) {  //ckb the checkbox only send this parameter, it's essential to change the field value
         if (ckb)
             field.value = ckb.checked;
+        if(field.rules.length != undefined && field.rules.length > 1)
             field.rules.forEach(rule => {
                 if (rule._type == "fieldValue") {
                     this.FieldValueRuleMethod(field, rule);
                 }
             });
-
+        else if(field.rules._type ==  "fieldValue"){
+            this.FieldValueRuleMethod(field,field.rules);
+        }
     }
 
     AddvalidationRules(field) {

dmp-frontend/src/app/form/tableOfContents/toc.component.html

@@ -2,9 +2,25 @@
     <nav id="toc" data-toggle="toc">
         <ul class="nav flex-column">
             <li class="nav-item">
-                         <a class="nav-link" *ngFor ="let group of dataModel.groups" href="#group.key">{{group.title}}</a>
+                <div  *ngFor="let group of dataModel.groups">
+                    <ul>
+                        <li><a class="nav-link" href="#group.key">{{group.title}}</a>
+                            <ul *ngFor="let field of group.groupFields">
+                                  <li *ngIf= "field.visible == 'true'" >                                       
+                                      <a class="nav-link"  href="#field.key">{{field.label}}</a>
+                                </li> 
+                            </ul>
+                        </li>
+
+                    </ul>
+                        
+                        
+                </div>               
+
+                        
+
+
             </li>
         </ul>
     </nav>
 </body>
-