From cfe2af60a7d4d8a8248ea3cf3c5f2cd04bc08c43 Mon Sep 17 00:00:00 2001 From: annampak Date: Thu, 5 Oct 2017 15:42:44 +0300 Subject: [PATCH 1/3] css invalid, more than one validators at the same field --- dmp-frontend/src/app/app.component.css | 4 +--- .../src/app/form/dynamic-form.component.ts | 2 +- .../fields/dynamic-form-field.component.html | 10 ++++----- .../fields/dynamic-form-field.component.ts | 22 +++++++++++++------ .../form/tableOfContents/toc.component.html | 2 +- dmp-frontend/src/styles.css | 22 +++++++++++++++++++ 6 files changed, 45 insertions(+), 17 deletions(-) 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.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}}
- - @@ -55,9 +55,9 @@
-
{{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..420d56b56 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) @@ -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); } } 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/styles.css b/dmp-frontend/src/styles.css index 1b86635f8..7fd6f15ea 100644 --- a/dmp-frontend/src/styles.css +++ b/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 */ + } + \ No newline at end of file From 8c44b7c128a78e6ff6cb682843e9f78fe3433953 Mon Sep 17 00:00:00 2001 From: annampak Date: Fri, 6 Oct 2017 17:33:08 +0300 Subject: [PATCH 2/3] dynamic style and class from xml --- .../dynamic-form-group.component.html | 4 +-- .../dynamic-form-group.component.ts | 35 ++++++++++++------- .../app/form/dynamic-form-group/group-base.ts | 10 ++++-- .../fields/dynamic-form-field.component.ts | 4 ++- .../app/services/dataModelBuilder.service.ts | 2 ++ dmp-frontend/src/styles.css | 4 +++ 6 files changed, 42 insertions(+), 17 deletions(-) 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/fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts index 420d56b56..58d0537ff 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 @@ -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 + + } } 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 7fd6f15ea..6fcf8c78c 100644 --- a/dmp-frontend/src/styles.css +++ b/dmp-frontend/src/styles.css @@ -61,4 +61,8 @@ body { .form-control.ng-invalid { border-left: 5px solid #a94442; /* red */ } + + .form-groupCustom { + border: 2px solid #A11515; + } \ No newline at end of file From bc21e8f6d5429052c9a3af6b656637b18b1a63f3 Mon Sep 17 00:00:00 2001 From: annampak Date: Fri, 6 Oct 2017 18:38:19 +0300 Subject: [PATCH 3/3] clear validators and delete errors after hiding the field --- .../app/form/fields/dynamic-form-field.component.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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 58d0537ff..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 @@ -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(); } } } @@ -129,7 +137,7 @@ export class DynamicFormFieldComponent { }); 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 }