Angular 材料在 mat-table 內創建表格

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' });

截至目前的表格圖片：表格 - 表格

Answer 1

讓它工作，改變了這個：

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

至：

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