Exploring the functionality of the angular-material stepper component with reactive forms has raised questions about the best architectural approach to allow each mat-step to access a unique formGroup.
In reviewing two examples, it appears that creating formGroup1 and formGroup2 outside of the stepper (as in example 1) is the simplest solution. However, the concern arises within each <form>, where I aim to have only one custom component containing its own
formGroup</code without involving the stepper container in managing the <code>formGroups<parent that declares formGroup1>
<mat-vertical-stepper linear>
<mat-step [stepControl]="formGroup1">
<form [formGroup]="formGroup1">
<component that uses formGroup1></component>
</form>
</mat-step>
<<mat-vertical-stepper>
</parent>
<parent oblivious to formGroup2>
<mat-vertical-stepper linear>
<mat-step [stepControl]="formGroup2">
<form [formGroup]="formGroup2">
<component declaring formGroup2></component>
</form>
</mat-step>
</mat-vertical-stepper>
</parent>
Possible solutions contemplated:
- Declare all formGroups in the parent component of the stepper and pass them down to child components (con: burdensome for the parent and complicates code comprehension)
- Have each child component declare its formGroup and emit it to the parent using
@Output(). Employ aFormArrayin the parent component to remain unaware of child logic (con: requires indexing or identification to ensure correct form placement) - Utilize a single form in the parent encompassing the entire stepper process
An optimal solution to this problem is sought after as it seems like a crucial aspect may be overlooked.