Angular Reactive Forms：如何填充多選復選框表單？

Question

如何在“編輯模式”下填充表單組的復選框？

我正在做一個項目，我正在制作和編輯鍛煉，然后將它們存儲到數據庫中（目前使用 firebase）。 鍛煉創建與 Angular 模板驅動的方法完美結合，但我正在嘗試添加可以編輯現有鍛煉的功能。 因此，我使表單具有反應性，具體取決於我是否處於editMode模式（此模式由路由參數確定），信息要么填充，要么不填充。

這對於基本字符串填充非常imagepath ，例如title和imagepath 。 在這里，我處於editMode （來自路由參數）並且相應地填充了內容：

但是，我也有復選框需要填寫在同一張表格上。 我正在使用 Material Theme 作為復選框。 這是一個來自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 app/features/workouts-page/workout-edit中的WorkoutEditComponent中。您可以通過單擊主頁view workouts頁面上的任何鍛煉，然后單擊頂部的edit按鈕來訪問編輯表單。

這是此代碼的堆棧閃電戰。 您可以看到，如果您轉到側邊菜單並選擇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)
  });
}

以上是當前工作的解決方案，其中在編輯模式下僅將圖像路徑和標題添加到表單中。

在編輯現有鍛煉時，這些復選框是否也可以從一系列項目中填充？

Answer 1

我更新了您的 stackblitz 示例，並希望能夠完成您想要做的事情，實際上非常簡單。

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

Answer 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>

TS

phases = new FormControl();


constructor() { }



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



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