CODEWITHSUNDEEP
validationangulardatepicker
Jesper
Jesper

Reputation: 2814

Max and min on date input

How do I make restrictions on my date input in Angular 2? My code currently looks like this: 

<input #birthday="ngModel" type="date" name="birthday" max="2012-12-12" min="2000-12-12" required ngModel>

The following date should be invalid, but it isn't:

enter image description here

What am I doing wrong?

Upvotes: 1

Views: 2820

Answers (1)

Eddie Martinez
Eddie Martinez

Reputation: 13910

Your issue is that it is showing is valid because the only validation you have is if it's required so the input is valid. Setting the max and min date only limit the input for the date. If you try to submit you should probably see an error such as this

enter image description here

If the above behavior is not enough since you are seeing the input as valid, you will need a custom validator. From your code, it seems like you are using a template driven form. Adding a custom validator to a template driven form is a little more complex but you can still do it. Here is a link to a tutorial for adding a custom validator to a template driven form

https://juristr.com/blog/2016/11/ng2-template-driven-form-validators/

NOTE

Be careful with the date input type as it is not supported in a lot of browsers. You should probably look at angular calendar components such as PrimeNG calendar.

enter image description here

Upvotes: 2

Related Questions