Angular Reactive Forms：如何填充多选复选框表单？答案

【问题标题】：Angular Reactive Forms: How to Populate A Multi-Selection Checkbox form?Angular Reactive Forms：如何填充多选复选框表单？
【发布时间】：2020-02-19 00:35:45
【问题描述】：

如何在“编辑模式”下填充表单组的复选框？

我正在做一个项目，我正在制作和编辑锻炼，然后将它们存储到数据库中（目前使用 firebase）。锻炼创建与 Angular 模板驱动方法完美配合，但我正在尝试添加可以编辑现有锻炼的功能。正因为如此，我已经根据我是否在editMode 中（此模式由路由参数确定）设置了响应式表单，信息要么填充，要么不填充。

这非常适合基本的字符串填充，例如title 和imagepath。在这里，我在editMode（来自路由参数），并且相应地填充了内容：

但是，我也有要在同一张表格上填写的复选框。我正在为复选框使用材质主题。这是来自workoutphase 选择的示例：

<mat-form-field
  hideRequiredMarker
  appearance="fill"
  class="phase">
  <mat-label>Phase</mat-label>
  <mat-select multiple id="phase" name="phase" formControlName="phases">
    <mat-option value="Base 1">Base 1</mat-option>
    <mat-option value="Base 2">Base 2</mat-option>
    <mat-option value="Base 3">Base 3</mat-option>
    <mat-option value="Build 1">Build 1</mat-option>
    <mat-option value="Build 2">Build 2</mat-option>
    <mat-option value="Recovery">Recovery</mat-option>
    <mat-option value="Peak">Peak</mat-option>
    <mat-option value="Race">Race</mat-option>
    <mat-option value="Testing">Testing</mat-option>
  </mat-select>
</mat-form-field>

以及它在创建锻炼时的显示方式（问题是在 editMode 中尝试填充时）：

这会出现一个列表下拉列表，该下拉列表稍后会返回一组要添加到锻炼中的选定项目。

使用反应式方法，我试图能够在editMode 中（或在提取信息时）填充复选框。有没有办法填充复选框？还是我只需要在编辑模式下“重新检查”我想要的框？

到目前为止，我已经尝试使用 new FormArray([]); 来获取该数组并按应有的方式填充所有内容。这给了我很多与 formGroup 相关的错误。

此表格在app/features/workouts-page/workout-edit 中的WorkoutEditComponent 中您可以通过点击主页view workouts 页面上的任何锻炼，然后点击顶部的edit 按钮进入编辑表单。

Here is the stackblitz to this code. 您可以看到，如果您转到侧边菜单并选择workouts, create workout，则会出现一个复选框选项并且下拉菜单有效。但是，当您进行锻炼/编辑时，复选框将无法填充。为了简单起见，我对这个 stackblitz 进行了一些简化和回溯。与FormArray([]) 一起使用的任何方法似乎都会使问题变得更糟。

这里有更多信息：

在检查我是否处于编辑模式后，我正在通过我的ngOnInit 初始化表单：

ngOnInit()     
 this.route.params.subscribe((params: Params) => {
    this.id = +params["id"];
    this.editMode = params["id"] != null;
    this.initForm();
  });
}

还有initForm()：

private initForm() {
  let workoutImgPath = "";
  let workoutTitle = "";
  if (this.editMode) {
    const workout = this.workoutService.getWorkout(this.id);
    workoutTitle = workout.title;
    workoutImgPath = workout.imagePath;
    console.log(workout);
  }

 this.workoutForm = new FormGroup({
    title: new FormControl(workoutTitle, Validators.required),
    imgPath: new FormControl(workoutImgPath, Validators.required)
  });
}

以上是当前工作的解决方案，其中在编辑模式下仅将图像路径和标题添加到表单中。

在编辑现有锻炼时，是否也可以从一组项目中填充这些复选框？

【问题讨论】：

杰里米，它不是 formArray 只是一个数组。是的，FormControl 可以存储一个数组，例如const array=[1,3,5];control=new FormControl(array) 这就是你需要在多选中放入的内容
非常感谢您消除了那里的困惑。知道这让这变得更容易

标签： javascript angular angular-material angular-forms

【解决方案1】：

我更新了您的 stackblitz 示例，并希望能够完成您想做的事情，实际上它非常简单。

https://stackblitz.com/edit/github-qzxhec-lnaozw

【讨论】：

哇，确实很简单。我试图制作一个表单数组，而不是让 Angular 知道它是一个数组。非常感谢您的帮助！
没问题，很高兴我能帮上忙，有时简单的解决方案就是正确的解决方案。

【解决方案2】：

希望这会有所帮助，在编辑模式下将阶段列表修补到表单控件。

HTML

<form>
<div>
    <button class="btn btn-primary" (click)="onEdit()">Edit</button>
</div>
<div style="margin-top: 100px;">
    <mat-form-field>
        <mat-label>Phases</mat-label>
        <mat-select [formControl]="phases" multiple>
            <mat-option value="Base 1">Base 1</mat-option>
            <mat-option value="Base 2">Base 2</mat-option>
            <mat-option value="Base 3">Base 3</mat-option>
            <mat-option value="Build 1">Build 1</mat-option>
            <mat-option value="Build 2">Build 2</mat-option>
            <mat-option value="Recovery">Recovery</mat-option>
            <mat-option value="Peak">Peak</mat-option>
            <mat-option value="Race">Race</mat-option>
            <mat-option value="Testing">Testing</mat-option>
        </mat-select>
      </mat-form-field>
</div>

phases = new FormControl();


constructor() { }



 ngOnInit() {
    this.phases.valueChanges.subscribe(data => {
      console.log('Selected Options', data)
    });
  }



onEdit() {
    this.phases.patchValue(["Base 1", "Build 1"])
  }

【讨论】：