Unable to step to next page with [canExit]

[ibrahimunal]

Hi I have reactive form in aw-wizard-step and without validation check I restrict the stepping with [canExit]= "canExitStep1". I initialize my canExitStep1 variable as false. As I fill the all form fields it returns true and convert canExitStep1 false to true which let aw-wizard to skip to nextPage. However even though form is valid and canExitStep1 is true the awNextStep does not trigger at first but second. As a solution I tried to implement stepping process with TS by getting aw-wizard with ViewChild. but kept getting undefined erros just because having my aw-wizard template in a ng-template. I dont know why canExit does not trigger at first ? I'd be really greatfull if u could help.

` <ng-template #convertLeadModal>

<div class="model-body" style="padding: 10px;">
  <input type="hidden" tabindex="0" style="display: none;" />
  <aw-wizard  id="wizardForm" disableNavigationBar="true" navigationMode="free" [navBarLayout]="'large-empty-symbols'">
  <aw-wizard-step [stepTitle]="'Kullanıcı Bilgileri'" [canExit]="canExitStep1">

        </mat-form-field>
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Website</mat-label>
            <input matInput [(ngModel)]="website"   placeholder="Placeholder">
        </mat-form-field>
          </div>

        </div>

        <form [formGroup]="convertLeadForm1" (ngSubmit)="SubmitForm1()" autocomplete="off">
      
          <table class="w-100">
            <tr>
              <td>
                  <mat-form-field appearance="outline" class="w-100">
                      <mat-label>Branch Name</mat-label>
                      <input matInput placeholder="Placeholder" formControlName="branchName" >
                  </mat-form-field>
              </td>
              <td>
                  <mat-form-field appearance="outline" class="w-100">
                      <mat-label>Phone </mat-label>
                      <input matInput placeholder="Placeholder" formControlName="phone" >
                  </mat-form-field>
              </td>
              <td>
                  <mat-form-field appearance="outline" class="w-100">
                      <mat-label>email</mat-label>
                      <input matInput placeholder="Placeholder" formControlName="email" required>
                  </mat-form-field>
              </td>
          </tr>

          </table>
          <div class="text-right mt-3">
            <a href="javascript:void(0)" class="mr-3" (click)="closeModal()">İptal</a>
            <button  type="submit"  class="btn btn-sm btn-primary"  awNextStep [disabled]="convertLeadForm1.status === 'INVALID'" >İleri</button>
          </div>

        </form>
  </aw-wizard-step>

   <aw-wizard-step [stepTitle]="'User Detail'"  [canEnter]="canEnter" >
        <ng-template awWizardStepSymbol let-wizardStep="wizardStep">
          <i *ngIf="!wizardStep.completed" class="fa fa-search">2</i>
          <!--<i *ngIf="wizardStep.editing" data-feather="edit-3" appFeatherIcon></i>-->
          <i *ngIf="wizardStep.completed" data-feather="check" appFeatherIcon></i>
        </ng-template>
       
        <form [formGroup]="convertLeadForm2" (ngSubmit)="SubmitForm2()" autocomplete="off">
        <table class="w-100">
          <tr>
            <td>
                <mat-form-field appearance="outline" class="w-100">
                    <mat-label>Customer Owner </mat-label>
                    <input matInput placeholder="Placeholder" formControlName="contactName" >
                </mat-form-field>
            </td>
            <td>
                <mat-form-field appearance="outline" class="w-100">
                    <mat-label>User Name</mat-label>
                    <input matInput placeholder="Placeholder" formControlName="userName" >
                </mat-form-field>
            </td>
          </tr>
        </table>
        <div class="text-right mt-3">
          <a href="javascript:void(0)" class="mr-3" (click)="closeModal()">İptal</a>
          <button type="button" class="btn btn-sm btn-primary mr-2" awPreviousStep>Geri</button>
          <button type="submit"> save</button>
       </div>

        </form>

      </aw-wizard-step>

  </aw-wizard>        

</div>

`

TS
SubmitForm1(){ this.canExitStep1 = this.convertLeadForm1.valid }

[madoar]

Which version of angular-archwizard are you using? The input navigationMode of WizardComponent does not exist anymore in the current version, it appears that you are using an older version. Can you please try again with the newest version of angular-archwizard?

If this does not help. Can you please provide me a short buildable example project illustrating your issue?