Angular 角度复选框列表不工作

我想创建一个复选框列表，如下所示。我想显示一个复选框和名称，提交时我想获得所有选定的值。我无法显示名称并在复选框上设置选定值

[] Jim 
[x] Mondo
[] Ann

我创建了以下代码：

  <div *ngIf="formSubmitted && teamForm.pristine" class = "submitted"> Form submitted successfully. </div>
<div class="team">
  <form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
    <div class="all-emp">
      <b> Employees in Team :{{empFormArray.controls.length}}</b><br><br>
      <div formArrayName="empFormArray"> 
        <div *ngFor = "let emp of empFormArray.controls; let idx = index" [formGroupName]="idx" class="employee">
          <p> <b>Employee : {{idx + 1}}</b> </p>
            <p>Emp Id : <input type="checkbox" [value]="emp.isSelected"  formControlName="name">{{emp.name}}</p>
        </div>
      </div>

    </div> <br/>
 <button [disabled]="teamForm.invalid">SUBMIT</button>

---

我建议使用。这使得使用检查表变得非常简单。

您正在将包含您的

名称和
的对象
推送到您的正式阵列：

让obj={
姓名:姓名,，
已选定：已选定
}
设fg=this.formBuilder.group({
姓名：[obj]//这里！
});
本次临时推送（fg）；

您想要的是将
obj
按原样推送到formArray，因此：

让fg=this.formBuilder.group({
姓名:姓名,，
已选定：已选定
});

您还需要修改模板，并将复选框中的formcontrol设置为
isSelected
，而不是
name
，同时删除
[value]
。另外请注意，我们需要在模板中使用
控件
，以访问您的员工姓名。因此，改变：

{{emp.name}

致：

{{emp.controls.name.value}

这将解决您的问题：）

仅供参考。OP要求的是Angular2+版本，而不是angularjs.Ok。在那种情况下，公认的答案更为恰当。谢谢。我花了一些时间，但没能想出如何解决这个问题。你搞定了。很好的解决方案：）@PankajParkar谢谢你，我有我的大脑实际工作的时刻：感谢解决方案，这正是我想要实现的。太棒了！很高兴听到！：）
export class CheckboxlistComponent implements OnInit {

  teamForm:FormGroup;
  formSubmitted = false;

  constructor(
       private formBuilder:FormBuilder) { 
  }

  ngOnInit() {
      this.createTeamForm();
      this.addEmployee('00', true);
      this.addEmployee('99', false);
      this.addEmployee('77', false);
  }

createTeamForm(){
      this.teamForm = this.formBuilder.group({
      empFormArray: this.formBuilder.array([]) 
      }); 
  }
  get empFormArray(): FormArray{
      return this.teamForm.get('empFormArray') as FormArray;
  }

  addEmployee(name, selected){

    let obj = {
       name: name,
      isSelected: selected
    }

    let fg = this.formBuilder.group({
        name: [obj]
      });

      this.empFormArray.push(fg);     
  }

  onFormSubmit() {
      let data = JSON.stringify(this.teamForm.value);
      console.log(data);

    this.formSubmitted = true;
      // this.teamForm.reset();   
  }   
}