From 6c0d9946eec776937e36af9953dcd099210a4993 Mon Sep 17 00:00:00 2001 From: annampak Date: Wed, 4 Oct 2017 12:39:45 +0300 Subject: [PATCH] Progress bar improvements, validators --- .../src/app/entities/common/rulestyle.ts | 3 +- .../src/app/form/dynamic-form.component.html | 3 +- .../src/app/form/dynamic-form.component.ts | 71 +++++++----- .../fields/dynamic-form-field.component.ts | 103 ++++++++++++------ .../src/app/form/fields/field-base.ts | 4 +- .../app/services/dataModelBuilder.service.ts | 4 +- .../src/app/services/field-control.service.ts | 8 +- 7 files changed, 121 insertions(+), 75 deletions(-) diff --git a/dmp-frontend/src/app/entities/common/rulestyle.ts b/dmp-frontend/src/app/entities/common/rulestyle.ts index b0c3b204a..5097a69db 100644 --- a/dmp-frontend/src/app/entities/common/rulestyle.ts +++ b/dmp-frontend/src/app/entities/common/rulestyle.ts @@ -1,5 +1,6 @@ export enum RuleStyle { existence, - regex + regex, + customValidation } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index ac74afb9a..6fb122208 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -50,11 +50,10 @@
- {{dirtyValues}}
- {{dirtyValues}} + {{dirtyValues}}%
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index 79398eff9..2a533562a 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/dmp-frontend/src/app/form/dynamic-form.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core'; import { FormGroup, Validators } from '@angular/forms'; import { NgForm } from '@angular/forms'; -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import 'rxjs/add/operator/switchMap'; //import { FieldBase } from '../../app/form/fields/field-base'; @@ -20,52 +20,64 @@ import { GroupBase } from './dynamic-form-group/group-base'; export class DynamicFormComponent implements OnInit { @Input() dataModel: DataModel = new DataModel(); - form: FormGroup; - payLoad = ''; - @Input() dirtyValues:number = 0; + form: FormGroup; + payLoad = ''; + @Input() dirtyValues: number = 0; - constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) { + constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) { this.form = this.qcs.toFormGroup(new Array(), new Array()); } - - - getSubForm(subformName){ + + + getSubForm(subformName) { return this.form.controls[subformName]; } - - + + ngOnInit() { console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN"); - - + + this.serverService.getData() .subscribe( (data: any[]) => { - + console.log("this.serverService.getFields"); - + this.dataModel = new DataModel(); this.dataModel = this.dataModelService.getDataModel(data); - + this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups); + this.form.valueChanges.subscribe(data => { - console.log('Form changes', data); + // console.log('Form changes', data); let dirtyValuesArray: Array = []; let count = 0; - Object.keys(this.form.controls).forEach((c) => { - count++; - let currentControl = this.form.controls[c]; - if(currentControl.dirty) - dirtyValuesArray.push(currentControl.value); - - }); - var percentage = Math.floor(dirtyValuesArray.length * 100 / count); - this.dirtyValues = percentage; + let countDirtyValues = 0; + Object.keys(this.form.controls).forEach((c) => { + //count++; + let currentControl = this.form.controls[c]; + if (currentControl.dirty) + dirtyValuesArray.push(currentControl.value); + + }); + this.dataModel.groups.forEach(grp => { + grp.groupFields.forEach((fld) => { + if (fld.visible == true || fld.visible == "true") + count++; + if(fld.value != undefined) + countDirtyValues++; + }); + }); + //console.log(count); + // var percentage = Math.floor(dirtyValuesArray.length * 100 / count); + var percentage = Math.floor(countDirtyValues * 100 / count); + this.dirtyValues = percentage; }) - + //this.form = this.qcs.toFormGroup(this.fields); - + console.log("SUMMARY: ======>"); console.log(this.dataModel); console.log(this.form); @@ -74,7 +86,7 @@ export class DynamicFormComponent implements OnInit { }, (error) => console.log(error) ); - + } onSubmit() { @@ -91,7 +103,8 @@ export class DynamicFormComponent implements OnInit { this.onValueChanged(); // (re)set validation messages now } - onValueChanged(data?: any) {debugger; + onValueChanged(data?: any) { + debugger; if (!this.form) { return; } const form = this.form; 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 b70087e5b..0104b2ac4 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,10 +1,11 @@ import { DataModel } from '../../entities/DataModel'; import { Component, Input, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; +import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms'; -import { FieldBase } from './field-base'; +import { FieldBase } from './field-base'; import { GroupBase } from '../../form/dynamic-form-group/group-base'; import { DropdownField } from '../../form/fields/dropdown/field-dropdown'; +import { RuleStyle } from '../../entities/common/rulestyle'; @Component({ @@ -16,67 +17,99 @@ export class DynamicFormFieldComponent { @Input() dataModel: DataModel; @Input() field: FieldBase; @Input() form: FormGroup; - - get isValid() { debugger; - return this.form.controls[this.field.key].valid; + + get isValid() { + return this.form.controls[this.field.key].valid; + } + get isValidRequired() { + return this.form.controls[this.field.key].hasError("required"); + } + get isValidPattern() { + return this.form.controls[this.field.key].hasError("pattern"); + } + get isValidCustom() { + return this.form.controls[this.field.key].hasError("forbiddenName"); } public ngOnInit() { //dropdown lists take only one of the available sources - for (var i=0, len = this.dataModel.groups.length; ix.controlType == "dropdown"); - if(dropdownField != undefined){ - if(dropdownField.attributes.sources != undefined) - dropdownField.options = dropdownField.attributes.sources[0].params; + for (var i = 0, len = this.dataModel.groups.length; i < len; i++) { + let dropdownField: any; + dropdownField = this.dataModel.groups[i].groupFields.find(x => x.controlType == "dropdown"); + if (dropdownField != undefined) { + if (dropdownField.attributes.sources != undefined) + dropdownField.options = dropdownField.attributes.sources[0].params; } - + } } - ruleVisibleMethod(field, rule, dataModel){ //visibility rule -- checks if target field is visible + ruleVisibleMethod(field, rule, dataModel) { //visibility rule -- checks if target field is visible dataModel.fields.forEach(fld => { if (fld.label == rule._target && fld.visible == true) field.visible = true; }); - if(field.visible == true) + 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 + if (rule._ruleStyle == "range") { this.dataModel.fields.forEach(fld => { - if (fld.key == rule._target && rule._from< fld.value { - if (rule._type=="fieldValue"){ + field.rules.forEach(rule => { + if (rule._type == "fieldValue") { this.FieldValueRuleMethod(field, rule); - } - }); + } + }); - } + } + + AddvalidationRules(field) { + if (this.dataModel.getFieldByKey(field).attributes.validation != undefined) { + this.dataModel.getFieldByKey(field).attributes.validation.forEach(rule => { + if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence]) + this.dataModel.getFieldByKey(field).required = true; + 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)); + }); + } + + } + + forbiddenNameValidator(nameRe: RegExp): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } => { + const forbidden = nameRe.test(control.value); + return forbidden ? { 'forbiddenName': { value: control.value } } : null; + }; + } } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/fields/field-base.ts b/dmp-frontend/src/app/form/fields/field-base.ts index 7b1e9299a..1eb4466cd 100644 --- a/dmp-frontend/src/app/form/fields/field-base.ts +++ b/dmp-frontend/src/app/form/fields/field-base.ts @@ -8,7 +8,7 @@ export class FieldBase{ required:boolean; order:number; rules: Rule[]; - visible: boolean; + visible: boolean | string; controlType:string; group:string; description:string; @@ -22,7 +22,7 @@ export class FieldBase{ required?:boolean, order?: number, rules?: Rule[], - visible?: boolean, + visible?: boolean | string, controlType?: string group?: string description?: string, diff --git a/dmp-frontend/src/app/services/dataModelBuilder.service.ts b/dmp-frontend/src/app/services/dataModelBuilder.service.ts index 805ed2971..80d3e7fed 100644 --- a/dmp-frontend/src/app/services/dataModelBuilder.service.ts +++ b/dmp-frontend/src/app/services/dataModelBuilder.service.ts @@ -75,7 +75,7 @@ export class dataModelBuilder { newfield = new CheckBoxField({ label: element.title.__cdata, key:element._id, - value: true, + value: element.value, order:element._ordinal, rules: element.visible.rule != undefined ? element.visible.rule: rule, visible: element._defaultVisibility, @@ -91,7 +91,7 @@ export class dataModelBuilder { newfield = new RadioBoxField({ label: element.title.__cdata, key:element._id, - value: true, + value: element.value, order:element._ordinal, rules: element.visible.rule != undefined ? element.visible.rule: rule, visible: element._defaultVisibility, diff --git a/dmp-frontend/src/app/services/field-control.service.ts b/dmp-frontend/src/app/services/field-control.service.ts index e9d47b087..06c751b63 100644 --- a/dmp-frontend/src/app/services/field-control.service.ts +++ b/dmp-frontend/src/app/services/field-control.service.ts @@ -29,16 +29,16 @@ export class FieldControlService { }); //PLEASE CHANGE THE group.key TO BE SAME AS THE ONE ON THE DYNAMIC-FORM-GROUP-COMPONENT.html form[group.key] = new FormGroup(subgroup); - console.log("FORM_GROUP_GROUP: "); - console.log(form); + //console.log("FORM_GROUP_GROUP: "); + //console.log(form); }); //add also the spare fields into the form fields.forEach(field => { form[field.key] = field.required ? new FormControl(field.value || '', Validators.required) : new FormControl(field.value || '') }); - console.log("FORM_GROUP: "); - console.log(form); + //console.log("FORM_GROUP: "); + //console.log(form); return new FormGroup(form); }