Как сделать sh Dynami c FormGroup в Dynami c Создан массив форм

Question

На самом деле я пытаюсь применить подход реактивных форм в моем проекте здесь, в моем проекте, я должен добавить кнопку Добавить сезон , и когда кнопка нажата, тогда новая группа формируется с одним элементом управления формы, то есть season и один FormArray, т.е. эпизодов , что означает, что эпизодов создано Динамически, теперь я хочу добавить еще несколько formGroup в эпизодов , но не могу понять как сделать это здесь, что я сделал до сих пор:

export class AddContentsComponent implements OnInit, AfterViewChecked {
  count = 0
  episodes = []
  ContentForm: FormGroup
  constructor() { }

  ngOnInit() {
    this.ContentForm = new FormGroup({
      'title': new FormControl(null, Validators.required),
      'desc': new FormControl(null, Validators.required),
      'image_url': new FormControl(null, Validators.required),
      'subtitle_url': new FormControl(null, Validators.required),
      'url': new FormControl(null, Validators.required),
      'episodes': new FormArray([]),
      'seasons': new FormArray([])
    })
  }

 onSubmit() {
    console.log(this.ContentForm)
  }
addSeasons() {
while ((<FormArray>this.ContentForm.get('episodes')).length) {
      console.log('ok');
      (<FormArray>this.ContentForm.get('episodes')).removeAt((<FormArray>this.ContentForm.get('episodes')).length - 1);
    }

    (this.ContentForm.get('seasons') as any).push(new FormGroup({
      'season': new FormControl(null),
      'episodes': new FormArray([]) //here am add a dynamic formArray
    }))
  }


  DeleteSeason(index) {
    (<FormArray>this.ContentForm.get('seasons')).removeAt(index)
  }



  AddEpisodesInSeasons(index) {
    (<FormArray>this.ContentForm.get('seasons')) //now here i want to push new FormGroup to **episodes**
  }

}

https://stackblitz.com/edit/angular-ndnstv для получения дополнительной информации ..

Answer 1

Передайте индекс FormGroup выбранных сезонов из html, как это, и добавьте больше formGroup или элемента управления в соответствии с вашими потребностями.

Попробуйте это:

компонент . html

 <button type ='button' (click) = "AddEpisodesInSeasons(i)">{{'Add Episode In Season '+(i+1)}} </button>

component.ts

AddEpisodesInSeasons(i){
   ((this.ContentsForm.get('seasons') as FormArray).at(i).get('episodes') as FormArray).push( // here add more as you expected);
  }

Forked Пример

Answer 2

Просто передайте ссылку на массив формы в обработчик событий щелчка.

    <div formArrayName="seasons">
            <div *ngFor="let contentsControl of ContentsForm.get('seasons').controls; let i=index" [formGroupName]="i">
                <input type="text" placeholder="{{'seasons '+(i+1)}}" formControlName="season" />
                <button type ='button' (click) = "AddEpisodesInSeasons(contentsControl.controls.episodes)">
          {{'Add Episode In Season '+(i+1)}}
           </button>
                <div>
                    <ul>
                        <li *ngFor="let epi of contentsControl.controls.episodes.value">
                            {{epi}}
                        </li>
                    </ul>
                </div>
            </div>

И в вашем обработчике кликов управляйте массивом формы

AddEpisodesInSeasons(episodes: FormArray){
    let length = episodes.length;
    episodes.push(new FormControl( `Episode ${length +1}`));   
  }

Stackblitz