I'm trying to follow the following tutorial on angular io to add to my form fields dynamically:
However, I'm getting:
Can not read property 'controls' of undefined
My code:
import { FormBuilder, FormArray } from '../../../../../node_modules/@angular/forms';
Module:
import { ReactiveFormsModule } from '@angular/forms';
produtoForm = this.fb.group({
nomeproduto: [''],
valorcompra: [''],
valorvenda: [''],
skuprincipal: [''],
indicepersonalizado: [''],
ean: [''],
gtin: [''],
marca: [''],
estoque: [''],
prazoproducao: [''],
altura: [''],
largura: [''],
comprimento: [''],
peso: [''],
linkfoto1: [''],
linkfoto2: [''],
linkfoto3: [''],
linkfoto4: [''],
linkfoto5: [''],
linkfoto6: [''],
video: [''],
variacoes: this.fb.array([
this.fb.control('')
])
});
Declaration of variables:
produtoForm = this.fb.group({
nomeproduto: [''],
valorcompra: [''],
valorvenda: [''],
skuprincipal: [''],
indicepersonalizado: [''],
ean: [''],
gtin: [''],
marca: [''],
estoque: [''],
prazoproducao: [''],
altura: [''],
largura: [''],
comprimento: [''],
peso: [''],
linkfoto1: [''],
linkfoto2: [''],
linkfoto3: [''],
linkfoto4: [''],
linkfoto5: [''],
linkfoto6: [''],
video: [''],
variacoes: this.fb.array([
this.fb.control('')
])
});
Template area giving the error:
<div formArrayName="variacoes">
<div *ngFor="let variacao of produtoForm.variacoes.controls; let i=index">
<label>
Nome Variação:
<input type="text" [formControlName]="i">
</label>
</div>
</div>
I've also tried:
<div *ngFor="let variacao of variacoes.controls;