diff --git a/dmp-frontend/src/app/app.component.css b/dmp-frontend/src/app/app.component.css
index 578792487..28e2fba60 100644
--- a/dmp-frontend/src/app/app.component.css
+++ b/dmp-frontend/src/app/app.component.css
@@ -13,6 +13,4 @@
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
- .errorMessage{
- color:red;
- }
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
index 5eba245c4..bd924121f 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
@@ -1,4 +1,4 @@
-
+
{{group.title}}
@@ -6,4 +6,4 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
index cb2737c43..2cd8885e6 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
+++ b/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
;
@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];
+ }
+ }
+
+
+}
}
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts b/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts
index 750184084..9253017a5 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts
@@ -10,7 +10,9 @@ export class GroupBase{
order:number;
controlType:string;
section:string;
-
+ style:string;
+ class: string;
+
constructor(options: {
value?: T,
key?: string,
@@ -20,7 +22,9 @@ export class GroupBase{
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{
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || '';
this.section = options.section || '';
+ this.style = options.style || '';
+ this.class = options.class || '';
}
}
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 2a533562a..93edfdd41 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/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(
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
index c54268fc0..2c02462e1 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
@@ -32,10 +32,10 @@
{{field.description}}
-
-
-
{{field.label}} is required
-
{{field.label}} must follow a regular expression
-
{{field.label}} custom Valid
+
{{field.label}} is required
+
{{field.label}} must match a regular expression {{field.regex}}
+
{{field.label}} custom Validation
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
index 20a468b6c..ffdbcdad1 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
+++ b/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)
@@ -69,6 +69,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
+ this.form.controls[rule._target].clearValidators(); // when a field is hidden must clear the validators and the errors
+ this.form.controls[rule._target].updateValueAndValidity();
}
}
if (rule._ruleStyle == "checked") { //checkbox field
@@ -77,6 +79,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
+ this.form.controls[rule._target].clearValidators();
+ this.form.controls[rule._target].updateValueAndValidity();
}
}
if (rule._ruleStyle == "existence") {
@@ -85,6 +89,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
+ this.form.controls[rule._target].clearValidators();
+ this.form.controls[rule._target].updateValueAndValidity();
}
}
if (rule._ruleStyle == "regex") {
@@ -93,6 +99,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
+ this.form.controls[rule._target].clearValidators();
+ this.form.controls[rule._target].updateValueAndValidity();
}
}
}
@@ -113,14 +121,24 @@ 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); //Multiple Validators, Usage of array because setValidator override any validators that are provided during initialistaion
+ this.form.controls[field].updateValueAndValidity(); //hide--> visible must update the validators
+
}
}
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
index 40a6f0e3c..f7bb3d402 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
@@ -4,7 +4,7 @@
- - {{group.title}}
+
- {{group.title}}
-
{{field.label}}
diff --git a/dmp-frontend/src/app/services/dataModelBuilder.service.ts b/dmp-frontend/src/app/services/dataModelBuilder.service.ts
index 80d3e7fed..c0cd6b277 100644
--- a/dmp-frontend/src/app/services/dataModelBuilder.service.ts
+++ b/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)
});
}
diff --git a/dmp-frontend/src/styles.css b/dmp-frontend/src/styles.css
index 1b86635f8..6fcf8c78c 100644
--- a/dmp-frontend/src/styles.css
+++ b/dmp-frontend/src/styles.css
@@ -40,3 +40,29 @@ 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 */
+ }
+
+ .form-groupCustom {
+ border: 2px solid #A11515;
+ }
+
\ No newline at end of file