Как добраться до вложенного (* ngFor) formControl для проверки в ReactiveForms?

Question

Мне нужно создать многоразовую динамическую форму с проверкой. Я передаю пользовательскую структуру шаблона формы со значениями атрибутов FormControl из файла .ts и строю форму с помощью *ngFor и ngSwitch Для стилизации заливок в главном FormGroup Я ставлю каждые 3 поля вводав новый FormGroup, используя *ngFor. У меня есть div с сообщением проверки, и я пытаюсь переключить видимость, используя *ngIf с помощью метода FormGroup class 'get. Проблема в том, что я не могу найти путь к нужному элементу управления.

<form [formGroup]="dynamicFilterFormGroup" (ngSubmit)="onSubmit()">
    <div class="form-content">
        <div class="form-row" *ngFor="let formRow of filterFormTemplate.formGroupArray" formGroupName="{{formRow.formGroupName}}">
            <div class="form-element" *ngFor="let formElem of formRow.formControls">
                <div [ngSwitch]="formElem.type">
                    <div *ngSwitchCase="'text'">
                        <div class="input-container">
                            <label>{{formElem.label}}</label>
                            <input type="text" formControlName="{{formElem.name}}" pInputText/>
                            <div class="form-validation-text" *ngIf="!dynamicFilterFormGroup.get(formRow.formGroupName.formElem.name).valid && dynamicFilterFormGroup.get(formRow.formGroupName.formElem.name).touched">{{ 'formElem.validationText' | lang }}</div>
                        </div>
                    </div>
                    <div *ngSwitchCase="'number'">
                        <div class="input-container">
                            <label>{{formElem.label}}</label>
                            <input type="number" formControlName="{{formElem.name}}" pInputText/>
                        </div>
                    </div>
                    ...
                    ...
                    ...
                </div>  
            </div>
        </div>
        <button class="form-element" pButton type="button" (click)="onSubmit()" label="{{ 'button_search' | lang}}"></button>
    </div>
</form>

Итак, проблемный ряд:

<div class="form-validation-text" *ngIf="!dynamicFilterFormGroup.get(formRow.formGroupName.formElem.name).valid && dynamicFilterFormGroup.get(formRow.formGroupName.formElem.name).touched">{{ 'formElem.validationText' | lang }}</div>

Получение:

DynamicTableComponent.html:11 ERROR TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateDirectives] (DynamicTableComponent.html:11)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkAndUpdateView (core.js:44270)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44636)

Заранее благодарен за любую помощь!

Answer 1

Решение состоит в том, чтобы использовать .get () дважды. Сначала выведите внешнюю группу formGroup, а затем внутреннюю:

<div class="form-validation-text" *ngIf="!dynamicFilterFormGroup.get(formRow.formGroupName).get(formElem.name).valid && dynamicFilterFormGroup.get(formRow.formGroupName).get(formElem.name).touched">{{ formElem.validationText }}</div>

Answer 2

Просто используйте ?, чтобы сделать несколько вариабельных значений необязательными

<div class="form-validation-text" *ngIf="!dynamicFilterFormGroup.get(formRow.formGroupName.formElem?.name)?.valid && dynamicFilterFormGroup.get(formRow.formGroupName.formElem?.name)?.touched">{{ formElem?.validationText | lang }}</div>