javascript - Angular react 形式 : How to Populate A Multi-Selection Checkbox form?

Question

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

我正在开发一个项目，我正在制作和编辑锻炼，然后将它们存储到数据库中(目前使用 firebase)。锻炼创建与 Angular 模板驱动方法完美配合，但我正在尝试添加可以编辑现有锻炼的功能。因此，我使表单成为响应式(Reactive)的，具体取决于我是否处于 editMode (此模式由路由参数确定)，信息要么填充，要么不填充。

这对于基本字符串填充非常有用，例如 title 和 imagepath。在这里，我处于 ​​editMode (来自路由参数)，并且内容已相应填充:

但是，我还需要在同一张表格上填写复选框。我正在使用 Material 主题作为复选框。以下是 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 下尝试填充时):

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

通过响应式(Reactive)方法，我试图能够在处于 editMode 时(或在拉入信息时)填充已填充的复选框。有没有办法填充复选框？或者我只需要在编辑模式下“重新检查”我想要的框？

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

此表单位于 app/features/workouts-page/workout-edit 中的 WorkoutEditComponent 中 您可以通过单击查看锻炼主页上的任何锻炼，然后单击顶部的编辑按钮来进入编辑表单。

Here is the stackblitz to this code. 您可以看到，如果您转到侧面菜单并选择锻炼，创建锻炼，则会出现一个复选框选项并且下拉菜单有效。但是，当您进行锻炼/编辑时，复选框将无法填充。为了问题简单起见，我在这个 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)
  });
}

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

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

Answer 1

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

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