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

debugcn 发表于 Dev

阿伦·库马雷什

我正在使用 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>

AJT82

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

从声明一个空的 formArray 开始：

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

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

<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);
  }
}