angular-archwizard icon indicating copy to clipboard operation
angular-archwizard copied to clipboard

awSelectedStep condition

Open roydekleijn opened this issue 3 years ago • 5 comments

Hello,

Is there a particular reason why we cannot apply a condition to awSelectedStep?

roydekleijn avatar Jul 18 '21 11:07 roydekleijn

Not really, it was not an issue as of now :)

When thinking about adding a condition to awSelectedStep I have multiple open questions we would need to answer first:

  • how do we ensure that only a single wizard step is annotated with awSelectedStep at once?
  • how should the wizard react if multiple steps "activate" at the same time?
  • what should happen if the condition flips for some reason? Should it automatically navigate then? How should the navigation constraints be validated then?

Currently it is only possible to set awSelectedStep once at startup. If you change it later on it is ignored. I guess this would then need to change potentially, right?

If you need to define the selected step at startup using some kind of logic, you can currently do so by setting the defaultStepIndex input of your WizardComponent using an auxillary method.

madoar avatar Jul 18 '21 19:07 madoar

It is also important to note that the default step input is not validated at the moment. This means that you can basically define an arbitrary step as the default step and it will be applied. If a "bad" index is used for the default step index, which violates the constraints of your navigation mode, your wizard may behave different from your expectations (for example it may prevent the user from navigating at all or only allow backwards navigation)

madoar avatar Jul 18 '21 20:07 madoar

Awesome, defaultStepIndex helped me!

roydekleijn avatar Jul 18 '21 21:07 roydekleijn

I noticed that my button (to go to the next step) doesn't do anything anymore.

This is how the button looks like:

<button [disabled]="!canExitStep2" type="button" class="btn btn-success" awNextStep>Proceed to checkout</button>

This is how my code looks like:

<aw-wizard #wizard [defaultStepIndex]="stepId" [navBarLayout]="'large-filled-symbols'">

stepId: any = 0;

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      if(params['stepId']) {
        this.stepId = params['stepId'] - 1;
      }
    });
}

When I click the button, I stay in the same step, so nothing happens. Is the default behavior useless now? or do I understand you incorrectly?

roydekleijn avatar Jul 18 '21 21:07 roydekleijn

I noticed that my button (to go to the next step) doesn't do anything anymore.

This is how the button looks like:

<button [disabled]="!canExitStep2" type="button" class="btn btn-success" awNextStep>Proceed to checkout</button>

This is how my code looks like:

<aw-wizard #wizard [defaultStepIndex]="stepId" [navBarLayout]="'large-filled-symbols'">

stepId: any = 0;

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      if(params['stepId']) {
        this.stepId = params['stepId'] - 1;
      }
    });
}

When I click the button, I stay in the same step, so nothing happens. Is the default behavior useless now? or do I understand you incorrectly?

Thank you. It works to me.

carmonaca avatar Aug 18 '22 17:08 carmonaca