angular5 - 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 中引用 fileName？

标签： angular5angular-formsangular-formbuilder

Answer 1

线

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

应该：

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