show & hide fields based on user choice-1st fieldgroup
This commit is contained in:
parent
abd360f2c8
commit
5c66c65bdf
|
@ -38,8 +38,8 @@
|
||||||
<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"-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -47,9 +47,7 @@
|
||||||
<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"
|
|
||||||
[value]= "answrBase"/>
|
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue