How can I set an array within my formgroup?

Question

I have the following function that creates a form group:

My ngOnInit:

ngOnInit() {

    //Ao iniciar a tela deve carregar o formgroup padrão das variações
    this.variacaoForm = this.fb.group({

      variacoes: this.fb.array([this.createFormGroup()])

    });


 createFormGroup(): FormGroup {
    return this.fb.group({
      atributo: "",
      preco: null,
      listaatributos: [{}],
      sku: '',
      tipo: '',
      id: '',
      id_produto: '',
      estoque_variacao: 0,
      linkfotovariacao: '',
      created_at: '',
      foto_prin_1: '',
      foto_prin_2: '',
      foto_prin_3: '',
      foto_prin_4: '',
      foto_prin_5: '',
      foto_prin_6: ''
    });
  }
}

In this attributes list I need it to be an array so I can put several values. I tried to add in a function these data that I need to stay in this attributes list:

   adicionaAtributo(index: number){

   this.variacaoForm.value.variacoes[index].listaatributos.push(this.idAtributo);
  }

In case I would like to add in my variable form in the position informed by the parameter that attribute id. But when this function is triggered, it is returned:

ERROR Typeerror: Cannot read Property 'list attributes' of Undefined

My idea is that I need reactive formularies, I am in a scenario that I can own more than one variation, and in each variation can have N attributes.

the structure I need to send to the backend would be something like:

variações: [{"estoque_variacao": 900, "atributos":[12,13]}]

Where in this key attributes I tried to add through the function:

adicionaAtributo(index: number){}

Answer 1

I created a Stackblitz I tried to simulate your example.

I created a list of the part that will add and/or remove your items listaatributos, was like this:

 add(index: number, newValue) {
   this.listAtributos.push(newValue); // lista de number[]
   const control = (<FormArray>this.form.controls['variacoes']).at(index);
   control.patchValue({ listaatributos: this.listAtributos});
 }