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 5 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>

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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 5 years ago

I definitely need validation. Thank you for quick response.

itpartner pro commented 5 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 5 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 5 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 free commented 4 years ago

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

Arkadiusz Idzikowski staff commented 4 years ago

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

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

Add comment

tano pro answered 5 years ago

0 0 Best answer

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 5 years ago

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

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=" "></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.

<p>Even without mdbinputdirective the validation message is not showing. Actually even without that the styling is not the same as say:</p>
<p><div class="md-form"><br /><i class="fa fa-user prefix grey-text"></i><br /><input type="text" id="lastname" class="form-control" formControlName="lastname" mdbInputDirective<br />data-error="Lastname is required" data-success="&nbsp;"><br /><label for="lastname">Last name</label><br /></div></p>
<p>The selected date overlaps the label. Now the best I could achieve is this:</p>
<p><div class="md-form"><br /><i class="fa fa-calendar prefix grey-text"></i><br /><mdb-date-picker [options]="birthDateDatePickerOptions"<br />id="birthdate" formControlName="birthdate"<br />data-error="Valid birthdate is required" data-success="&nbsp;"></mdb-date-picker><br /><label for="lastname">Birth date</label><br /></div></p>
<p>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.</p>
<p>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.</p>

Please insert min. 15 characters.

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: any
Browser: any
OS: any
Provided sample code: No
Provided link: No

itpartner

Pro User 10Support score
2Questions 0Answers 0Snippets