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

Question

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

      constructor(private formBuilder: UntypedFormBuilder
        ) {
      }
    serviceTaskForm = this.formBuilder.group({
    ....
     itemIds : ['']
    })
  onCheckboxChange($event: MatLegacyCheckboxChange) {

  }

我正在使用的InHTML

  <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.serviceTaskForm.controls['itemIds'].patchValue([1]);
}

onCheckboxChange($event: MatCheckboxChange, itemId: number) {
  let value: number[] = this.serviceTaskForm.controls['itemIds'].value;

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

  this.serviceTaskForm.controls['itemIds'].setValue(value, {
    emitEvent: false,
  });
}

isChecked(itemId: number) {
  return this.serviceTaskForm.controls['itemIds'].value.indexOf(itemId) > -1;
}

供您参考：

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