Question

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

我正在做一个项目，我正在制作和编辑锻炼，然后将它们存储到数据库中（当前使用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相关的错误。

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

Here is the stackblitz to this code. 您会看到，如果转到侧边菜单并选择workouts, create workout，则将有一个复选框选项，下拉列表将起作用。但是，当您进行锻炼/编辑时，这些复选框将无法填充。为了简化问题，我对此堆叠闪电战进行了简化和回溯。 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

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

HTML

capabilities: [{
    maxInstances: 1,
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: ['headless', 'no-sandbox', 'disable-gpu', 'disable-dev-shm-usage', 'window-size=1920,1080']
    },
  }],

TS

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

Answer 2

我更新了您的stackblitz示例，并希望能够完成您尝试做的事情，实际上这很简单。

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

角反应性形式：如何填充多选复选框形式？

2 个答案: