如何从复选框列表中返回所有选中和未选中的值？

Question

stackblitz 示例 我正在使用以下数据对象创建复选框列表：

data = [

 { Key: "class_id", displayName: "Section ID", enabled: true },

 { Key: "room_l4", displayName: "Location", enabled: false },

 { Key: "section", displayName: "Section", enabled: true },

 { Key: "section_2", displayName: "Section 2", enabled: true },

 { Key: "campus", displayName: "Description", enabled: true }

 ] 

当用户选择复选框时，我想将“启用”从 false 更改为 true，反之亦然。单击提交按钮后，我想以现在的方式控制台记录数据对象，除了“启用”字段的更改值。例如，如果用户取消选中 data[0].enabled 的复选框，那么我的预期结果将是：

 data = [

 { Key: "class_id", displayName: "Section ID", enabled:false },

 { Key: "room_l4", displayName: "Location", enabled: false },

 { Key: "section", displayName: "Section", enabled: true },

 { Key: "section_2", displayName: "Section 2", enabled: true },

 { Key: "campus", displayName: "Description", enabled: true }

 ] 

app.component.ts

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent implements OnInit {

myForm: FormGroup

name = 'Angular';

data = [

  { Key: "class_id", displayName: "Section ID", enabled: true },

  { Key: "room_l4", displayName: "Location", enabled: false },

  { Key: "section", displayName: "Section", enabled: true },

  { Key: "section_2", displayName: "Section 2", enabled: true },

  { Key: "campus", displayName: "Description", enabled: true }

  ]

  onSubmit(e){

  console.log(e)

  }

  ngOnInit() {

  this.myForm = new FormGroup({

  name: new FormControl('valu'),

  });

  }

  }

app.component.html

    <form  [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">

     <ul class="list-group list-group-flush" *ngFor="let a of data">

        <li class="list-group-item">

          <input

            formControlName="name" 

            (click)="onSubmit()"

            type="checkbox"

            [checked]="a.enabled"

          />

          {{ a.displayName }}

        </li>

      </ul>

      <button>Submit</button>

      </form>

Answer 1

FormArray您可以使用 a为您的数据构建表单。使用 收听变化valueChanges。组件.tsform: FormGroupprivate formControls: {&nbsp; data: FormArray;};ngOnInit() {&nbsp; this.formControls = {&nbsp; &nbsp; data: new FormArray(this.data.map(x => {&nbsp; &nbsp; &nbsp; return new FormGroup({&nbsp; &nbsp; &nbsp; &nbsp; enabled: new FormControl(x.enabled)&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }))&nbsp; };&nbsp; this.formControls.data.valueChanges.subscribe(() => {&nbsp; &nbsp; this.data.forEach((item, i) => {&nbsp; &nbsp; &nbsp; item.enabled = this.formControls.data.controls[i].get('enabled').value;&nbsp; &nbsp; });&nbsp; });&nbsp; this.form = new FormGroup(this.formControls);}组件.html<form&nbsp; [formGroup]="form" (ngSubmit)="onSubmit(myForm)">&nbsp; <ul class="list-group list-group-flush" formArrayName="data"&nbsp; &nbsp; *ngFor="let a of data; index as i">&nbsp; &nbsp; <li class="list-group-item" [formGroupName]="i">&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; <input formControlName="enabled" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; {{ a.displayName }}&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; </li>&nbsp; </ul>&nbsp; <button>Submit</button></form>初始表单数组是根据您的数据数组构建的。表单指令反映了表单的结构。请注意如何[formGroupName]="i"绑定到i数组中的第 th 表单组。演示：https ://stackblitz.com/edit/angular-88kjfq

Answer 2

有一个选项可以简单地使用[(ngModel)]和避免使用表单。一起工作this.datahttps://stackblitz.com/edit/angular-ach8xw?file=src%2Fapp%2Fapp.component.html