admin管理员组

文章数量:1026989

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.

  • javascript
  • arrays
  • angular
  • checkbox
  • angular-reactive-forms
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
Add a comment  | 

1 Answer 1

Reset to default 0

It 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

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.

  • javascript
  • arrays
  • angular
  • checkbox
  • angular-reactive-forms
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
Add a comment  | 

1 Answer 1

Reset to default 0

It 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

本文标签： javascriptReactive form in angular with grouped check box panelStack Overflow

版权声明：本文标题：javascript - Reactive form in angular with grouped check box panel - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745654654a2161525.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。