Unable to step to next page with [canExit]

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 / angular-archwizard

Unable to step to next page with [canExit] #351