css invalid, more than one validators at the same field

dmp-frontend/src/app/app.component.css

@@ -13,6 +13,4 @@
   .ng-invalid:not(form)  {
     border-left: 5px solid #a94442; /* red */
   }
-  .errorMessage{
-    color:red;
-  }
+  

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

@@ -37,7 +37,7 @@ export class DynamicFormComponent implements OnInit {
   ngOnInit() {
 
     console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
-
+    let id = this.route.snapshot.paramMap.get('id'); //get the project id
 
     this.serverService.getData()
       .subscribe(

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

@@ -32,10 +32,10 @@
     <label [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"
+    <input  *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
        [(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">
+    <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>
     </select>
 
@@ -55,9 +55,9 @@
     </div>  
 
     <div [hidden]="isValid">
-      <div *ngIf="isValidRequired">{{field.label}} is required</div>
-      <div *ngIf="isValidPattern">{{field.label}} must follow a regular expression</div>
-      <div *ngIf="isValidCustom">{{field.label}} custom Valid</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidRequired">{{field.label}} is required</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidPattern">{{field.label}} must match a regular expression {{field.regex}}</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidCustom">{{field.label}} custom Validation</div>
     </div>
 
     

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

@@ -1,6 +1,6 @@
 import { DataModel } from '../../entities/DataModel';
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
+import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
 
 import { FieldBase } from './field-base';
 import { GroupBase } from '../../form/dynamic-form-group/group-base';
@@ -52,8 +52,8 @@ export class DynamicFormFieldComponent {
         if (field.visible == true)
             return true;
     }
-    FieldValueRuleMethod(field, rule) { //fieldValue  rule -- checks the value of target
-        if (rule._ruleStyle == "range") {
+    FieldValueRuleMethod(field, rule) { //fieldValue  rule -- checks the value of target and apply rules, at the same time when the field becomes visible
+        if (rule._ruleStyle == "range") { //calling the AddvalidationRules we apply the validation rules for the new field
             this.dataModel.fields.forEach(fld => {
                 if (fld.key == rule._target && rule._from < fld.value < rule._to) {
                     console.log("visible" + fld.value)
@@ -113,14 +113,22 @@ export class DynamicFormFieldComponent {
 
     AddvalidationRules(field) {
         if (this.dataModel.getFieldByKey(field).attributes.validation != undefined) {
+            let arrayVal = new Array();
             this.dataModel.getFieldByKey(field).attributes.validation.forEach(rule => {
-                if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence])
+                if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence]){
                     this.dataModel.getFieldByKey(field).required = true;
-                if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.regex])
+                    arrayVal.push(Validators.required);       
+                }                    
+                if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.regex]){
                     this.dataModel.getFieldByKey(field).regex = rule.regex;
-                if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.customValidation])
-                   this.form.controls[field].setValidators(this.forbiddenNameValidator(/bob/i));
+                    arrayVal.push(Validators.pattern(rule.regex));  
+                }                    
+                if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.customValidation]){
+                     arrayVal.push(this.forbiddenNameValidator(/nothing/i));                    
+                }
+                   
             });
+            this.form.controls[field].setValidators(arrayVal);
         }
 
     }

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

@@ -4,7 +4,7 @@
             <li class="nav-item">
                 <div  *ngFor="let group of dataModel.groups">
                     <ul>
-                        <li><a class="nav-link" href="#group.key">{{group.title}}</a>
+                        <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>

dmp-frontend/src/styles.css

@@ -40,3 +40,25 @@ body {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+  .errorMessage{
+    color:red;
+  }
+
+  .form-control.is-invalid{
+    border-color: #dc3545
+  }
+
+  .invalid-feedbackCustom {
+    margin-top: .25rem;
+    font-size: 1.2rem;
+    color: #dc3545;
+  }
+
+  .ng-valid[required], .ng-valid.required  {
+    border-left: 5px solid #42A948; /* green */
+  }
+  
+  .form-control.ng-invalid  {
+    border-left: 5px solid #a94442; /* red */
+  }
+