MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

show & hide fields based on user choice-1st fieldgroup

This commit is contained in:
annampak 2017-09-19 13:48:00 +03:00
parent abd360f2c8
commit 5c66c65bdf
3 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
View File

@ -34,25 +34,23 @@
<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"
required="field.required" [(ngModel)]="field.value"> required="field.required" [(ngModel)]="field.value">
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key" [(ngModel)]="field.value"> <select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control"[formControlName]="field.key" [(ngModel)]="field.value">
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option> <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
</select> </select>
<input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type" <input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
(change)="toggleVisibility($event, field)" #ckb> <!--(change)="field.value = ckb.checked"--> (change)="toggleVisibility($event, field, ckb)" #ckb> <!--(change)="field.value = ckb.checked"-->
<div *ngSwitchCase="'radiobox'"> <div *ngSwitchCase="'radiobox'">
<ng-container *ngFor="let answrBase of field.answers"> <ng-container *ngFor="let answrBase of field.answers">
<div style="display: inline-block;margin-right:10px;"> <div style="display: inline-block;margin-right:10px;">
<label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label> <label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label>
<input type="radio" [formControlName]="field.key" <input type="radio" [formControlName]="field.key" [id]= "answrBase.id" [value]= "answrBase" [(ngModel)]="field.value" (change) = "toggleVisibility($event, field)"/>
[id] = "answrBase.id" </div>
[value]= "answrBase"/> </ng-container>
</div> </div>
</ng-container>
</div>

45
dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
View File

@ -31,9 +31,9 @@ export class DynamicFormFieldComponent {
if(field.visible == true) if(field.visible == true)
return true; return true;
} }
FieldValueRuleMethod(field, rule, dataModel){ //fieldValue rule -- checks the value of target FieldValueRuleMethod(field, rule){ //fieldValue rule -- checks the value of target
if (rule._ruleStyle == "range"){ if (rule._ruleStyle == "range"){
dataModel.fields.forEach(fld => { this.dataModel.fields.forEach(fld => {
if (fld.key == rule._target && rule._from< fld.value <rule._to){ if (fld.key == rule._target && rule._from< fld.value <rule._to){
console.log("visible"+ fld.value) console.log("visible"+ fld.value)
field.visible = true; field.visible = true;
@ -41,25 +41,32 @@ export class DynamicFormFieldComponent {
}); });
} }
if (rule._ruleStyle == "boolean"){ //boolean Decision field
return false; let ruleValue = rule.value.__text;
if (field.value.value.toString() == ruleValue){
this.dataModel.getFieldByKey(rule._target).visible = true;
}else{
this.dataModel.getFieldByKey(rule._target).visible = false;
}
}
if (rule._ruleStyle == "checked"){ //checkbox field
if (field.value == true){
this.dataModel.getFieldByKey(rule._target).visible = true;
}else{
this.dataModel.getFieldByKey(rule._target).visible = false;
}
}
} }
toggleVisibility(e, field){ toggleVisibility(e, field, ckb){
// let group:GroupBase<any>; console.log(field);debugger;
// group = this.dataModel.groups.find(x => x.key === field.group); if(ckb)
// group.groupFields.forEach(element => {debugger; field.value = ckb.checked;
// if (element.order == (field.order + 1)){ field.rules.forEach(rule => {
// element.rules.forEach(element => { if (rule._type=="fieldValue"){
// if (element.target == field.id){ this.FieldValueRuleMethod(field, rule);
// console.log (element); }
// } });
// });
// }
// });
// console.log(this.dataModel);
} }
} }

7
dmp-frontend/src/app/services/dataModelBuilder.service.ts
View File

@ -25,6 +25,7 @@ export class dataModelBuilder {
this.fields = this.buildFields(data.dataset.profile.viewstyle.definition.root.fields.field); this.fields = this.buildFields(data.dataset.profile.viewstyle.definition.root.fields.field);
this.dataModel.groups = this.getGroups(data.dataset.profile.viewstyle.definition.root.fieldGroups.fieldGroup, fldGroup, this.fields); this.dataModel.groups = this.getGroups(data.dataset.profile.viewstyle.definition.root.fieldGroups.fieldGroup, fldGroup, this.fields);
//this.getDummyGroups(); //this.getDummyGroups();
this.dataModel.buildIndex();
return this.dataModel; return this.dataModel;
} }
@ -97,11 +98,13 @@ export class dataModelBuilder {
answers: [ answers: [
{ {
id: 1, id: 1,
answer: "Yes" answer: "Yes",
value: true
}, },
{ {
id: 2, id: 2,
answer: "No" answer: "No",
value:false
}] }]
}); });
fieldsVisible.push(newfield); fieldsVisible.push(newfield);