Boa noite, Tentei usar um outro formulário de um projeto pessoal que utiliza um array de string para gravar no banco de dados quais medicamentos determinado paciente usa. Pra isso fiz as seguintes funções:
get medicamentos(): FormArray{
return this.formFicha.controls['avaliacao'].value.medicamentos as FormArray;
}
addMedicamentos(){
let element = document.getElementById('avaliacao__medicamento') as HTMLInputElement;
let medicamento = element?.value;
this.medicamentos.push(medicamento);
}
removeMedicamentos(indexOfElement: number){
//TODO erro!!
this.medicamentos.removeAt(indexOfElement);
}Meu addMedicamentos funciona normalmente, enquanto o removeMedicamentos retorna um erro estranho. Meu html ficou assim:
<div *ngFor="let medicamento of formFicha.controls['avaliacao'].value.medicamentos; let indexOfElement=index">
<div class="btn btn-info">
{{medicamento}}
<a (click)="removeMedicamentos(indexOfElement)" type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
</div>
<div class="input-group-text" formGroupName="avaliacao">
<input id="avaliacao__medicamento" />
<a (click)="addMedicamentos()" class="btn btn-secondary">Adicionar medicamento</a>
</div>Mas estou recebendo o seguinte erro no console:
ERROR TypeError: this.medicamentos.removeAt is not a function at FichaComponent.removeMedicamentos (ficha.component.ts:90:23) at FichaComponent_div_64_Template_a_click_3_listener (ficha.component.html:91:29) at executeListenerWithErrorHandling (core.mjs:14948:16) at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:14983:22) at HTMLAnchorElement. (platform-browser.mjs:459:38) at _ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26316:33) at _ZoneDelegate.invokeTask (zone.js:405:60) at Zone.runTask (zone.js:178:47) at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
E outra coisa: o FormArray não é devidamente enviado na hora de dar submit mesmo populando o array... Não era pra funcionar?
