Zduplikowany stan w reactive forms

0

Witam. Chciałbym miec odzielne formularze dla kazdego exercise. Kazda kontrolka bedzie dostawac kolejno segments.id1,segments.id2.. az do segments.id5.
Aktualnie tworze nowe drzewo HTML dla kazdego exercise przez co ciągle odwołuje się do tego samego formularza.. Jak zrobić odzielne formularze dla kazdego exercise?
exercise to model wysłany przez backend dla pojedynczego templateID ktory zawiera mapę ze wszystkimi segmentami

Po kliknieciu w button save and hidden chce potem wysyłac templateId i segmenty.
odwzorowanie problemu:
https://stackblitz.com/edit/angular-bw9cms?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

0

Nie wiem czy dobrze kumam ale jesli jest to cos w stylu survey to chyba chodzi ci o FormArray gdzie kazdy task to osobny form

2

Musisz stworzyć formularz w następujący sposób:

this.form = this.fb.group({
  exercises: this.fb.array([])
});

for (const excercise of excercises) {
  const excerciseFormGroup = this.fb.group({
    templateId: ['', Validators.required],
    name: ['', Validators.required],
    segments: this.fb.group({
      id1: '',
      id2: '',
      id3: '',
      id4: '',
      id5: '',
    })
  });

  this.exercisesFormArray.push(excerciseFormGroup);
}

get exercisesFormArray(): FormArray {
  return this.form.get('exercises') as FormArray;
}

Po zatwierdzeniu takiego formularza dostaniesz kolekcję obiektów typu excercise, bo struktura formularza pokrywa się z twoimi obiektami.

Potem w htmlu musisz zrobić coś w tym stylu:

<form [formGroup]="form">
  <div *ngFor="let excerciseFormGroup of exercisesFormArray.controls">
    <div [formGroup]="excerciseFormGroup">
      <input formControlName="templateId">
      <input formControlName="name">
      <div formGroupName="segments">
        <input formControlName="id1">
        <input formControlName="id2">
        <input formControlName="id3">
        <input formControlName="id4">
        <input formControlName="id5">
    </div>
   </div>
  </div>
</form>

Kompilowane w głowie, więc nie wiem czy zadziała :) mam nadzieję, że zrozumiesz ideę.

1 użytkowników online, w tym zalogowanych: 0, gości: 1