I have been trying to use FormArray for a div that is dynamically added by the user, but I can't find the controls for the user inputs! I always have the error:
Error: Cannot find control with path: 'textoAvisos -> 0 -> assTipo'
Error: Cannot find control with path: 'textoAvisos -> 0 -> msgTipo'
Error: Cannot find control with path: 'textoAvisos -> 0 -> dataTipo'
The div contains 3 inputs that the user need to insert, which it seems that the control cannot find them. A new div is added after the user click a button, hence why it needs to be dynamic, but that is not the issue. I don't need to worry about the push insert for the moment, as I need to validate the input from the user first!
Here is the HTML:
<form style="text-align: center;" [formGroup]="janelaAtualizacaoForm" (ngSubmit)="cadastrarJanelaAtualizacao()">
<div *ngFor="let disparaEmail of disparaEmails; let i=index" formArrayName="textoAvisos" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">
<div [formGroupName]="i">
<p class="titulo-campo font1 fw700">Assunto:</p>
<textarea pInputTextarea [rows]="2" formControlName="assTipo" required style="width: 100%; resize:unset; font-size: 18px;"></textarea>
<p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
<p-editor [style]="{'height':'300px'}" formControlName="msgTipo" required></p-editor>
<p class="titulo-campo font1 fw700">Data:</p>
<p-calendar [readonlyInput]="true" formControlName="dataTipo" dateFormat="dd/mm/yy" showButtonBar="true" [locale]="localeService.getLocale()"[monthNavigator]="true" [yearNavigator]="true" yearRange="2018:2050" required></p-calendar>
</div>
</div>
</form>
And here is the TS:
constructor(
private janelaAtualizacaoService: JanelaAtualizacaoService,
private segmentoInfoService: SegmentoInformacaoService,
private empresaService: EmpresaService,
private route: ActivatedRoute,
private router: Router, private fb: FormBuilder, private location: Location,
private changeDetector: ChangeDetectorRef, private localeService: LocaleService
) {
this.criarJanelas();
}
criarJanelas() {
this.janelaAtualizacaoSelecionado = [];
this.janelaAtualizacaoForm = new FormGroup({
textoAvisos: new FormArray([
new FormControl(
new FormGroup({
assTipo: new FormControl('', [Validators.required]),
msgTipo: new FormControl('', [Validators.required]),
dataTipo: new FormControl('', [Validators.required])
})
)
])
});
}
Thanks for the help, everyone!
You're using [formGroupName] incorrectly. In your line with <div [formGroupName]="i">, you are trying to get the formGroupName via the index i, which won't work because you have not created any FormGroups that have a number as a name.
I believe the Angular tutorial on reactive forms will help you, specifically the part about FormArrays and dynamic controls: https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays
To fix your problem, you probably need do the following changes.
HTML:
Change <div [formGroupName]="i"> to <div [formGroup]="textoAvisos.controls[i]">
or
change *ngFor="let disparaEmail of disparaEmails; let i=index" to *ngFor="let formGroup of textoAvisos.controls; let i=index"
The first example change is provided below.
<form style="text-align: center;" [formGroup]="janelaAtualizacaoForm" (ngSubmit)="cadastrarJanelaAtualizacao()">
<div *ngFor="let disparaEmail of disparaEmails; let i=index" formArrayName="textoAvisos" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">
<div [formGroup]="textoAvisos.controls[i]">
<p class="titulo-campo font1 fw700">Assunto:</p>
<textarea pInputTextarea [rows]="2" formControlName="assTipo" required style="width: 100%; resize:unset; font-size: 18px;"></textarea>
<p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
<p-editor [style]="{'height':'300px'}" formControlName="msgTipo" required></p-editor>
<p class="titulo-campo font1 fw700">Data:</p>
<p-calendar [readonlyInput]="true" formControlName="dataTipo" dateFormat="dd/mm/yy" showButtonBar="true" [locale]="localeService.getLocale()"[monthNavigator]="true" [yearNavigator]="true" yearRange="2018:2050" required></p-calendar>
</div>
</div>
</form>
Typescript:
Remove the surrounding FormControl from your FormGroup in textoAvisos and add a getter for textoAvisos. Without this getter, you will get an error regarding textoAvisos being undefined. What tripped us up was that we were using textoAvisos in formArrayName="textoAvisos, but you are able to use textoAvisos like that because formArrayName explicitly looks for a formArray on the janelaAtualizacaoForm. When we try to do textoAvisos.controls in the *ngFor we get an error because we don't actually have a property in our component class to bind too with that name, since textoAvisos exists only as an element on the janelaAtualizacaoForm form.
constructor(
private janelaAtualizacaoService: JanelaAtualizacaoService,
private segmentoInfoService: SegmentoInformacaoService,
private empresaService: EmpresaService,
private route: ActivatedRoute,
private router: Router, private fb: FormBuilder, private location: Location,
private changeDetector: ChangeDetectorRef, private localeService: LocaleService
) {
this.criarJanelas();
}
public get textoAvisos() {
return this.janelaAtualizacaoForm .get('textoAvisos') as FormArray;
}
criarJanelas() {
this.janelaAtualizacaoSelecionado = [];
this.janelaAtualizacaoForm = new FormGroup({
textoAvisos: new FormArray([
new FormGroup({
assTipo: new FormControl('', [Validators.required]),
msgTipo: new FormControl('', [Validators.required]),
dataTipo: new FormControl('', [Validators.required])
})
])
});
}
I have not tested these in a live environment but hopefully they will solve your problem.
