AnsweredAssumed Answered

Check Box Group Stencil

Question asked by anitapatil.bld@gmail.com on Oct 29, 2018

Hi All,

 

I have a requirement to bring multiple check box from APS to UI

 

For this

Created multiple-check-box stencil in APS

 

1. Added the json data(id, name property) to the property section of the stencil.

2. Fetched the json data using “this.field.params.customProperties.checkBoxValues” and parsed it.

3. And in html in ngFor called the checkBoxValues.

 

Multiple check box are listed in UI

 

 

Now I wanted to apply visibility conditions.

 

If the onecheck box values (multiple-check-box stencil) configured with visibility condition for multiple pallet elements it should display all the pallete elments which i configured based on click of each check box values.

 

My component.ts is

 

import { Component, OnInit } from '@angular/core';
import { WidgetComponent, FormService, FormFieldModel } from '../../../core';
import { WidgetVisibilityService } from '../../../core/form/services/widget-visibility.service';
import { FormArray } from '../../../../../node_modules/@angular/forms';

@Component({
selector: 'multiple-check-box',
templateUrl: './multiple-check-box.component.html',
styleUrls: ['./multiple-check-box.component.scss']
})
export class MultipleCheckBoxComponent extends WidgetComponent implements OnInit {
checkBoxValues: string;
checkBoxArray = [];
interests = [];
rightValue: string;

constructor(private visibilityService: WidgetVisibilityService, public formService: FormService) {
super(formService);
}
onChange(event,field) {
let result: FormFieldModel[] = this.field.form.getFormFields();
for (let i = 0; i < result.length; i++) {
if (result[i].visibilityCondition != undefined && result[i].visibilityCondition.leftFormFieldId === this.field.id) {
this.rightValue = result[i].visibilityCondition.rightValue;
if (event.checked) {
this.interests.push(field);
for(let j=0;j<this.interests.length;j++){
if(event.source.value == this.interests[j].name){
this.interests[j].checked = true;
}
if (this.interests[j].name === this.rightValue && this.interests[j].checked === true) {
this.field.value = this.interests[j].name;
this.visibilityService.refreshVisibility(this.field.form);

}
}

}
else {
const i = this.interests.findIndex(x => x === event.source.value);
this.interests.splice(i, 1);
if(this.interests.length>0){
for(let j=0;j<this.interests.length;j++){
if(event.source.value = this.interests[j].name){
this.interests[j].checked = true;
}
if (this.interests[j].name == this.rightValue && this.interests[j].checked == true) {
this.field.value = this.interests[j].name;
this.visibilityService.refreshVisibility(this.field.form);
}
else {
this.field.value = '';
this.visibilityService.refreshVisibility(this.field.form);

}
}
}
else {
this.field.value = '';
this.visibilityService.refreshVisibility(this.field.form);

}
}
}
}
}
ngOnInit() {
this.checkBoxValues=JSON.parse(this.field.params.customProperties.checkBoxValues);
console.log("checkBoxValues=="+this.checkBoxValues);
}

}

 

 My component.html is

 

<div [ngClass]="field.className" *ngFor="let field of checkBoxValues">
<mat-checkbox
[id]="field.id"
color="primary"
[required]="field.required"
[disabled]="field.readOnly || readOnly"
[(ngModel)]="field.value"
(change)="onChange($event,field)"
[value]="field.name"
>
{{field.name}}
<span *ngIf="field.required">*</span>
</mat-checkbox>
</div>

 

I have attached the app also.

 

Can any one give the solution?

 

Ciju Joseph Denys Vuika

Attachments

Outcomes