不能在ng-container内部访问Angular 6 Form Array

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'
    }
  ]
}

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

我希望能够在基本表单组以及表单数组中的表单组中重用输入switch语句。但是，ng-container内部无法访问由formarray的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无法找到formarray的FormGroups内的控件（即数据模型中的sectionName），尽管找到与基本formgroup控件相对应的控件（名称和数据模型中的描述）。有没有一种方法可以手动将表单组引用传递给ng-container？可以看到一个简短的示例here。

Answer 1

首先，我可能还会使用一个子组件，而不是上面注释中建议的ng-template。

尽管如此，为了使您的示例正常工作，需要修复两件事

在另一个组件或ng-template中使用FormControls

每次在ng模板内使用formGroup的formControl时，如果form标记位于ng模板之外，则需要确保在ng模板内添加具有formGroup绑定的标记

在您的情况下，有些特殊之处，因为ng-template中的formGroup实际上是一个subFormGroup-每个formArrayItem的formGroup

FormArray绑定

如果要绑定到formArray，则需要牢记，您需要外部控件上的formArrayName以及对索引的绑定。请在此处查看更多说明：FormArray binding

还有一件事

您的堆叠中有一个错字：secitonHeader而不是sectionHeader。

这里正在工作：stackblitz