带有分组复选框面板的角度反应形式

Question

来自如下动态 Json

 [
    {
        "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": "profile.communicationTabLabel",
        "data": [
            {
                "title": "profile.networkGroupLabel",
            },
            {
                "title": "assetAttributes.gtwAddressLabel",
            }
        ]
    },
    {
        "label": "profile.locationTabLabel",
        "data": [
            {
                "title": "assetAttributes.latitudeLabel"
               
            },
            {
                "title": "assetAttributes.longitudeLabel"
                
            }
            
        ]
    },
    {
        "label": "profile.customersTabLabel",
        "data": [
            {
                "title": "assetAttributes.mRidLabel"
              
            },
            {
                "title": "assetAttributes.epsNameLabel"
            }
        ]
    }
]

想要使用分组复选框面板创建有角度的反应形式，并为每个对象选择全部。这意味着当用户单击常规复选框时，应检查该面板内的所有项目。还可以一键全选，一键选择所有面板元素。

Answer 1

这可以很容易地完成：

测试.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.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));
    });
  }
}

test.component.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>

现在，如果您选择全部， 所有复选框均被选中

如果您选择选项卡标题， 选择常规选项卡选项