in a fb.array I have another array so I can’t generate the other field to insert a new product and its additions

Asked

Viewed 20 times

0

Good afternoon, everyone, I need your help. This is a piece of Json I need to assemble.

 {
        "produtos": [
        {
          "nomeProduto": "Bolo",
          "produto": 47,
          "valor_venda": 10,
          "quantidade": 1,
          "totalProduto": 10,
          "adicionais": [
            {
              "nome": null
            }
          ]
        }   ] }

this is my Component.ts

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 produtoLength = this.produtosControls.length;
    const addProduto = this.addprod();

    this.produtosControls.push(addProduto);
  }

here is my formArrayname form,

<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]="i">

                                    <mat-form-field>
                                        <input matInput formControlName="nome">
                                    </mat-form-field>
                                    
                                </div>
                            </div>
                        </div> 

                    </div>
                </div>

error causing when I click to insert a new

inserir a descrição da imagem aqui

ERROR Error: Cannot find control with path: 'products -> 1 -> additional -> 1'

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.