unchecked rule visibility

This commit is contained in:
annampak 2017-11-07 10:04:59 +02:00
parent 728c21a515
commit b679a5fa5f
3 changed files with 60 additions and 101 deletions

View File

@ -29,7 +29,7 @@
<div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType"> <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
<div [ngClass]="{true:'show', false:'hide'}[field.visible]"> <div [ngClass]="{true:'show', false:'hide'}[field.visible]">
<label [attr.for]="field.key">{{field.label}}</label> <label *ngIf="field.controlType != 'checkbox'" [attr.for]="field.key">{{field.label}}</label>
<div>{{field.description}}</div> <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"
@ -37,12 +37,17 @@
on change event the listener is triggered on blur --> on change event the listener is triggered on blur -->
<select *ngSwitchCase="'dropdown'" class="form-control" [id]="field.key" [formControlName]="field.key" [required]="field.required"> <select *ngSwitchCase="'dropdown'" class="form-control" [id]="field.key" [formControlName]="field.key" [required]="field.required">
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option> <option *ngFor="let opt of field.options" [value]="opt.key" (change)="toggleVisibility($event, field, true)" >{{opt.value}}</option>
</select> </select>
<input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [type]="field.type" <div *ngSwitchCase="'checkbox'" class="checkbox">
(change)="toggleVisibility($event, field, true)" [required]="field.required" [checked]="form.get(field.key).value"> <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility <label class="checkBoxLabelCustom">
// without property [checked] as pages change the checkboxes of the previous pages lose the checked pro [checked] = "field.value" #ckb --> <input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [type]="field.type"
(change)="toggleVisibility($event, field, true)" [required]="field.required" [checked]="form.get(field.key).value">{{field.label}} <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility
// without property [checked] as pages change the checkboxes of the previous pages lose the checked pro [checked] = "field.value" #ckb -->
</label>
</div>
<textarea *ngSwitchCase="'textarea'" class="form-control" [formControlName]="field.key" [id]="field.key" <textarea *ngSwitchCase="'textarea'" class="form-control" [formControlName]="field.key" [id]="field.key"
[required]="field.required" (ngModelChange) = "toggleVisibility($event, field,false)"> </textarea> [required]="field.required" (ngModelChange) = "toggleVisibility($event, field,false)"> </textarea>

View File

@ -11,7 +11,8 @@ import { RuleStyle } from '../../entities/common/rulestyle';
@Component({ @Component({
selector: 'df-field', selector: 'df-field',
templateUrl: './dynamic-form-field.component.html' templateUrl: './dynamic-form-field.component.html',
styles:['.checkBoxLabelCustom {font-weight: 700;}']
}) })
export class DynamicFormFieldComponent { export class DynamicFormFieldComponent {
@ -91,7 +92,7 @@ export class DynamicFormFieldComponent {
this.hideField(targetField, rule); this.hideField(targetField, rule);
} }
} }
if (rule._ruleStyle == "checked") { //checkbox field if (rule._ruleStyle == "checked") { //checkbox field
if (field.value == true) { if (field.value == true) {
targetField.visible = true; targetField.visible = true;
this.AddvalidationRules(rule._target); this.AddvalidationRules(rule._target);
@ -99,6 +100,17 @@ export class DynamicFormFieldComponent {
this.hideField(targetField, rule); this.hideField(targetField, rule);
} }
} }
if (rule._ruleStyle == "unchecked") { //checkbox field
if (field.value !=="") {
if (field.value == false) {
targetField.visible = true;
this.AddvalidationRules(rule._target);
} else {
this.hideField(targetField, rule);
}
}
}
if (rule._ruleStyle == "existence") { if (rule._ruleStyle == "existence") {
if (field.visible == "true" || field.visible == true) { if (field.visible == "true" || field.visible == true) {
targetField.visible = true; targetField.visible = true;

View File

@ -115,7 +115,7 @@ export class dataModelBuilder {
}] }]
}); });
fieldsVisible.push(newfield); fieldsVisible.push(newfield);
}else if (element.viewStyle._renderstyle == "textarea") { } else if (element.viewStyle._renderstyle == "textarea") {
let newfield: FieldBase<any>; let newfield: FieldBase<any>;
let rule = new Rule(); let rule = new Rule();
newfield = new TextAreaField({ newfield = new TextAreaField({
@ -136,17 +136,17 @@ export class dataModelBuilder {
return fieldsVisible; return fieldsVisible;
} }
private getGroups(fieldGroups: any, fields: any[] , dataValues) { private getGroups(fieldGroups: any, fields: any[], dataValues) {
let groups: GroupBase<any>[] = []; let groups: GroupBase<any>[] = [];
if (fieldGroups.length > 1) { if (fieldGroups.length > 1) {
fieldGroups.forEach(fieldGroup => { // each fiedgroup fills with its fields from json fieldGroups.forEach(fieldGroup => { // each fiedgroup fills with its fields from json
let newfldGroup = new GroupBase(); let newfldGroup = new GroupBase();
newfldGroup.groupFields = new Array(); newfldGroup.groupFields = new Array();
fields.forEach(field => { fields.forEach(field => {
if (fieldGroup._id == field.group) { if (fieldGroup._id == field.group) {
if(dataValues!="") if (dataValues != "")
if(dataValues[fieldGroup._id][field.key] != undefined) // to put values in fields if (dataValues[fieldGroup._id][field.key] != undefined) // to put values in fields
field.value = dataValues[fieldGroup._id][field.key].value == undefined ? dataValues[fieldGroup._id][field.key] : dataValues[fieldGroup._id][field.key].value; field.value = dataValues[fieldGroup._id][field.key].value == undefined ? dataValues[fieldGroup._id][field.key] : dataValues[fieldGroup._id][field.key].value;
newfldGroup.groupFields.push(field); newfldGroup.groupFields.push(field);
} else { } else {
@ -182,52 +182,6 @@ export class dataModelBuilder {
} }
private getDummyGroups() {
let groups: GroupBase<any>[] = [];
let group: GroupBase<any>;
group = new GroupBase<any>({
key: "adfgadfsg",
title: "GroupA",
rules: new Array(),
groupFields: new Array(),
value: "value",
visible: true,
order: 1
//,
//controlType: "none"
});
let newfield1: FieldBase<any>;
newfield1 = new TextboxField({
key: "tf1-455",
label: "Field from group1",
value: 'this is a groupfield',
required: true,
ordinal: 1
});
group.groupFields.push(newfield1);
let newfield2: FieldBase<any>;
newfield2 = new TextboxField({
key: "tf1-443",
label: "Another field from group1",
value: 'this is a groupfield',
required: true,
ordinal: 2
});
group.groupFields.push(newfield2);
groups.push(group);
return groups;
}
private getFieldsAttributes(attributes: any, functions: any, fields: any[]) { private getFieldsAttributes(attributes: any, functions: any, fields: any[]) {
let attribute: Attribute[] = []; let attribute: Attribute[] = [];
attributes.forEach(attr => { attributes.forEach(attr => {
@ -247,10 +201,7 @@ export class dataModelBuilder {
if (attr.sources.source.length != undefined) { if (attr.sources.source.length != undefined) {
for (var i = 0; i < attr.sources.source.length; i++) { for (var i = 0; i < attr.sources.source.length; i++) {
if (attr.sources.source[i].url !== undefined) { if (attr.sources.source[i].url !== undefined) {
fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source[i].url._value; fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source[i].url._value;
this.restBase.proxy_get(attr.sources.source[i].url._value).subscribe((data) => { this.restBase.proxy_get(attr.sources.source[i].url._value).subscribe((data) => {
console.log(data); console.log(data);
newAttribute.sources.forEach(src => { newAttribute.sources.forEach(src => {
@ -283,10 +234,7 @@ export class dataModelBuilder {
} }
if (attr.sources.source.url !== undefined) { if (attr.sources.source.url !== undefined) {
fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source.url._value; fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source.url._value;
this.restBase.proxy_get(attr.sources.source.url._value).subscribe((data) => { this.restBase.proxy_get(attr.sources.source.url._value).subscribe((data) => {
console.log(data); console.log(data);
newAttribute.sources.forEach(src => { newAttribute.sources.forEach(src => {
@ -311,52 +259,46 @@ export class dataModelBuilder {
src.params.push(prm); src.params.push(prm);
} }
}); });
} }
} }
if(attr.validation.rule != undefined)
if (attr.validation.rule.length)
for (var i = 0, len = attr.validation.rule.length; i < len; i++) {
let rule = new Rule();
rule.ruleStyle = attr.validation.rule[i]._ruleStyle;
rule.ruleType = attr.validation.rule[i]._type;
if (attr.validation.rule[i]._ruleStyle == "regex")
rule.regex = attr.validation.rule[i].__cdata;
if (attr.validation.rule[i]._ruleStyle == "customValidation") {
rule.method = attr.validation.rule[i]._method;
functions.forEach(fnc => {
if (fnc._id == rule.method)
rule.methodJs = fnc.script.__cdata;
});
}
newAttribute.validation.push(rule);
if (attr.validation.rule.length)
for (var i = 0, len = attr.validation.rule.length; i < len; i++) {
let rule = new Rule();
rule.ruleStyle = attr.validation.rule[i]._ruleStyle;
rule.ruleType = attr.validation.rule[i]._type;
if (attr.validation.rule[i]._ruleStyle == "regex")
rule.regex = attr.validation.rule[i].__cdata;
if (attr.validation.rule[i]._ruleStyle == "customValidation") {
rule.method = attr.validation.rule[i]._method;
functions.forEach(fnc => {
if (fnc._id == rule.method)
rule.methodJs = fnc.script.__cdata;
});
} }
else {
if (attr.validation.rule) {
let rule = new Rule();
rule.ruleStyle = attr.validation.rule._ruleStyle;
rule.ruleType = attr.validation.rule._type;
if (attr.validation.rule._ruleStyle == "regex")
rule.regex = attr.validation.rule.__cdata;
if (attr.validation.rule._ruleStyle == "customValidation") {
rule.method = attr.validation.rule._method;
functions.forEach(fnc => {
if (fnc._id == rule.method)
rule.methodJs = fnc.__cdata;
});
newAttribute.validation.push(rule); }
}
else {
if (attr.validation.rule) {
let rule = new Rule();
rule.ruleStyle = attr.validation.rule._ruleStyle;
rule.ruleType = attr.validation.rule._type;
if (attr.validation.rule._ruleStyle == "regex")
rule.regex = attr.validation.rule.__cdata;
if (attr.validation.rule._ruleStyle == "customValidation") {
rule.method = attr.validation.rule._method;
functions.forEach(fnc => {
if (fnc._id == rule.method)
rule.methodJs = fnc.__cdata;
});
newAttribute.validation.push(rule);
} }
newAttribute.validation.push(rule);
} }
}
attribute.push(newAttribute); attribute.push(newAttribute);
//if (fields.find(x => x.key == newAttribute.id).url.url == null) //if (fields.find(x => x.key == newAttribute.id).url.url == null)