Topic: MDB5 Datepicker toggle submits form

Multilabel GmbH premium asked 2 years ago

When i press on the datepicker toggle the form submits and ngSubmit fires. I dont know if thats a bug or i used it wrong. Please help. I use (1.0.0-beta7 (28.06.2021)) but i cant select it

here is the component code:

<div class="container-fluid mt-5" style="width: 90%;">
<form [formGroup]="form" (ngSubmit)="create_profile()">
    <div class="row">
        <div class="col-6">
            <div class="card text-center">
                <div class="card-header">Stammdaten</div>
                <div class="card-body">
                    <table class="table table-sm"><tbody>
                                <td class="pe-3 text-start align-middle">Geburtstag</td>
                                        <input mdbInput [mdbDatepicker]="datepicker" type="text" class="form-control" id="exampleDatepicker" formControlName="birthday" />
                                        <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
                                        <mdb-datepicker #datepicker [options]="translationOptions" [format]="''"></mdb-datepicker>

                    <button type="submit" [disabled]="!form.valid" class="btn btn-primary float-end">Speichern</button>


Arkadiusz Idzikowski staff answered 2 years ago

It is a bug that we need to fix on our end. As a workaround for now, please try to prevent default action on click event:

<mdb-datepicker-toggle [mdbDatepicker]="datepicker" (click)="$event.preventDefault()"></mdb-datepicker-toggle>

Dave Moniz priority answered 2 years ago

This was fixed as of MDB5 1.0.0

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No