Angular - Сохранение массива в массив формы

Question

это мой первый вопрос здесь. Поскольку я француз, я надеюсь, вы поймете это: D И это не совсем легко объяснить. Я начал изучать Angular две недели go. Просто чтобы вы знали ...

Речь идет о коллекции аудиоальбомов (EP, CD). Вот интерфейс JS:

export interface Album {
    id: number;
    artist: string;
    title: string;
    year: number;
    cover: string;
    tracks: [string, string][]; //[title, duration]
}

Я пытаюсь создать реактивную форму для добавления новых альбомов в существующий массив, который не следует изменять. Таким образом, свойство track не может быть массивом объектов. Он должен оставаться массивом строковых кортежей . Например:

{
    id: 5,
    artist: ' Dntel',
    title: 'Life Is Full Of Possibilities',
    year: 2001,
    cover: 'R-16855-1196613859.jpg',
    tracks: [
      ['Umbrella', '4:43'],
      ['Anywhere Anyone', '4:37'],
      ...
    ]
}

Форма в компоненте:

export class AddAlbumComponent implements OnInit {
  albumForm: FormGroup = this.fb.group({
    artist: ['', Validators.required],
    title: ['', Validators.required],
    year: ['', Validators.required],
    cover: [''],
    tracks: this.fb.array([
      this.fb.group(
        [
          this.fb.control(''), // title input
          this.fb.control('')  // duration input
        ]
      )
    ])
  });
}

Фактическая форма выглядит так (извините, интерфейс на французском языке): реактивная форма

А теперь мой вопрос: как я могу сохранить название и продолжительность каждого трека в моем формате?

Я пытался:

<input type="text" id="title" [formControlName]="tracks.at(i,0)">
<input type="text" id="duration" [formControlName]="tracks.at(i,1)">

Но массив содержит только пустые строки: [['0', '', ''], ['1', '', '']].

Спасибо!

Answer 1

У вас есть массив массивов, поэтому вам нужно использовать FromArray из FormArray

albumForm: FormGroup = this.fb.group({
    artist: ['', Validators.required],
    title: ['', Validators.required],
    year: ['', Validators.required],
    cover: [''],
    tracks: this.fb.array([
      this.fb.array(  //<--this is fb.array
        [
          this.fb.control(''), // title input
          this.fb.control('')  // duration input
        ]
      )
    ])
  });

Чтобы избежать проблем в работе, вы объявляете две вспомогательные функции

  get tracks()
  {
    return this.albumForm.get('tracks') as FormArray
  }
  getTrack(i)
  {
    return (this.albumForm.get('tracks') as FormArray).at(i) as FormArray
  }

И вы. html

<form [formGroup]="albumForm">
    <div *ngFor="let tracks of tracks.controls;let i=index" >
        <input [formControl]="getTrack(i).at(0)">
        <input [formControl]="getTrack(i).at(1)">
    </div>
</form>

Обратите внимание, что мы используем formControl напрямую, а не formControlName- для внутреннего массива

stackblitz