Angular Реактивные формы: как заполнить форму флажка множественного выбора?

Question

Как я могу установить флажки для группы форм, находясь в «режиме редактирования»?

Я работаю над проектом, в котором я делаю и редактирую тренировки, а затем сохраняю их в базе данных (используя firebase на это текущее время). Создание тренировки работало безупречно с помощью шаблона Angular, но я пытаюсь добавить функциональность, в которой я могу редактировать существующую тренировку. Из-за этого я сделал форму реагирующей, где в зависимости от того, нахожусь ли я в editMode (этот режим определяется из параметров маршрута) или нет, информация либо заполняется, либо нет.

Это прекрасно работает для базовой строки c, такой как 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 вверху.

Вот блик стека к этому коду. Вы можете увидеть, что если вы go в боковом меню и выберите workouts, create workout, то есть опция флажка и выпадающий список работает. Но когда вы go проводите тренировки / редактирование, флажки не могут быть заполнены. Я упростил и немного вернул назад этот стек-блиц ради простоты проблемы. Казалось, что любой метод, используемый с 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)
  });
}

Выше приведено рабочее решение, в котором только форма изображения и заголовок добавляются в форму во время редактирования. mode.

Могут ли эти флажки также быть заполнены массивом элементов при редактировании существующей тренировки?

Answer 1

Я обновил ваш пример стекаблица и, надеюсь, сумел сделать то, что вы пытаетесь сделать, на самом деле это было довольно просто.

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"])
  }