Stepper Validation


Topic: Stepper Validation

CWI_MDB pro premium priority asked 6 months ago

Hi,

Is it possible to run code when the user clicks on the 'Next' button in a Stepper component even though it fails the form validation?

What I'm trying to achieve is a popup to the user when the form validation fails but I can't see how this can be achieved? The form controls highlight red to indicate that they are required fields, but I would like to initiate a popup to the user as well.

I have also tried creating a custom validation function to fire on submit but it doesn't seem fire at all.

Many thanks,


Arkadiusz Idzikowski staff answered 6 months ago

There are two events: stepValid and stepInvalid that will be fired for success/error validation. We will add them to the API page in the documentation because it looks like we forgot to do that.

I think using those listeners should help in this case. You need to add them to the <mdb-stepper> component:

    <mdb-stepper
      [linear]="true"
      (stepChange)="onStepChange($event)"
      (stepValid)="onStepValid()"
      (stepInvalid)="onStepInvalid()"
    >

CWI_MDB pro premium priority commented 6 months ago

Hi,

Thanks for your response.

Can you tell me which version these events were added in at? I have tried and the event isn't firing. When I have checked the stepper.component.d.ts file there is only one event - stepChange - listed.

Many thanks.


Arkadiusz Idzikowski staff commented 6 months ago

These events were added in v3.0.1.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Mac Studio
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No