I am currently facing an issue where I need to embed a form within a mat-table that is contained inside a stepper which is housed within a mat-dialog. Currently, I have set up a table with mat-form-field and mat-input inside the td tags, but my input appears to be disabled and unusable.
Here is the HTML code for the step that contains 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>
// rest of the table structure...
</table>
</div>
<div class="previous-button-wrapper">
<button mat-button matStepperPrevious type="button">
Back
</button>
</div>
</div>
</mat-step>
Below is the TypeScript 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' });
Attached is a screenshot showcasing the current state of the table: form - table