如何使用 FormBuilder 将选定的复选框值绑定到表单数组

Question

我有一个复选框列表，并且我正在使用 Angular 的 FormBuilder 来管理我的表单。我正在尝试将选定的复选框值绑定到表单组中名为

itemIds

的表单控件。

constructor(private formBuilder: UntypedFormBuilder) {
}

serviceTaskForm = this.formBuilder.group({
  ...,
  itemIds : ['']
});

onCheckboxChange($event: MatLegacyCheckboxChange) {
}

在 HTML 中我使用：

<form>
  ...
  <mat-form-field appearance="fill">
    <div class="demo-select-all-checkboxes" *ngFor="let task of tasks">
      <mat-checkbox
        (change)="onCheckboxChange($event)"
        [value]="task.itemId">
        {{ previousTask.itemId }} {{ previousTask.invoice }} 
      </mat-checkbox>
    </div>
  </mat-form-field>
</form>

我希望

itemIds

表单控件是一个包含所有选定复选框值的数组。我怎样才能实现这个目标？

Answer 1

1. 您的

   itemIds

   控件应该是具有数组值的表单控件。

2. 要初始化

   itemIds

   表单控件，您应该使用

   setValue()

   或

   patchValue

   方法并提供一个数组值。

3. 要使用表单控件处理多个复选框，您应该具有以下实现：

   • onCheckBoxChange

     方法通过事件（选中/未选中）从数组中切换选定的复选框值。

   • isChecked

     检查

     itemId

     的方法已被选中。

import {
  MatCheckboxModule,
  MatCheckboxChange,
} from '@angular/material/checkbox';

serviceTaskForm = this.formBuilder.group({
  itemIds: [[]],
});

ngOnInit() {
  this.itemIdFormControl.patchValue([1]);
}

onCheckboxChange($event: MatCheckboxChange, itemId: number) {
  let value: number[] = this.itemIdFormControl.value;

  if ($event.checked) value.push(itemId);
  else value.splice(value.indexOf(itemId), 1);

  this.itemIdFormControl.setValue(value, {
    emitEvent: false,
  });
}

isChecked(itemId: number) {
  return this.itemIdFormControl.value.indexOf(itemId) > -1;
}

get itemIdFormControl() {
  return this.serviceTaskForm.controls['itemIds'];
}

供您参考：

1. 您无法在

   <mat-checkbox>

   元素中实现

   <mat-form-field>

   。删除

   <mat-form-field>

   元素。参考：Angular材质导入mat-checkbox时出错

2. 实现

   [checked]

   属性而不是

   [value]

   属性。

<ng-container class="demo-select-all-checkboxes" *ngFor="let task of tasks">
  <mat-checkbox
    (change)="onCheckboxChange($event, task.itemId)"
    [checked]="isChecked(task.itemId)"
  >
    {{ task.itemId }} {{ task.invoice }}
  </mat-checkbox>
</ng-container>

演示@StackBlitz