From a dynamic Json like below one
[
{
"label": "General",
"data": [
{
"title": "parameters.deviceInfo.name"
},
{
"title": "assetAttributes.manufacturerLabel"
}
]
},
{
"label": "Associated Device",
"data": [
{
"title": "assetAttributes.operationsLabel",
},
{
"title": "assetAttributes.adapterIpAddress",
}
]
},
{
"label": "profile.identificationTabLabel",
"data": [
{
"title": "assetAttributes.assetIdLabel"
}
]
},
{
"label": "profilemunicationTabLabel",
"data": [
{
"title": "profileworkGroupLabel",
},
{
"title": "assetAttributes.gtwAddressLabel",
}
]
},
{
"label": "profile.locationTabLabel",
"data": [
{
"title": "assetAttributes.latitudeLabel"
},
{
"title": "assetAttributes.longitudeLabel"
}
]
},
{
"label": "profile.customersTabLabel",
"data": [
{
"title": "assetAttributes.mRidLabel"
},
{
"title": "assetAttributes.epsNameLabel"
}
]
}
]
want to create reactive form in angular with grouped check box panel with select all for each object. That means when user clicks general checkbox, all the items inside that panel should be checked. Also one select all for selecting all the panel elements in one click.
From a dynamic Json like below one
[
{
"label": "General",
"data": [
{
"title": "parameters.deviceInfo.name"
},
{
"title": "assetAttributes.manufacturerLabel"
}
]
},
{
"label": "Associated Device",
"data": [
{
"title": "assetAttributes.operationsLabel",
},
{
"title": "assetAttributes.adapterIpAddress",
}
]
},
{
"label": "profile.identificationTabLabel",
"data": [
{
"title": "assetAttributes.assetIdLabel"
}
]
},
{
"label": "profilemunicationTabLabel",
"data": [
{
"title": "profileworkGroupLabel",
},
{
"title": "assetAttributes.gtwAddressLabel",
}
]
},
{
"label": "profile.locationTabLabel",
"data": [
{
"title": "assetAttributes.latitudeLabel"
},
{
"title": "assetAttributes.longitudeLabel"
}
]
},
{
"label": "profile.customersTabLabel",
"data": [
{
"title": "assetAttributes.mRidLabel"
},
{
"title": "assetAttributes.epsNameLabel"
}
]
}
]
want to create reactive form in angular with grouped check box panel with select all for each object. That means when user clicks general checkbox, all the items inside that panel should be checked. Also one select all for selecting all the panel elements in one click.
Share Improve this question edited Nov 16, 2024 at 15:33 vijesh asked Nov 16, 2024 at 15:27 vijeshvijesh 1,1712 gold badges13 silver badges29 bronze badges 1- 1 What have you tried so far? – Bojan Kogoj Commented Nov 16, 2024 at 16:27
1 Answer
Reset to default 0It can be done quite easily:
testponent.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-test',
templateUrl: './testponent.html',
styleUrls: ['./testponent.scss']
})
export class TestComponent implements OnInit {
form: FormGroup;
data = [
{
label: "General",
data: [
{ title: "gen 1" },
{ title: "gen 2" }
]
},
{
label: "Associated Device",
data: [
{ title: "dev 1" },
{ title: "dev2" }
]
},
{
label: "Identity",
data: [
{ title: "id1" },
{ title: "id2" }
]
},
{
label: "communication",
data: [
{ title: "network group" },
{ title: "gwt address" }
]
},
{
label: "location",
data: [
{ title: "latitude" },
{ title: "longitude" }
]
}
];
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
selectAllAll: false,
groups: this.fb.array(this.data.map(group => this.createGroup(group)))
});
}
createGroup(group) {
return this.fb.group({
label: group.label,
selectAll: false,
items: this.fb.array(group.data.map(item => this.fb.group({
title: item.title,
selected: false
})))
});
}
get groups() {
return this.form.get('groups') as FormArray;
}
selectAllGroup(groupIndex: number) {
const group = this.groups.at(groupIndex) as FormGroup;
const selectAll = group.get('selectAll').value;
const items = group.get('items') as FormArray;
items.controls.forEach(control => control.get('selected').setValue(selectAll));
}
selectAllGroups() {
const selectAll = this.form.get('selectAllAll').value;
this.groups.controls.forEach(group => {
group.get('selectAll').setValue(selectAll);
const items = group.get('items') as FormArray;
items.controls.forEach(control => control.get('selected').setValue(selectAll));
});
}
}
testponent.html
<form style="color: aliceblue; text-align: center;" [formGroup]="form">
<div>
<input type="checkbox" formControlName="selectAllAll" (change)="selectAllGroups()"> Select All
</div>
<div class="d-flex">
<div formArrayName="groups" *ngFor="let group of groups.controls; let i = index">
<div [formGroupName]="i">
<input type="checkbox" formControlName="selectAll" (change)="selectAllGroup(i)"> {{ group.get('label').value
}}
<div formArrayName="items" *ngFor="let item of group.get('items').controls; let j = index">
<div [formGroupName]="j">
<input type="checkbox" formControlName="selected"> {{ item.get('title').value }}
</div>
</div>
</div>
</div>
</div>
</form>
Now, if you select all, All checkboxes gets selected
And if you select a Tab header, General Tab options get selected