Angular 6 无法在 ng-container 中访问表单数组

Question

我有一个 ng-container，它描述了我所有可能的表单字段模板，基本上是在一个大的 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输入指定的formgroup:

<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），尽管找到没有问题对应于基本表单组控件的控件（来自数据模型的名称和描述）。有没有办法可以手动将表单组引用传递给 ng-container？可以看到一个简短的例子here。

Answer 1

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

不过，为了让您的示例正常工作，有两件事需要解决

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

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

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

FormArray 绑定

如果您要绑定到 formArray，请记住，您需要外部控件上的 formArrayName 以及与索引的绑定。请在这里查看进一步的解释：FormArray binding

还有一件事

您的 stackblitz 中有错别字：secitonHeader 而不是 sectionHeader。

这是一个工作：stackblitz

Angular 6 无法在 ng-container 中访问表单数组

Angular 6 Form Array cannot be accessed inside an ng-container

angular

angular-reactive-forms

ng-template

ng-container

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

FormArray 绑定

还有一件事