在 mat-table 内创建表单的 Angular 材料

Question

我需要在垫子表内创建一个表单（垫子表在垫子对话框内的步进器内）。截至目前，我创建了一个表格，并在 td 标记内使用了带有 mat-input 的 mat-form 字段，但我的输入似乎被禁用，因为我无法使用它。

保存表格的步骤的html代码：

<mat-step [stepControl]="contactsFormGroup">
        <ng-template matStepLabel>Contacts</ng-template>
        <div
          fxLayout="column"
          fxLayoutAlign="center Center"
          fxLayoutGap="20px"
          class="form-wrapper-add-contacts"
          [formGroup]="contactsFormGroup"
        >
          <div class="add-contacts-table-wrapper">
            <table
              mat-table
              [dataSource]="contactsFormGroup.get('contactsArray').value"
              formArrayName="contactsArray"
            >
              <ng-container matColumnDef="indexPos">
                <th mat-header-cell *matHeaderCellDef>No.</th>
                <td mat-cell *matCellDef="let element; let i = index">
                  {{ i + 1 + "." }}
                </td>
              </ng-container>

              <ng-container matColumnDef="firstName">
                <th mat-header-cell *matHeaderCellDef>First Name</th>
                <td
                  mat-cell
                  *matCellDef="let element; let i = index"
                  formGroupName="{{ i }}"
                >
                  <mat-form-field appearance="fill">
                    <mat-label>First Name</mat-label>
                    <input
                      matInput
                      placeholder="First Name"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="off"
                      type="text"
                      formControlName="contactFirstName"
                      required
                    />
                  </mat-form-field>
                </td>
              </ng-container>

              <ng-container matColumnDef="lastName">
                <th mat-header-cell *matHeaderCellDef>Last Name</th>
                <td
                  mat-cell
                  *matCellDef="let element; let i = index"
                  formGroupName="{{ i }}"
                >
                  <mat-form-field appearance="fill">
                    <mat-label>Last Name</mat-label>
                    <input
                      matInput
                      placeholder="Last Name"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="off"
                      type="text"
                      formControlName="contactLastName"
                      required
                    />
                  </mat-form-field>
                </td>
              </ng-container>

              <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef>Email</th>
                <td
                  mat-cell
                  *matCellDef="let element; let i = index"
                  formGroupName="{{ i }}"
                >
                  <mat-form-field appearance="fill">
                    <mat-label>Email</mat-label>
                    <input
                      matInput
                      placeholder="Email"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="off"
                      type="text"
                      formControlName="contactEmail"
                      required
                    />
                  </mat-form-field>
                </td>
              </ng-container>

              <ng-container matColumnDef="phone">
                <th mat-header-cell *matHeaderCellDef>Phone</th>
                <td
                  mat-cell
                  *matCellDef="let element; let i = index"
                  formGroupName="{{ i }}"
                >
                  <mat-form-field appearance="fill">
                    <mat-label>Phone</mat-label>
                    <input
                      matInput
                      placeholder="Phone"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="off"
                      type="text"
                      formControlName="contactPhone"
                      required
                    />
                  </mat-form-field>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>
          </div>

          <div class="previous-button-wrapper">
            <button mat-button matStepperPrevious type="button">
              Back
            </button>
          </div>
        </div>
      </mat-step>

表单组的ts代码：

contactsFormGroup: FormGroup = this.fb.group({
    contactsArray: this.fb.array([this.fb.group({
      contactFirstName: ['', [Validators.required, Validators.maxLength(200)]],
      contactLastName: ['', [Validators.required, Validators.maxLength(200)]],
      contactEmail: ['', [Validators.required, Validators.email, Validators.maxLength(200)]],
      contactPhone: ['', [Validators.required, Validators.maxLength(15)]]
    }, { updateOn: 'blur' })])
  }, { updateOn: 'blur' });

目前的桌子图片：form - table

Answer 1

让它工作，改变这个：

[dataSource]="contactsFormGroup.get('contactsArray').value

到：

[dataSource]=contactsFormGroup.get('contactsArray').controls