I'm trying to use a reactive form that contains an array, however I'm getting:
Can not read property 'controls' of null
I tried something like:
TS
formularioRegistro: FormGroup;
contas_mp: FormArray;
ngOnInit() {
this.criarFormularioDeUsuario();
}
criarFormularioDeUsuario() {
this.formularioRegistro = this.fb.group({
email: ['', Validators.compose([Validators.required, Validators.email])],
password: ['', Validators.compose([Validators.required])],
nome: ['', Validators.compose([Validators.required])],
telefone: ['', Validators.compose([Validators.required])],
possui_whatsapp: [''],
contas_mp: this.fb.array([this.criaContaMP()])
});
}
criaContaMP(): FormGroup{
return this.fb.group({
conta_mp: ''
})
}
adicionaContaMp(): void{
this.contas_mp = this.formularioRegistro.get('contas_mp') as FormArray;
this.contas_mp.push(this.criaContaMP());
}
TEMPLATE:
<div formArrayName="contas_mp" *ngFor="let contaMP of formularioRegistro.get('contas_mp').controls; let i = index;">
<div [formGroupName]="i">
<input formControlName="conta_mp" placeholder="Conta MP {{i+1}}">
</div>
</div>