1
I am not being able to reference formArrayName="complements" that is inside formArrayName="items"
I get an error on the console
ERROR Error: "Cannot find control with path: 'items -> complementos'"
the items array I was able to go through.
Code used.
formProduto: FormGroup;
items: FormArray;
complementos: FormArray;
initializeFormProduto() {
this.formProduto = this.fb.group({
fileimg: this.fb.control(''),
nome: this.fb.control(''),
descricao: this.fb.control(''),
vl_venda: this.fb.control(''),
id_cardapio: this.fb.control(''),
bo_segunda: this.fb.control('true'),
bo_terca: this.fb.control('true'),
bo_quarta: this.fb.control('true'),
bo_quinta: this.fb.control('true'),
bo_sexta: this.fb.control('true'),
bo_sabado: this.fb.control('true'),
bo_domingo: this.fb.control('true'),
items: this.fb.array([
this.fb.group({
categoria: this.fb.control(""),
qtdmin: this.fb.control(""),
qtdmax: this.fb.control(""),
bo_obrigatorio: this.fb.control(""),
complementos: this.fb.array([
this.fb.group({
nome: this.fb.control(""),
descricao: this.fb.control(""),
valor: this.fb.control(""),
bo_pausar: this.fb.control(""),
})
]),
})
]),
})
}
Html.
<form [formGroup]='formProduto' novalidate>
<form-wizard>
<wizard-step [title]="'Produto'" [isValid]="formProduto.valid">
<!-- <h1>Step1</h1> -->
<div class="modal-body">
<div class="row">
<div class='form-group is-empty col-md-3'>
<input style="display: none" type="file" (change)="onFileChanged($event)" #fileInput
formControlName='fileimg'>
<div class="uploadArquivoProduto"
[style.background-image]="'url(' + img + ' )' | safeHtml: 'style' "> </div>
<button class="btn btn-neutro btn-upload" (click)="fileInput.click()" style="width: 100%">Imagem
Produto</button>
</div>
<div class='form-group is-empty col-md-5'>
<label class="control-label" for='nome'>Nome</label>
<app-input-container errorMessage='Campo obrigatório' label='nome'>
<input class='form-control' placeholder='' formControlName="nome">
</app-input-container>
</div>
<div class='form-group is-empty col-md-4'>
<label class="control-label" for='nome'>Nome da Categoria</label>
<app-input-container errorMessage='Campo obrigatório' label='nome'>
<input class='form-control' placeholder='' formControlName="id_cardapio">
</app-input-container>
</div>
<div class='form-group is-empty col-md-9'>
<label class="control-label" for='nome'>Descrição</label>
<app-input-container errorMessage='Campo obrigatório' label='nome'>
<textarea rows="3" class='form-control' placeholder=''
formControlName="descricao"></textarea>
</app-input-container>
</div>
<div class='form-group is-empty col-md-4'>
<label class="control-label" for='nome'>Preço</label>
<app-input-container errorMessage='Campo obrigatório' label='nome'>
<input class='form-control' placeholder='' formControlName="vl_venda">
</app-input-container>
</div>
</div>
</div>
</wizard-step>
<wizard-step [title]="'Disponibilidade'">
<h1></h1>
<div class='form-group is-empty col-md-12'>
<label class="control-label" for='bo_preco_fixo'>
<h4>Dias em que o produto estára disponível</h4>
</label>
<div class="checkbox">
<input id="dom" class="magic-checkbox" type="checkbox" formControlName="bo_domingo">
<label for="dom">Dom</label>
<input id="seg" class="magic-checkbox" type="checkbox" formControlName="bo_segunda">
<label for="seg">Seg</label>
<input id="ter" class="magic-checkbox" type="checkbox" formControlName="bo_terca">
<label for="ter">Ter</label>
<input id="quar" class="magic-checkbox" type="checkbox" formControlName="bo_quarta">
<label for="quar">Qua</label>
<input id="qui" class="magic-checkbox" type="checkbox" formControlName="bo_quinta">
<label for="qui">Qui</label>
<input id="sex" class="magic-checkbox" type="checkbox" formControlName="bo_sexta">
<label for="sex">Sex</label>
<input id="sab" class="magic-checkbox" type="checkbox" formControlName="bo_sabado">
<label for="sab">Sab</label>
</div>
</div>
</wizard-step>
<wizard-step [title]="'Complementos'">
<button class="btn btn-lg v-middle" (click)="adicionarFk()">
<i class="iconesExemplos pli-add"></i> Adicionar categoria
</button>
<div class="col-sm-12">
<pre>
{{formProduto.value | json}}
</pre>
<div formArrayName="items" *ngFor="let item of formProduto.get('items').controls; let i = index;">
<div class="panel panel-light">
<div class="panel-heading" style="height: auto!important;">
<div [formGroupName]="i">
<div class="row padding-15">
<div class='form-group is-empty col-md-6'>
<label class="control-label" for='nome'>Categoria</label>
<input class='form-control' formControlName="categoria" placeholder="categoria">
</div>
<div class='form-group is-empty col-md-2'>
<label class="control-label" for='nome'>Qtd Min</label>
<input class='form-control' formControlName="qtdmin" placeholder="qtdmin">
</div>
<div class='form-group is-empty col-md-2'>
<label class="control-label" for='nome'>Qtd Max</label>
<input class='form-control' formControlName="qtdmax" placeholder="qtdmax">
</div>
<div class='form-group is-empty col-md-2'>
<!-- <label class="control-label" for='nome'>Obrigatório</label>
<input class='form-control' formControlName="bo_obrigatorio"
placeholder="bo_obrigatorio"> -->
<div class="checkbox" style="margin-top:28px">
<input id="bo_obrigatorio-{{i}}" class="magic-checkbox" type="checkbox"
formControlName="bo_obrigatorio">
<label for="bo_obrigatorio-{{i}}">Obrigatório</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body" formArrayName="complementos"> <!-- esse é o trecho com erro -->
<button class="btn btn-lg v-middle" (click)="adicionarComplementoFk()">
<i class="iconesExemplos pli-add"></i> Adicionar Complemento
</button>
<div >
<div *ngFor="let complemento of item.controls.complementos.value; let i = index;">
<div [formGroupName]="i">
<div class="row padding-15">
<div class='form-group is-empty col-md-6'>
<label class="control-label" for='nome'>nome</label>
<input class='form-control' formControlName="nome" placeholder="nome">
</div>
<div class='form-group is-empty col-md-2'>
<label class="control-label" for='nome'>descricao</label>
<input class='form-control' formControlName="descricao"
placeholder="descricao">
</div>
<div class='form-group is-empty col-md-2'>
<label class="control-label" for='nome'>valor</label>
<input class='form-control' formControlName="valor" placeholder="valor">
</div>
<div class='form-group is-empty col-md-2'>
<div class="checkbox" style="margin-top:28px">
<input id="bo_pausar-{{i}}" class="magic-checkbox" type="checkbox"
formControlName="bo_pausar">
<label for="bo_pausar-{{i}}">Pausar</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</wizard-step>
<div [ngSwitch]="isCompleted">
<div *ngSwitchDefault>
</div>
<div *ngSwitchCase="true">
<h4>Thank you! You have completed all the steps.</h4>
</div>
</div>
</form-wizard>
</form>
Instead of [formGroupName]="i", try putting [formGroup]="item".
– Gesiel Rosa
the error is happening before this excerpt, there in formArrayName="complements". Console => ERROR Error: "Cannot find control with path: 'items -> add-ons'"
– Herick
I think you have to put the complements inside your other ngfor
– Eduardo Vargas
@Eduardovargas he is already inside the for item, I did {{complement | json}} and he printou.
– Herick
Try to create a stackblitz with your code it would be easier to help you
– Eduardo Vargas
@Eduardovargas, Oce was right, really complements were not within the <div formArrayName="items". Thank you. I came across another problem, I did the stackblitz if I could just take a look. https://answall.com/questions/384214
– Herick