Repository navigation
Unable to step to next page with [canExit] #351
Description
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 }
Activity
madoar commentedon Jul 18, 2021
Which version of
angular-archwizardare you using? The inputnavigationModeofWizardComponentdoes 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 ofangular-archwizard?If this does not help. Can you please provide me a short buildable example project illustrating your issue?