Angular: Adding array in formBuilder or otherwise

Question

I need to add an array to formBuilder, but I don’t know how to do it (it may be in other ways). everything was going great until FK showed up. I have to send the company data plus the phone data

Following example:

{
  "cd_cidade": "7016",
  "cd_empresa": "1",
  "cd_estado": "GO",
  "ds_complemento": "Nenhum",
  "ds_logradouro": "Rua m 11",
  "img_empresa": "padrao.png",
  "no_bairro": "Centro",
  "no_empresa": " Roberto da Silva",
  "no_fantasia": " Producoes",
  "nu_cnpj": "21512452000118",
  "nu_nire": "0",
  "nu_numero": "5",
  // o problema está aqui :(
  "telefone": [
    {
      "nu_telefone": "6496452145"
    },
    {
      "nu_telefone": "6496452145"
    },
    {
      "nu_telefone": "6496452145"
    },
    {
      "nu_telefone": "6496452145"
    },
    {
      "nu_telefone": "6496452145"
    }
  ]
}

The company fields are being filled with formBuilder

Follows code:

  initializeForm(empresa) {
    this.form = this.formBuilder.group({
      cd_empresa: this.formBuilder.control(empresa.cd_empresa, [Validators.required]),
      no_empresa: this.formBuilder.control(empresa.no_empresa, [Validators.required]),
      no_fantasia: this.formBuilder.control(empresa.no_fantasia, [Validators.required]),
      nu_cnpj: this.formBuilder.control(empresa.nu_cnpj, [Validators.required]),
      nu_nire: this.formBuilder.control(empresa.nu_nire, [Validators.required]),
      ds_logradouro: this.formBuilder.control(empresa.ds_logradouro, [Validators.required]),
      no_bairro: this.formBuilder.control(empresa.no_bairro, [Validators.required]),
      nu_numero: this.formBuilder.control(empresa.nu_numero, [Validators.required]),
      ds_complemento: this.formBuilder.control(empresa.ds_complemento, [Validators.required]),
      cd_cidade: this.formBuilder.control(empresa.cd_cidade, [Validators.required]),
      img_empresa: this.formBuilder.control(empresa.img_empresa, [Validators.required]),
      cd_estado: this.formBuilder.control(empresa.Uf, [Validators.required])

    })
  }

Now let’s go to the moment I send to the backend

Tenho um array assim
numbers =[{"nu_telefone":"6436452145"},{"nu_telefone":"64999965412"},{"nu_telefone":"64999965236"}];
      update(form) {
         // Preciso enviar esse form com o numero de telefone igual no primeiro exemplo com o json.
         this.empresaService.update(form)
      }

Answer 1

Follows solution.

I added it to the formBuilder

Numbers: this.formBuilder.array([])

being like this.

  initializeForm(empresa) {
    this.form = this.formBuilder.group({
      cd_empresa: this.formBuilder.control(empresa.cd_empresa, [Validators.required]),
      no_empresa: this.formBuilder.control(empresa.no_empresa, [Validators.required]),
      no_fantasia: this.formBuilder.control(empresa.no_fantasia, [Validators.required]),
      nu_cnpj: this.formBuilder.control(empresa.nu_cnpj, [Validators.required]),
      nu_nire: this.formBuilder.control(empresa.nu_nire, [Validators.required]),
      ds_logradouro: this.formBuilder.control(empresa.ds_logradouro, [Validators.required]),
      no_bairro: this.formBuilder.control(empresa.no_bairro, [Validators.required]),
      nu_numero: this.formBuilder.control(empresa.nu_numero, [Validators.required]),
      ds_complemento: this.formBuilder.control(empresa.ds_complemento, [Validators.required]),
      cd_cidade: this.formBuilder.control(empresa.cd_cidade, [Validators.required]),
      img_empresa: this.formBuilder.control(empresa.img_empresa, [Validators.required]),
      cd_estado: this.formBuilder.control(empresa.Uf, [Validators.required]),
      numbers: this.formBuilder.array([])

    })
  }

follows functions that do the job.

initNumbers() {
    // initialize our address
    return this.formBuilder.group({
      nu_telefone: [this.numero]
    });
  }
  addNumbers() {
    // add address to the list
    const control = <FormArray>this.form.controls['numbers'];
    control.push(this.initNumbers());
  }
  removeNumbers(i: number) {
    // remove address from the list
    const control = <FormArray>this.form.controls['numbers'];
    control.removeAt(i);
  }
  getTelefones() {
    this.loader = true
    this.empresaService.getTelefones().subscribe(telefones => {
      this.telefones = telefones
      for (var item of this.telefones) {
        this.numero = item.nu_telefone;
        this.adicionarNumero();
        this.loader = false
      }
    });
  }
  adicionarNumero() {
    this.numbers.push({ "nu_telefone": this.numero })
    this.addNumbers();
  }