Topic: Stepper Validation

CWI_MDB priority asked 4 weeks 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,


thomas642daniel free answered 3 weeks ago


I also have this same question and I cannot find any proper answers, But today i was find my solution is here. Thanks for making my work a lot easier. Publix Passport


Arkadiusz Idzikowski staff answered 4 weeks 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 priority commented 4 weeks 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 3 weeks 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

  • ForumUser: Priority
  • 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