角反应式形式循环

Question

目标是拥有一个动态组件，以自动为给定的反应形式呈现所需的错误消息。

.component.html

        <ng-template #errTpl let-control>
            <div *ngIf="control.value?.invalid && (control.value?.dirty || control.value?.touched)">
                <div *ngIf="control.value?.errors?.['required']" class="alert alert-danger">
                    {{ control.key | titlecase }} is required
                </div>
            </div>
        </ng-template>

        <div *ngFor="let control of signUpForm.controls | keyvalue">
                <div *ngIf="isFormGroup(signUpForm.get(control.key)); else elseBlock">
                    <!-- How to loop over controls? -->
                    <div *ngIf="signUpForm.get(control.key)['controls'] !== null">
                        ...
                    </div>
                </div>
                <ng-template #elseBlock>
                    <ng-container [ngTemplateOutlet]="errTpl" [ngTemplateOutletContext]="{ $implicit: control }">
                    </ng-container>
                </ng-template>
        </div>

在仅具有formcontrol s的表单时，可以正常工作，以处理formgroup s，以下方法添加到组件中并使用在上面的*ngif中，检查所处理的内容。

.component.ts

  isFormGroup(candidate: any) {
    return candidate instanceof FormGroup
  }

但是，通过formgroup控件循环，无法按需工作。

访问：

signUpForm.get(control.key)['controls']

最终进入：

TS2531: Object is possibly 'null'.

即使将访问访问包装到有条件的块中时，也会出现相同的错误消息。

<div *ngIf="signUpForm.get(control.key)['controls'] !== null">
    ...
</div>

如何访问控件，以便能够将它们传递到循环中的模板上。

还是有一种更好的方法来应用标准错误消息而无需硬编码每个错误消息块，而无需在每个控件上循环？

访问子控制器（编辑）

signUpForm.get(control.key)!.controls

投掷

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

---

signUpForm.get(control.key)!['controls']

的其他方法：

TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

使用.get（）返回null。

---

<div *ngFor="let childControl of control.value!.value | keyvalue">
    {{childControl.value?.error}}

使用上述工作来获取childControl，但尝试获取erros最终以：

TS2571: Object is of type 'unknown'.