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$ </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$ </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
ERROR Error: Cannot find control with path: 'products -> 1 -> additional -> 1'