How to fill two formArraym one inside the other

Question

Good afternoon!!!

I need a help to fill two form Array, one inside the other, I’m doing more or less like this:

  dadosBeneficiarioForm: FormGroup = this.fb.group({
    nome: [null],
    valorTotalAutorizado: [null],
    planoAssistencialSaude: this.fb.array([
      {
        dependentes: this.fb.array([])
      }
    ])
  });

// function para adicionar os no fromArray
this.beneficioService.getDependentes().subscribe((response) => {

      response.forEach((planoAssistencialSaude) => {

        this.addPlanoAssistencial(planoAssistencialSaude);

        this.addDependente(planoAssistencialSaude.titular);

      });

    });


  addDependente(dependente: DependenteBeneficiario) {
    const dependForm = this.fb.group({
      id: [dependente.id, Validators.required],
      nome: [dependente.nome, Validators.required],
      valor: [dependente.valor, Validators.required],
      tipo: [dependente.tipo, Validators.required]
    });

    this.dependentes.push(dependForm);
  }

Answer 1

In your case you want to create an array of objects, where each object has an attribute called dependentes this being another array. So in creating the form, if you want to already initial a plan with an array of pendants, you should pass another FormGroup inside planoAssistencialSaude, being like this.

criarFormulario() {
    this.form = this.fb.group({
      nome: [null],
      valorTotalAutorizado: [null],
      planoAssistencialSaude: this.fb.array([
        this.fb.group({
          dependentes: this.fb.array([])
        })
      ])
    });
  }

Now, to add new objects in your array, you must search the plan for the array index, so yes you can add in the dependent array.

I made an example in stackblitz to make it easier to understand.

Answer 2

Hello!

One way to solve this is to create arrays separately. First, declare a FormArray within the class, outside the FormGroup original, for dependents. Then, you add all the elements in that array before inserting it into the control in the FormGroup

dadosBeneficiarioForm: FormGroup = this.fb.group({
    nome: [null],
    valorTotalAutorizado: [null],
    planoAssistencialSaude: this.fb.array([])
  });
  dependentesForm = new FormArray([]);


  addDependente(dependente){
    const dependForm = this.fb.group({
        id: [d.id, Validators.required],
        nome: [d.nome, Validators.required],
        valor: [d.valor, Validators.required],
        tipo: [d.tipo, Validators.required]
      });
      this.dependentesForm.push(dependForm);
  }

Then you can call the control planoAssistencialSaude as a FormArray and push the dependentForm

 const plano = this.dadosBeneficiarioForm.controls
      .planoAssistencialSaude as FormArray;
    plano.push(this.dependentesForm);

I created a stackblitz using a slightly more complete approach, where you create an array of dependents and at the end, in some kind of Ubmit that you will use, create the FormGroups for each dependent, enter FormArray and then in proper control. I recommend this approach because there is the possibility of you adding new dependents through your UI. So, with each new entry you insert into this array and only at the end insert into Formarray.

Follows the stackblitz