Angular 如何获取多个复选框的值？

Question

我在 Angular 中使用一个复选框来选择多个元素，我试图获取该复选框的值以进行提交。

相反，我将这些值作为 true-s 数组获取。这就是我尝试过的:

export class CreateSessionComponent implements OnInit {
  form : FormGroup ;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      userdata :  new FormArray([
        new FormControl('', Validators.required)
      ])
    })
  }
}

userdata 是从数据库填充的动态数组。

<div formArrayName="useremail; let k = index">
  <div *ngFor="let data of userdata">
    <div>
      <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
    </div>
  </div>
</div> 

Answer 1

由于您有多个要使用的值，因此需要使用 FormArray，因为 FormControl 只能捕获一个值。

从声明一个空的 formArray 开始:

this.myForm = this.fb.group({
  useremail: this.fb.array([])
});

迭代您的电子邮件，并观察更改事件并将相应的电子邮件和事件传递给方法 onChange，您在其中检查它是否被选中，然后添加相应的将电子邮件发送到表单数组，如果未选中，则从表单数组中删除所选电子邮件:

<div *ngFor="let data of emails">
  <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>

和onChange:

onChange(email:string, isChecked: boolean) {
  const emailFormArray = <FormArray>this.myForm.controls.useremail;

  if(isChecked) {
    emailFormArray.push(new FormControl(email));
  } else {
    let index = emailFormArray.controls.findIndex(x => x.value == email)
    emailFormArray.removeAt(index);
  }
}

Demo