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"
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>
</select>
<input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
(change)="toggleVisibility($event, field)" #ckb> <!--(change)="field.value = ckb.checked"-->
<input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
(change)="toggleVisibility($event, field, ckb)" #ckb> <!--(change)="field.value = ckb.checked"-->
<div *ngSwitchCase="'radiobox'">
<ng-container *ngFor="let answrBase of field.answers">
<div style="display: inline-block;margin-right:10px;">
<label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label>
<input type="radio" [formControlName]="field.key"
[id] = "answrBase.id"
[value]= "answrBase"/>
</div>
</ng-container>
</div>
<div *ngSwitchCase="'radiobox'">
<ng-container *ngFor="let answrBase of field.answers">
<div style="display: inline-block;margin-right:10px;">
<label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label>
<input type="radio" [formControlName]="field.key" [id]= "answrBase.id" [value]= "answrBase" [(ngModel)]="field.value" (change) = "toggleVisibility($event, field)"/>
</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)
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"){
dataModel.fields.forEach(fld => {
this.dataModel.fields.forEach(fld => {
if (fld.key == rule._target && rule._from< fld.value <rule._to){
console.log("visible"+ fld.value)
field.visible = true;
@ -41,25 +41,32 @@ export class DynamicFormFieldComponent {
});
}
return false;
if (rule._ruleStyle == "boolean"){ //boolean Decision field
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){
// let group:GroupBase<any>;
// group = this.dataModel.groups.find(x => x.key === field.group);
// group.groupFields.forEach(element => {debugger;
// if (element.order == (field.order + 1)){
// element.rules.forEach(element => {
// if (element.target == field.id){
// console.log (element);
// }
// });
// }
// });
// console.log(this.dataModel);
toggleVisibility(e, field, ckb){
console.log(field);debugger;
if(ckb)
field.value = ckb.checked;
field.rules.forEach(rule => {
if (rule._type=="fieldValue"){
this.FieldValueRuleMethod(field, rule);
}
});
}
}

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