Angular 6 Form Array 無法在 ng 容器內存取

Question

我有一个ng容器，它描述了我所有可能的表单字段模板，基本上是一个大的switch语句，具体取决于字段的元数据：

<ng-template #dynamicFormField let-field="inputField">
<div *ngIf="field.dataTypeName == 'ShortText'">
<mat-form-field class="col-md-6">
<input matInput type="text" [placeholder]="field.attributeLabel" [formControlName]="field.attributeName">
</mat-form-field>
</div>
<div *ngIf="field.dataTypeName == 'LongText'">
<mat-form-field class="col-md-12">
<input matInput type="text" [placeholder]="field.attributeLabel" [formControlName]="field.attributeName">
</mat-form-field>
</div>
<div *ngIf="field.dataTypeName == 'Number'">
<mat-form-field>
<input matInput type="number" [placeholder]="field.attributeLabel" [formControlName]="field.attributeName">
</mat-form-field>
</div>
<ng-template>

我有一个基本的表单组，然后表单组的一个属性是一个表单数组，其中每个元素都有自己的表单组。例如，数据模型如下所示：

{
name: 'Article Name',
description: 'Some description of the article',
sections: [
{
sectionName: 'Rich text section',
sectionContent: 'Some rich text'
},
{
sectionName: 'Second section',
sectionContent: 'Some rich text'
}
]
}

其中每个字段都有描述其表单属性的相应元数据。

我希望能够在基本表单组以及表单数组中的表单组中重用输入开关语句。但是，ng-container 的内部无法访问由表单数组的 formGroupName 输入指定的表单组：

<div *ngFor="let field of this.sectionTypeSchemas[section.value.sectionTypeId]">
<div *ngIf="field.isVisible != false" formGroupName="{{i}}">
<ng-container *ngTemplateOutlet="dynamicFormField;context:{ inputField:field }"></ng-container>
</div>
</div>

我遇到的错误基本上是 Angular 找不到表单数组的 FormGroups 内部的控件(即数据模型中的 sectionName)，尽管查找与基本表单组控件对应的控件没有问题(来自数据模型的名称和描述)。有没有办法手动将表单组引用传递给 ng 容器？可以在此处看到一个简短的示例。

Answer 1

首先，我可能会使用子组件而不是上面的评论中建议的 ng 模板。

但是，为了使您的示例正常工作，需要修复两件事

在另一个组件或 ng 模板中使用表单控件

每次在 ng 模板中使用 formGroup 的 formControl 时，如果表单标签放置在 ng 模板之外，则需要确保在 ng 模板内添加具有 formGroup 绑定的标签。

在你的情况下，有一些特别的东西，因为你的ng模板中的formGroup实际上是一个子FormGroup - 每个formArrayItem 的formGroup

表单数组绑定

如果要绑定到 formArray，则需要记住，需要外部控件上的 formArrayName 以及与索引的绑定。请看这里进一步解释：表单数组绑定

还有一件事

你有一个错别字：secitonHeader而不是sectionHeader。

这是一个工作：堆叠闪电战