Ion-datetime with formbuilder and min/max

Ionic Framework ionic-v3
1

Hey there. Can anyone tell me if it is possible to use ion-datetime together with the formbuilder and min/max. I tried to but whenever I add max or min the corresponding FormControl always validates to invalid.

This is what I’ve got right now:

<ion-datetime displayFormat="DD.MM.YYYY HH:mm" min="1950" max="2020" formControlName="evalDate"></ion-datetime>

and in the FormGroup I add

evalDate: [null, Validators.required],

What am I doing wrong? Or is the ion-datetime incompatible with FormBuilder?

2

it is compatible with form builder, try your max format YYYY-MM-DD (like max=“2020-10-31”) this worked for me. see https://ionicframework.com/docs/api/components/datetime/DateTime/

your display format can be issue.

3

No unfortunately this doesn’t work either. I tried the format you suggested above. I also tried to leave out the displayFormat, still the FormControl is always invalid. Looking at the FormControl in Chrome-DevTools I can see the following in the Controls errors array.

errors: Object
    actualValue:NaN
    max:true
    min:true
    requiredValue:NaN

So to me it look like FormBuilder is adding its own Validators for min and max which can’t seem to handle the ISO8601-String the ion-datetime produces.

4

can you try your validation evalDate: [‘’, Validators.required]

5

Doesn’t work the error is still the same as above. If I change max back to 2020 only the error shows

requiredValue:2020

but the actualValue always stays NaN.

6

can you post both html and controller code ? and ionic info.

7

I solved it while putting together a sample project to post here. The Problem seems to be caused by https://www.npmjs.com/package/ng2-validation which I used. If I take this out everthing works fine. Thanks for pushing me in the right direction.

8

I am still seeing this issue and don’t have that external validation package being used. Any include of a max or min property causes the control to be invalid in formbuilder.