From cfe2af60a7d4d8a8248ea3cf3c5f2cd04bc08c43 Mon Sep 17 00:00:00 2001 From: annampak Date: Thu, 5 Oct 2017 15:42:44 +0300 Subject: [PATCH] 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