Как перебирать FormArray в FormGroup в реактивной форме Angular
Структура моей формы показана ниже.
-MainForm(ParentForm)
-FormGroup(MedicineGroup)
-FormArray(MedicineArray)
Я хотел повторить MedicineArray, для чего я провел небольшое исследование и написал приведенный ниже код.
for (let control of soForm.get('MedicineGroup').controls['MedicineArray'].controls) {
medObj.name.push(control.controls['MedName'].value);
}
Код работает нормально, но я получаю предупреждение, в котором говорится
Property 'controls' does not exist on type 'AbstractControl'.
Есть ли другой или лучший способ итерации FormArray, который находится внутри FormGroup?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете попробовать использовать ['controls'] вместо .controls:
for (let control of soForm.get('MedicineGroup')['controls']['MedicineArray']['controls']) {
// ...
}
Другой вариант:
const formArray = soForm.get('MedicineGroup.MedicineArray') as FormArray;
console.info(formArray);
Хорошей практикой является доступ к вложенным элементам управления с использованием записи через точку.
Это происходит потому, что система типов понимает, что у вас есть AbstractControl, поскольку AbstractControl.prototype.get() возвращает AbstractControl, но не знает, на какой конкретный AbstractControl вы ссылаетесь, поэтому доступ к свойству controls вызывает это предупреждение.
У вас есть несколько вариантов, как решить эту проблему, приведя или введя другой символ, но метод тот же: предоставьте более точную информацию о типе:
let aFormArray: FormArray = soForm.get('MedicineGroup.MedicineArray');
for (let c of aFormArray.controls) {
medObj.name.push(c.controls['MedName'].value);
}