Angular материал, формирующий форму внутри мат-стола

Question

Мне нужно создать форму внутри таблицы матов (таблица матов находится внутри степпера, который находится внутри диалога матов). На данный момент я создал таблицу и внутри тега td использовал поле mat-form с mat-input внутри, но мой ввод, кажется, отключен, так как я не могу его использовать.

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