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

itpartner pro commented 6 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.

itpartner pro commented 6 years ago

I definitely need validation. Thank you for quick response.

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

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

Arkadiusz Idzikowski staff commented 5 years ago

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

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