Итерация FormArray из FormGroups

У меня возникли проблемы с работой моего массива форм из групп форм.

Я хотел бы перебирать массив форм и отображать входные данные в каждой группе форм. Когда я вызываю addExercise(), шаблон не отображает новую группу форм, которую я помещаю в массив форм. Также, когда я вызываю saveWorkout(), строка console.info(this.workoutFormArray.value) показывает, что значения из моих входов не отражаются.

тренировка.component.ts

workoutFormArray: FormArray;

ngOnInit() {
  this.workoutFormArray = new FormArray([
    new FormGroup({
      exercise: new FormControl(''),
      reps: new FormControl('')
    })
  ]);
}

addExercise() {
  this.workoutFormArray.push(
    new FormGroup({
      exercise: new FormControl(''),
      reps: new FormControl(''),
    })
  );
}

saveWorkout() {
  console.info(this.workoutFormArray.value);
}

тренировка.component.html

<ion-icon (click) = "addExercise()" name = "add" slot = "end"></ion-icon>

<div [formArrayName] = "workoutFormArray">
  <div *ngFor = "let group of workoutFormArray.controls; let i = index">
    <div [formGroupName] = "i">
      <ion-select 
        placeholder = "Exercise"
        formControlName = "group.controls.exercise"
        (ionChange) = "saveWorkout()"
      >
        <ion-select-option [value] = "pushups"> Pushups </ion-select-option>
        <ion-select-option [value] = "squats"> Squats </ion-select-option>
      </ion-select>

      <ion-input 
        type = "text"
        formControlName = "group.controls.reps"
      ></ion-input>
    </div>
    <button type = "button" (click) = "saveWorkout()">Save</button>
  </div>
</div> 

Хотел бы спросить, является ли ваш formArray корнем формы? Или есть FormGroup, который обертывает FormArray? Спасибо.

Yong Shun 03.01.2023 02:29

formArray является корнем

nandesuka 03.01.2023 02:43

Отмечено, сделано обновление моего ответа.

Yong Shun 03.01.2023 02:52
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обновлено: вы упомянули, что workoutFormArrayFormArray является корнем формы, вы можете прочитать об этой проблеме в GitHub: Поддержка [formArray] без родителя [formGroup] # 30264.

<div [formGroup] = "$any(workoutFormArray)">
  ...
</div>

Проблема заключалась в том, что вы указали неправильный formControlName во вложенном FormGroup. Должен быть:

<ion-select
  placeholder = "Exercise"
  formControlName = "exercise"
  (ionChange) = "saveWorkout()"
>
  <ion-select-option value = "pushups"> Pushups </ion-select-option>
  <ion-select-option value = "squats"> Squats </ion-select-option>
</ion-select>

<ion-input type = "text" formControlName = "reps"></ion-input>

Без приставки group.controls..

Демо @ StackBlitz

Другие вопросы по теме