feat(wizardPreValidation): add a pre validation, to prevent to go to …

…the next step in wizard
baloise · Aug 27, 2024 · f154eaa · f154eaa
1 parent fef7f4c
commit f154eaa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/projects/demo/src/app/home.component.html b/projects/demo/src/app/home.component.html
@@ -2,6 +2,7 @@
   <bal-card>
     <bal-card-content>
       <bal-form-wizard
+        [beforeNavigateForwardValidation]="preNavigationValidator(steps[0].form?.get(firstName)?.value)"
         *ngIf="submittedData == null"
         [steps]="steps"
         [labels]="{
@@ -17,7 +18,7 @@
         (beforeNavigateForward)="onBeforeNavigateForward()"
         (navigateForward)="onNavigateForward($event)"
         (navigateBackward)="onNavigateBackward($event)"
-        (navigationFailed)="onNavigationFailed()"
+        (navigationFailed)="onNavigationFailed($event)"
         (submitForm)="submitForm($event)"
       >
         <bal-wizard-step [name]="steps[0].name">

diff --git a/projects/demo/src/app/home.component.ts b/projects/demo/src/app/home.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormControl, FormGroup, Validators } from '@angular/forms'
-import {WizardStep} from "../../../lib/src/form/form-wizard/models";
-import {FormWizardComponent} from "../../../lib/src/form/form-wizard/form-wizard.component";
+import { WizardStep } from '../../../lib/src/form/form-wizard/models'
+import { FormWizardComponent, ValidationResult } from '../../../lib/src/form/form-wizard/form-wizard.component'
+import { of } from 'rxjs'
 
 @Component({
   selector: 'app-home',
@@ -52,6 +53,10 @@ export class HomeComponent implements OnInit {
     },
   ]
 
+  preNavigationValidator = (firstName: string) => {
+    return of<ValidationResult>(this.validateName(firstName))
+  }
+
   ngOnInit() {
     this.submittedData = null
   }
@@ -62,15 +67,33 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  onBeforeNavigateForward() {}
+  onBeforeNavigateForward() {
+  }
 
-  onNavigateForward(e: WizardStep) {}
+  onNavigateForward(e: WizardStep) {
+  }
 
-  onNavigateBackward(e: WizardStep) {}
+  onNavigateBackward(e: WizardStep) {
+  }
 
-  onNavigationFailed() {}
+  onNavigationFailed(e: string) {
+    window.alert('error: ' + e)
+  }
 
   isStep(index: number): boolean {
     return this.formWizardComponent != null ? this.formWizardComponent.isStep(this.steps[index]) : index === 0
   }
+
+  private validateName(name: string): ValidationResult {
+    return name?.indexOf('super') > -1 ?
+      {
+        isValid: true,
+      }
+      :
+      {
+        errorLabel: 'firstname should contain "super"',
+        isValid: false,
+      }
+
+  }
 }
diff --git a/projects/lib/src/form/form-wizard/form-wizard.component.ts b/projects/lib/src/form/form-wizard/form-wizard.component.ts
@@ -13,7 +13,7 @@ import {
 } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { NavigationEnd, Router, RouterEvent } from '@angular/router'
-import { first, Subscription } from 'rxjs'
+import { first, Observable, Subscription } from 'rxjs'
 import { parse } from 'query-string'
 import { isNumber } from 'lodash'
 import { BalFormWrapper } from '../form-wrapper'
@@ -22,6 +22,12 @@ import { WizardStepComponent } from './wizard-step/wizard-step.component'
 
 const URL_PARAM_STEP = 'step'
 
+export interface ValidationResult {
+  errorLabel?: string;
+  isValid: boolean;
+}
+
+
 @Component({
   selector: 'bal-form-wizard',
   templateUrl: 'form-wizard.component.html',
@@ -40,11 +46,12 @@ export class FormWizardComponent implements OnInit, OnChanges, AfterContentInit,
   }
   @Input() disableStepsAfterActiveStep = false
   @Input() enableDirectNavigationBackward = false
+  @Input() beforeNavigateForwardValidation: Observable<ValidationResult> | undefined
 
   @Output() beforeNavigateForward = new EventEmitter<WizardStep>()
   @Output() navigateForward = new EventEmitter<WizardStep>()
   @Output() navigateBackward = new EventEmitter<WizardStep>()
-  @Output() navigationFailed = new EventEmitter<void>()
+  @Output() navigationFailed = new EventEmitter<string>()
   @Output() submitForm = new EventEmitter<FormGroup | null>()
   @Output() clickOnStep: EventEmitter<WizardStep> = new EventEmitter<WizardStep>()
 
@@ -130,13 +137,26 @@ export class FormWizardComponent implements OnInit, OnChanges, AfterContentInit,
       // wait for async validators
       activeForm.statusChanges
         .pipe(first())
-        .subscribe(() => this.checkValidationResultAndPerformAction(activeForm, formWrapper))
+        .subscribe(() => this.beforeValidateCheckValidationResultAndPerformAction(activeForm, formWrapper))
+    } else {
+      this.beforeValidateCheckValidationResultAndPerformAction(activeForm, formWrapper)
+    }
+  }
+
+  private beforeValidateCheckValidationResultAndPerformAction(activeForm: FormGroup | undefined, formWrapper: BalFormWrapper) {
+    if (this.beforeNavigateForwardValidation) {
+      this.beforeNavigateForwardValidation.subscribe(
+        (validationResult) => validationResult.isValid ?
+          this.checkValidationResultAndPerformAction(activeForm, formWrapper) :
+          this.navigationFailed.emit(validationResult.errorLabel),
+        () => this.navigationFailed.emit(),
+      )
     } else {
       this.checkValidationResultAndPerformAction(activeForm, formWrapper)
     }
   }
 
-  private checkValidationResultAndPerformAction(activeForm: FormGroup | undefined, formWrapper: BalFormWrapper) {
+  private checkValidationResultAndPerformAction(activeForm: FormGroup<any> | undefined, formWrapper: BalFormWrapper) {
     if (activeForm && activeForm.valid) {
       this.beforeNavigateForward.emit(this.activeStep)
       this.goForwardWithoutValidation()