Category: formarray

I’m trying to update my playlist form that contains normal input and an arrayform that contains a list of songs.
when I try to change the two input it works but when I try to change anything in the array all the songs inside the playlist get deleted

before updating the array list:

after I press on edit here’s what I get:

and when I try changing anything in the ArrayList I get this

and when I try to edit it once more I get this

and an error :

ERROR TypeError: Cannot read property ‘map’ of undefined

I will leave bellow all the function I used :
this in my main component:
editPlaylist(playlist: Playlist, index: number) {
const dialogRef = this.dialog.open(DialogComponent, {
width: ‘900px’,
data: {
songs:this.songs,

        operation: 'edit',
        playlistData: playlist,
        position: index
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
         this.playlists[index] = playlist;
        this.songs= result.song;
        this.playlists[index].name = result.name;
        this.playlists[index].description = result.description;



        this.playlists[index].songs = result.song;

      }
    });
  }

and this in my dialog componenets
ngOnInit(): void {

   this.form = new FormGroup(
      {
        name:new FormControl('', Validators.required),
        description:new FormControl('',Validators.required),
        title:new FormControl('',Validators.required),
        artist:new FormControl('',Validators.required),
        duration:new FormControl(0,[Validators.required , Validators.min(0)]),
        songs:  this.formBuilder.array([ this.createSong() ])


      }
    )
    if (this.data.operation === 'edit') {
      this.form = this.formBuilder.group({
        name: [this.data.playlistData.name, Validators.required],
        description: [this.data.playlistData.description, Validators.required],
        songs: this.formBuilder.array(
          this.data.playlistData.songs.map(song => this.formBuilder.group({
            title: [song.title, Validators.required],
            artist: [song.artist, Validators.required],
            duration: [song.duration, Validators.compose([Validators.required, Validators.min(0)])],
          }))
        ),
      })

    }
      }

please if someone is familiar with arrayform help me