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

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.tsimport { 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: FormGroupname = '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。

组件.ts

form: FormGroup

private formControls: {

  data: FormArray;

};

ngOnInit() {

  this.formControls = {

    data: new FormArray(this.data.map(x => {

      return new FormGroup({

        enabled: new FormControl(x.enabled)

      });

    }))

  };

  this.formControls.data.valueChanges.subscribe(() => {

    this.data.forEach((item, i) => {

      item.enabled = this.formControls.data.controls[i].get('enabled').value;

    });

  });

  this.form = new FormGroup(this.formControls);

}

组件.html

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

  <ul class="list-group list-group-flush" formArrayName="data"

    *ngFor="let a of data; index as i">

    <li class="list-group-item" [formGroupName]="i">

      <label>

        <input formControlName="enabled" type="checkbox" />

        {{ a.displayName }}

      </label>

    </li>

  </ul>

  <button>Submit</button>

</form>

初始表单数组是根据您的数据数组构建的。

表单指令反映了表单的结构。请注意如何[formGroupName]="i"绑定到i数组中的第 th 表单组。

演示：https ://stackblitz.com/edit/angular-88kjfq

Answer 2

有一个选项可以简单地使用[(ngModel)]和避免使用表单。一起工作this.data

https://stackblitz.com/edit/angular-ach8xw?file=src%2Fapp%2Fapp.component.html