Angular material creating a form inside mat-table

Question

I need to create a form inside a mat-table (the mat table is inside a stepper which is inside a mat-dialog). As of right now I created a table and inside the td tag I used mat-form field with mat-input inside but my input seems to be disabled as I can't use it.

html code for the step which holds the table:

<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 code for the form group:

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

a picture of the table as of right now: form - table

Answer 1

Got it to work, Changed this:

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

to:

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