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

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

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，反之亦然。单击submit按钮后，我希望控制台以现在的方式记录数据对象，但“enable”字段的更改值除外。例如，如果用户取消选中数据[0]的复选框。已启用，则我的预期结果将是：

 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 }
 ] 

应用程序组件.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>

{{a.displayName}}


提交

有一个选项可以简单地使用

[（ngModel）]

并避免使用表单。只需使用

这个。数据

---

您可以使用

FormArray

为数据构建表单。使用

valueChanges

收听更改

组件技术

form:FormGroup
私人表格控制：{
资料来源：FormArray；
};
恩戈尼尼特（）{
this.formControls={
data:newformarray（this.data.map（x=>{
返回新表单组({
启用：新表单控件（x.enabled）
});
}))
};
this.formControls.data.valueChanges.subscribe（（）=>{
this.data.forEach（（项目，i）=>{
item.enabled=this.formControls.data.controls[i].get（'enabled'）.value；
});
});
this.form=新表单组（this.formControls）；
}

component.html

{{a.displayName}}


提交

初始表单数组是从数据数组生成的

表单指令反映了表单的结构。请注意

[formGroupName]=“i”

如何绑定到数组中的

i

th表单组

---

演示：

复选框是单独的表单控件，请记住这一点来构建表单组