Date validation using angular material date picker
I am trying to validate dates using the material date picker. Specifically what I am trying to validate is when the user types 'abc' into a date field I would like to show them 'please enter a valid date'. I would like to be able to do that on keystrokes so when they enter 'a' and 'ab' and 'abc' they get the same error.
The problem is the date picker appears to not set the model value and its errors until the value is able to parse to a date. I know this because the form control is not dirty and it still has an error of required when typing 'abc'.
Can this be done?
angular datepicker material
asked Nov 13 '18 at 15:57
ScottScott
14512
add a comment |
I am trying to validate dates using the material date picker. Specifically what I am trying to validate is when the user types 'abc' into a date field I would like to show them 'please enter a valid date'. I would like to be able to do that on keystrokes so when they enter 'a' and 'ab' and 'abc' they get the same error.
The problem is the date picker appears to not set the model value and its errors until the value is able to parse to a date. I know this because the form control is not dirty and it still has an error of required when typing 'abc'.
Can this be done?
angular datepicker material
asked Nov 13 '18 at 15:57
ScottScott
14512
add a comment |
I am trying to validate dates using the material date picker. Specifically what I am trying to validate is when the user types 'abc' into a date field I would like to show them 'please enter a valid date'. I would like to be able to do that on keystrokes so when they enter 'a' and 'ab' and 'abc' they get the same error.
The problem is the date picker appears to not set the model value and its errors until the value is able to parse to a date. I know this because the form control is not dirty and it still has an error of required when typing 'abc'.
Can this be done?
angular datepicker material
asked Nov 13 '18 at 15:57
ScottScott
14512
I am trying to validate dates using the material date picker. Specifically what I am trying to validate is when the user types 'abc' into a date field I would like to show them 'please enter a valid date'. I would like to be able to do that on keystrokes so when they enter 'a' and 'ab' and 'abc' they get the same error.
The problem is the date picker appears to not set the model value and its errors until the value is able to parse to a date. I know this because the form control is not dirty and it still has an error of required when typing 'abc'.
Can this be done?
angular datepicker material
angular datepicker material
asked Nov 13 '18 at 15:57
ScottScott
14512
asked Nov 13 '18 at 15:57
ScottScott
14512
asked Nov 13 '18 at 15:57
ScottScott
14512
asked Nov 13 '18 at 15:57
ScottScott
14512
asked Nov 13 '18 at 15:57
ScottScott
14512
14512
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can attach a handler on 'dateChange' which is triggered onChange of the input field of the mat-datepicker and validate the user input.
You can also try out 'dateInput' of mat-datepicker.
Refer https://material.angular.io/components/datepicker/api#MatDatepickerInput
Update
HTML
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">
TS
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
events: string = ;
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
this.events.push(`${type}: ${event.value}`);
}
keyEvent(type: string, event: KeyboardEvent) {
this.events.push(`${type}: ${event.target.value}`);
}
}
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
updated the answer
– Abhidev
Nov 13 '18 at 16:25
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
1
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284824%2fdate-validation-using-angular-material-date-picker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can attach a handler on 'dateChange' which is triggered onChange of the input field of the mat-datepicker and validate the user input.
You can also try out 'dateInput' of mat-datepicker.
Refer https://material.angular.io/components/datepicker/api#MatDatepickerInput
Update
HTML
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">
TS
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
events: string = ;
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
this.events.push(`${type}: ${event.value}`);
}
keyEvent(type: string, event: KeyboardEvent) {
this.events.push(`${type}: ${event.target.value}`);
}
}
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
updated the answer
– Abhidev
Nov 13 '18 at 16:25
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
1
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
|
show 1 more comment
You can attach a handler on 'dateChange' which is triggered onChange of the input field of the mat-datepicker and validate the user input.
You can also try out 'dateInput' of mat-datepicker.
Refer https://material.angular.io/components/datepicker/api#MatDatepickerInput
Update
HTML
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">
TS
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
events: string = ;
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
this.events.push(`${type}: ${event.value}`);
}
keyEvent(type: string, event: KeyboardEvent) {
this.events.push(`${type}: ${event.target.value}`);
}
}
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
updated the answer
– Abhidev
Nov 13 '18 at 16:25
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
1
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
|
show 1 more comment
You can attach a handler on 'dateChange' which is triggered onChange of the input field of the mat-datepicker and validate the user input.
You can also try out 'dateInput' of mat-datepicker.
Refer https://material.angular.io/components/datepicker/api#MatDatepickerInput
Update
HTML
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">
TS
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
events: string = ;
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
this.events.push(`${type}: ${event.value}`);
}
keyEvent(type: string, event: KeyboardEvent) {
this.events.push(`${type}: ${event.target.value}`);
}
}
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
You can attach a handler on 'dateChange' which is triggered onChange of the input field of the mat-datepicker and validate the user input.
You can also try out 'dateInput' of mat-datepicker.
Refer https://material.angular.io/components/datepicker/api#MatDatepickerInput
Update
HTML
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">
TS
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
events: string = ;
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
this.events.push(`${type}: ${event.value}`);
}
keyEvent(type: string, event: KeyboardEvent) {
this.events.push(`${type}: ${event.target.value}`);
}
}
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
edited Nov 13 '18 at 16:46
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
answered Nov 13 '18 at 16:05
AbhidevAbhidev
4,39151525
4,39151525
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
updated the answer
– Abhidev
Nov 13 '18 at 16:25
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
1
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
|
show 1 more comment
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
updated the answer
– Abhidev
Nov 13 '18 at 16:25
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
1
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
I saw that but unfortunately that is only called when the user tabs out of the field?
– Scott
Nov 13 '18 at 16:14
updated the answer
– Abhidev
Nov 13 '18 at 16:25
updated the answer
– Abhidev
Nov 13 '18 at 16:25
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
Here is a stack blitz. Unfortunately dateInput and dateChange only fire when it thinks it can parse a date. stackblitz.com/angular/…
– Scott
Nov 13 '18 at 16:28
1
1
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
updated the answer, you can make use of our traditional keyboard events.
– Abhidev
Nov 13 '18 at 16:46
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
Thanks. The keyUp event works. It ends up being clunky for us because we have a generic page validation that only triggers when a) field is dirty or b) user presses save. In this case the field is not dirty because it cannot parse. I can bypass this with boilerplate code but it starts getting ugly based on the number of places used.
– Scott
Nov 13 '18 at 17:30
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284824%2fdate-validation-using-angular-material-date-picker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
