Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(datepicker): input validation for min, max, and date filter #4393

Merged
merged 5 commits into from
May 5, 2017

Conversation

mmalerba
Copy link
Contributor

@mmalerba mmalerba commented May 4, 2017

No description provided.

@mmalerba mmalerba requested a review from kara May 4, 2017 22:46
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label May 4, 2017
placeholder="Pick a date">
<md-error *ngIf="resultPickerModel.errors?.mdDatepickerMin">Too early!</md-error>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be easier to just use resultPickerModel.hasError('mdDatepickerMin')

```

In this example the user can back past 2005, but all of the dates before then will be unselectable.
They will not be able to go further back in the calendar than 2000.
They will not be able to go further back in the calendar than 2000. If they manually type in a date
that is before the min, after the max, or filtered out the input will have validation errors.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: or filtered out, the input will ...

Each validation property has a different error that can be checked:
* A value that violates the `min` property will have a `mdDatepickerMin` error.
* A value that violates the `max` property will have a `mdDatepickerMax` error.
* A value that violates the `mdDatepickerFilter` property will have a `mdDatepickerFitler` error.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: mdDatepickerFitler => mdDatepickerFilter

calendar past that point.
A result of `true` indicates that the date is valid and a result of `false` indicates that it is
not. Again this will also disable the dates on the calendar that are invalid. However, one important
difference between using `mdDatepcikerFilter` vs using `min` or `max` is that filtering out all
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: mdDatepcikerFilter -> mdDatepickerFilter

(control: AbstractControl): ValidationErrors | null => {
return !this._dateFilter || !control.value || this._dateFilter(control.value) ?
null : {'mdDatepickerFilter': true};
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you thought about breaking these validator functions out into their own methods or getters? This is a bit hard to scan.

@kara kara assigned mmalerba and unassigned kara May 5, 2017
@mmalerba
Copy link
Contributor Author

mmalerba commented May 5, 2017

comments addressed

Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kara kara added pr: lgtm action: merge The PR is ready for merge by the caretaker labels May 5, 2017
@mmalerba mmalerba merged commit 97c3e36 into angular:datepicker May 5, 2017
mmalerba added a commit that referenced this pull request May 5, 2017
* support validation based on date filter

* add validation support for min & max

* update docs to talk about validation

* fix imports

* address comments
mmalerba added a commit that referenced this pull request May 9, 2017
* support validation based on date filter

* add validation support for min & max

* update docs to talk about validation

* fix imports

* address comments
@mmalerba mmalerba deleted the dp-valid branch April 3, 2018 15:17
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants