javascript - Hur man itererar över FormArray i FormGroup i ett Angular reaktivt formulär

Strukturen på mitt formulär är som visas nedan

-MainForm(ParentForm)
 -FormGroup(MedicineGroup)
  -FormArray(MedicineArray)

Jag ville iterera MedicineArray för vilket jag gjorde lite research och skrev följande kod

for (let control of soForm.get('MedicineGroup').controls['MedicineArray'].controls) {
    medObj.name.push(control.controls['MedName'].value);
  }

Koden fungerar bra men jag får en varning, som säger

Property 'controls' does not exist on type 'AbstractControl'.

Finns det något annat eller bättre sätt att iterera ett FormArray som finns inuti ett FormGroup?

Svar #1

Du kan försöka använda ['controls'] istället för .controls:

for (let control of soForm.get('MedicineGroup')['controls']['MedicineArray']['controls']) {
    // ...
}

Ett annat alternativ skulle vara:

const formArray = soForm.get('MedicineGroup.MedicineArray') as FormArray;
console.log(formArray);

Det är en god praxis att komma åt nästlade kontroller med punktnotation.

Svar #2

Anledningen till att detta inträffar är att typ systemet förstår att du har en AbstractControl, eftersom AbstractControl.prototype.get() returnerar en AbstractControl, men det vet inte vilken konkret AbstractControl du refererar till, så att komma åt en controls-egenskap orsakar denna varning.

Du har några alternativ för hur du kan lösa det, typomvandling eller att införa en annan symbol, men metoden är densamma: ge bättre typinformation:

let aFormArray: FormArray = soForm.get('MedicineGroup.MedicineArray');

for (let c of aFormArray.controls) {
    medObj.name.push(c.controls['MedName'].value);
}

Relaterade artiklar