Search code examples
angularjswizard

angular-wizard: How to set step2 (or 3,4,..) instead step 1 on form load?


I have a form with angular-wizard steps like below

<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
    <wz-step wz-title="Unqualified">
        <div class="panel-body">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
                <label class="control-label">Source Lead</label>
                <input type="text" class="form-control input-sm clearable" ng-model="source_lead"  />
            </div>
        </div>
    </wz-step>
    <wz-step wz-title="New">
        <div class="panel-body">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
                <label class="control-label">Company</label>
                <input type="text" class="form-control input-sm clearable" ng-model="company" />
            </div>
        </div>
    </wz-step>
    <wz-step wz-title="Working">
        <div class="panel-body">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
                <label class="control-label">Title</label>
                <input type="text" class="form-control input-sm clearable" ng-model="title" />
            </div>
        </div>
    </wz-step>
    <wz-step wz-title="Nurturing">
        <div class="panel-body">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
                <label class="control-label">Rating</label>
                <input type="text" class="form-control input-sm clearable" ng-model="rating" />
            </div>
        </div>
    </wz-step>
    <wz-step wz-title="Converted">

    </wz-step>
    <div class="panel-body">
        <button type="submit" class="btn btn-sm btn-primary pull-right" wz-next ng-click="StepCompleted(currentStep)">Completed</button>
    </div>
</wizard>

I want to focus to the step "New" (or "Working", or "Converted",...) instead step "Unqualified" on form load.

What can I do? Thanks in advance!


Solution

  • Here's what you can do. In their WizardHandler service, we have access to functions like goTo() (on wizard() which is your current wizard). Like this:

    $timeout(function() {
        WizardHandler.wizard().goTo("Working");
    });
    

    Why inside $timeout?

    Because, if the second parameter to $timeout i.e. delay is not provided, the default behaviour is to execute the function after the DOM has completed rendering.

    And, we need to execute this after wizard completes rendering.

    Here's the working plunker

    Alternatively, if you want the previous steps to be visited (visited steps look green with default styles), you can write a loop that goes next() until we reach our desired step (in this case, Working)