formArrayName(fb.array) within another formArrayName(fb.array) cannot generate another product field

Question

Follow the form I need to mount in html

formulario(
    lancamentoForm?: Lancamento
  ) {
    this.formularioLancamento = this.fb.group({
      id: [lancamentoForm.id],
      dataCadastro: [lancamentoForm.dataCadastro],
      dataLancamento: [],
      clienteId: [],
      nomeCliente: ["", Validators.required],
      cpf: [],
      dataNascimento: [],
      cliente: [],
      email: [],
      tipoPagamento: [lancamentoForm.tipoPagamento],
      valorVenda: [lancamentoForm.valorVenda],
      taxa: [lancamentoForm.taxa],
      desconto: [lancamentoForm.desconto],
      entrega: [" ", Validators.requiredTrue],
      cep: [lancamentoForm.cep],
      bairro: [lancamentoForm.bairro],
      lagradouro: [lancamentoForm.lagradouro],
      complemento: [lancamentoForm.complemento],
      numero: [lancamentoForm.numero],
      telefone: [lancamentoForm.telefone],
      celular: [lancamentoForm.celular],
      total: [100],
      produtos: this.fb.array([this.addprod()])
    });
  }

  addprod(){
  return  this.fb.group({
      nomeProduto: ["", Validators.required],
      produto: [],
      valor_venda: [],
      quantidade: [1, Validators.maxLength(2)],
      totalProduto: [],
      adicionais: this.fb.array([
        this.fb.group({              
          nome: []
        })
      ])
    })
  }

get produtosControls(): FormArray {
    return this.formularioLancamento.get('produtos') as FormArray;
  }

  adicionarProduto(event: Event) {
    event.preventDefault();   
    const addProduto = this.addprod();

    this.produtosControls.push(addProduto);
  }

and that’s html, but whenever I add another product, gives the following error "Cannot find control with path: 'products -> 0 -> additional -> name'"

<div formArrayName="produtos">
                    <div>
                        <button mat-raised-button (click)="adicionarProduto($event)" style=" color: #28a745"
                            fxFlex="10">
                            <mat-icon>add</mat-icon>
                        </button>
                    </div>
                    <div *ngFor="let produto of produtosControls.controls; let i = index" [formGroupName]="i"
                        class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px"
                        fxLayoutGap.lt-md="0px">

                        <div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px"
                            fxLayoutGap.lt-md="0px">

                            <mat-form-field fxFlex=100>
                                <mat-select formControlName="produto" placeholder="Selecione o produto"
                                    (ngModelChange)="onProduto($event, i)">
                                    <!-- place ngx-mat-select-search inside mat-option to allow opening without initial selection -->
                                    <mat-option>
                                        <ngx-mat-select-search [formControl]="produtosFiltro" [searching]="searching">
                                        </ngx-mat-select-search>
                                    </mat-option>
                                    <mat-option *ngFor="let produto of filtroProdutos | async" [value]="produto">
                                        {{ produto.nomeProduto }}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                            
                        </div>

                        <mat-form-field fxFlex="12">
                            <mat-label>Nome produto:</mat-label>
                            <input matInput formControlName="nomeProduto" readonly="true" placeholder="Quantidade:">
                        </mat-form-field>

                        <mat-form-field fxFlex="12">
                            <mat-label>Quantidade:</mat-label>
                            <input matInput formControlName="quantidade" (keyup)="TotalProd($event, i)" maxlength="2"
                                placeholder="Quantidade:">
                        </mat-form-field>


                        <mat-form-field fxFlex="12">
                            <mat-label>Valor unitário:</mat-label>
                            <input matInput formControlName="valor_venda" placeholder="Valor" value="" readonly="true"
                                mask="separator.2">
                            <span matPrefix>R$&nbsp;</span>
                        </mat-form-field>

                        <mat-form-field fxFlex="12">
                            <mat-label>Total</mat-label>
                            <input matInput formControlName="totalProduto" placeholder="Total" readonly="true" value=""
                                mask="separator.2">
                            <span matPrefix>R$&nbsp;</span>
                        </mat-form-field>


                        <button mat-icon-button (click)="removerProduto(i)" color="warn">
                            <mat-icon>delete</mat-icon>
                        </button>
                        <br>

                        <div class="input-row" fxLayout="column" fxLayout.lt-md="column" fxLayoutGap="100px"
                            fxLayoutGap.lt-md="0px">

                            <div formArrayName="adicionais">
                                <div *ngFor="let adicional of produtosControls.controls; let j = index"
                                [formGroupName]="j">
                                                                        
                                    <mat-form-field>
                                        <mat-label>Adicionais:</mat-label>
                                        <input matInput formControlName="nome">
                                    </mat-form-field>

                                </div>
                            </div>
                        </div> 

                    </div>
                </div>

Answer 1

I wanted to post comment but as I created account recently, I still do not have the necessary reputation.

By chance there in the "additional" where it is [formGroupName]="i" should not be [formGroupName]="j"?

I haven’t tested.

I found an article with an example that might fit your case: https://ramya-bala221190.medium.com/a-simple-example-how-to-implement-nested-formgroups-and-formarrays-in-angular-6f78d7d4b6a3