Material: required field doesn't work on on md-datepicker.

[maddy2308]

[rschmukler]

See this demo for select working. Renaming issue.

[epelc]

@rschmukler Sadly the required attribute on md-select only partially works.

See this updated demo comparing it to the html5 select. Notice it doesn't block the ng-submit.

We have been prefilling all selects and radio groups as a way to make them required(without allowing an empty option) for now. I realize now that we may be able to check the form.$valid attribute to block our form submission. But it'd be nice if it "Just Worked".

[jelbourn]

"Doesn't work" is too vague to know what you're talking about.

Closing this issue for now; please file a new issue with more details on the deviation from expected behavior.

@epelc Making required "just work" like a native select isn't possible because this is something the browser does at a low-level, and there is no API for custom components to do the same.

[maddy25]

Is there a new issue created for the required attribute to work with md datepicker? If we are supporting empty dates then it becomes necessary to have required attribute as well.

[jelbourn]

@maddy25 can you be more specific what you mean by "work with md datepicker"? The required attribute works with ngMessages, but can't work exactly like required on native elements (WRT stopping form submit, etc.).

[kevinlbatchelor]

This is still an issue. if required is added to a date picker input, then the form should not be valid for example you should be able to to a form check like this:

<form name="register" ng-submit="register.$valid && registerCtrl.register(registerCtrl.user)">

The date picker style should show a red line like the md input fields do when a form submit fails.

[kevinlbatchelor]

And this is possible I've done it many times with my own custom forms directives. the date styles for invalid and failed submit should match an input inside of md-input-container.

[rvarbanov]

:+1:
If there is no date supplied to the datepicker it does not play well with ngMessages

Here is a CodePen demoing the issue:
http://codepen.io/radi/pen/RaLLoW

Notice how the required message is shown before the user has tried to enter a date.

The ngMessage required should show after the user leaves the field after focusing it before that. Not on load.

[ghost]

@rvarbanov , just change ng-messages="myForm.dateField.$error" to ng-show="myForm.dateField.$touched" ng-messages="myForm.dateField.$error"

Then the message will only appear after the date field has been interacted with