0

I've got a Material Stepper connected to a Reactive Form. The actual steps vary, depending on the results of previous steps.

For example, on the first step of the wizard, there is a slider control to select t-shirt or coffee (totally made up example).

The subsequent steps for t-shirt (where they would choose a size and color) are totally different than for coffee (where they might choose drip vs. espresso, size, number of creams etc.).

We're using one FormGroup for the wizard, with two nested form groups, one for t-shirts, one for coffee. There's also a nested duplication in there, because both t-shirts and coffee have a size property. So each form group has a "size" form control.

Is this the correct approach, or would it be better to use two different components, each with their own form group, and display one or the other conditionally based on the slider value? Something like:

<mat-slider [ngModel]="productType"></mat-slider>
<app-tshirt-selector [*ngIf]="productType==='t-shirt'"></app-tshirt-selector>
<app-coffee-selector [*ngIf]="productType==='coffee'"></app-coffee-selector>

Whether or not to factor the duplicated control out of the nested form groups and into the main form group is a related question. My preference is to factor it out, and put it into the outer form group. But if we use two different components, each with their own form group, then I probably would want a size form control in each component's form.

Thanks.

FunkMonkey33
  • 1,956
  • 2
  • 16
  • 24
  • 1
    The better is the implementation that you know in best, can debug, maintain and expend in the future. The one which seems to you simple, quick, easy to understand to you and an outside eye :) – Vega May 07 '23 at 18:49
  • Otherwise, both approaches seem be good. I would put two spare size controls in the first option, though – Vega May 07 '23 at 18:50

0 Answers0