Merge branch 'master' of git@gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot.git
This commit is contained in:
commit
7ff8e79753
|
@ -13,6 +13,4 @@
|
|||
.ng-invalid:not(form) {
|
||||
border-left: 5px solid #a94442; /* red */
|
||||
}
|
||||
.errorMessage{
|
||||
color:red;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div [formGroup]="form" class="form-group">
|
||||
<div [formGroup]="form" [ngStyle] = "customStyle" [class]="classFromJson" >
|
||||
<h4 [id]= "group.key">{{group.title}}</h4>
|
||||
<div *ngFor="let field of group.groupFields" >
|
||||
<df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
|
||||
|
@ -6,4 +6,4 @@
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->
|
|
@ -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<any>;
|
||||
@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];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -10,7 +10,9 @@ export class GroupBase<T>{
|
|||
order:number;
|
||||
controlType:string;
|
||||
section:string;
|
||||
|
||||
style:string;
|
||||
class: string;
|
||||
|
||||
constructor(options: {
|
||||
value?: T,
|
||||
key?: string,
|
||||
|
@ -20,7 +22,9 @@ export class GroupBase<T>{
|
|||
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<T>{
|
|||
this.order = options.order === undefined ? 1 : options.order;
|
||||
this.controlType = options.controlType || '';
|
||||
this.section = options.section || '';
|
||||
this.style = options.style || '';
|
||||
this.class = options.class || '';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue