Angular 5: 表单数组中的表单组内嵌套表单控件

Question

我在 formArray 中的 formGroup 中引用 formControlName 时遇到问题。

我的 formArray 中的 formGroup 的结构如下：

    const marketingFileFormGroup = this.fb.group({
      file: [],
      fileName: [],
      fileType: [],
      fileUrl: [],
      createdBy: [],
      createdAt: [],
    });

这是我目前的 html 设置：

<form [formGroup]="marketingProposal" novalidate>
  <div formArrayName="materials">
    <accordion>
      <accordion-group [isOpen]="true">
        <div accordion-heading class="lead clearfix">
          Marketing Materials
          <span class="float-right">
            <i class="fa fa-navicon" aria-hidden="true"></i>
          </span>
        </div>
        <div class="row">
          <div class="col-md-4">
            <button class="btn btn-primary" type="button" (click)="uploadFile()">Upload Marketing Material</button>
          </div>
        </div>
        <div class="m-3"></div>
        <div class="row">
          <div class="col-md-12 animated fadeIn" *ngIf="materials.controls.length > 0">
              <table class="table">
                  <thead>
                      <tr>
                          <th scope="col">File Name</th>
                      </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let material of marketingMaterials; let i = index">                     
                        <td>
                          <div class="form-group">
                            <input class="form-control" [value]="material.value.fileName" formControlName="fileName">
                          </div>
                        <td>
                    </tr>
                  </tbody>
                  
                  ...

我目前遇到错误无法找到路径为的控件：'materials -> fileName'

如何从 formArray 中的 formGroup 中引用文件名？

Answer 1

行

<tr *ngFor="let material of marketingMaterials; let i = index">

应该是：

<tr *ngFor="let material of marketingMaterials; let i = index" [formGroupName]="i">

Angular 5: 表单数组中的表单组内嵌套表单控件

Angular 5: nested form control within form group within form array

angular5

angular-forms

angular-formbuilder