need an example of how to use mdb-date-picker in a reactive


Topic: need an example of how to use mdb-date-picker in a reactive form with formControlName

itpartner pro asked 2 years ago

I am trying to use mdb-date-picker part of the reactive form in angular. The commented one works (styling wise, validation message wise), but I need a calendar popup like the one by mdb-date-picker. The second is not working properly. I know this is my hacky way, but the question is how do one use these in reactive form with formControlName.
<!--<div class="md-form">
   <i class="fa fa-calendar prefix grey-text"></i>                                                
   <input type="text" id="birthdate" class="form-control" formControlName="birthdate" mdbInputDirective
      data-error="Valid birthdate is required" data-success="&nbsp;">
   <label for="birthdate">Birth date</label>
</div> -->

<div class="md-form">
	<i class="fa fa-calendar prefix grey-text"></i>
	<mdb-date-picker id="birthdate" class="form-control" formControlName="birthdate" mdbInputDirective
		data-error="Valid birthdate is required" data-success="&nbsp;"></mdb-date-picker>
	<label for="birthdate">Birth date</label>
</div>

tano pro answered 2 years ago

Hi,
It works as expected. Remove mdbinputdirective, class and add label as input:
<mdb-date-picker formControlName="date" label="Date"[options]="myDatePickerOptions"[locale]="'hu'"></mdb-date-picker>
Bests,
tano

itpartner pro commented 2 years ago

Even without mdbinputdirective the validation message is not showing. Actually even without that the styling is not the same as say:

<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="lastname" class="form-control" formControlName="lastname" mdbInputDirective
data-error="Lastname is required" data-success="&nbsp;">
<label for="lastname">Last name</label>
</div>

The selected date overlaps the label. Now the best I could achieve is this:

<div class="md-form">
<i class="fa fa-calendar prefix grey-text"></i>
<mdb-date-picker [options]="birthDateDatePickerOptions"
id="birthdate" formControlName="birthdate"
data-error="Valid birthdate is required" data-success="&nbsp;"></mdb-date-picker>
<label for="lastname">Birth date</label>
</div>

This tied to the reactive "ts" validation fine. The submit button stays disabled until I select a date, which is great, but there are no visual clues to the user. I think this is because of the lack of mdbinputdirective.

Could you show me how to make these two lastname/birthdate would work exactly the same? Lastname is working great with showing the validation and the likes.


Arkadiusz Idzikowski staff answered 2 years ago

Dear itpartner, Do you want to just add reactive forms to date picker or implement validation as well? There were some problems with displaying validation messages on date picker and we are currently working on it. Regards, Arek

itpartner pro commented 2 years ago

I definitely need validation. Thank you for quick response.


itpartner pro commented 2 years ago

Also when you try to key in the date after tabbing to the field I get this when I type

01/20

I get

01/20/Nan

My format is MM/DD/YYYY - which is working when I select from a calendar.


itpartner pro commented 2 years ago

The keyboard seems to work when the format is the default like

yyyy-mm-dd

2015-01-01 works but not with mm/dd/yyyy


Arkadiusz Idzikowski staff commented 2 years ago

As I already mentioned, validation from mdbInputDirective doesn't work correctly on date picker component. We are currently working to prepare validation that will work on all form components. Sorry for the inconvenience.

Thank you for reporting the problem with date typing. We will take a closer look at it.


Esra Türkoğlu commented 4 months ago

A year ago?? and couldn't solved it, yet? :|


Arkadiusz Idzikowski staff commented 4 months ago

This problem is resolved, you can find examples in our documentation:

https://mdbootstrap.com/docs/angular/forms/validation/#other-components


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 6.2.3
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No