feat(input): add (limited) support for text masking

Bug, feature request, or proposal:

How can I set a text mask in date picker component so, if user doesn’t want to select a date in calendar, he can type and fill correctly the field?

What is the expected behavior?

When click on input date picker, show the mask so user can type date instead of selecting a date from calendar

What is the current behavior?

empty input

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/DlHd6U
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV
Just add a datepicker component

What is the use-case or motivation for changing an existing behavior?

Maybe user wants to type date instead of selecting form calendar.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.3.0 node: 6.10.3 os: darwin x64 @angular/animations: 4.3.5 @angular/cdk: 2.0.0-beta.8 @angular/common: 4.3.5 @angular/compiler: 4.3.5 @angular/core: 4.3.5 @angular/flex-layout: 2.0.0-beta.8 @angular/forms: 4.3.5 @angular/http: 4.3.5 @angular/material: 2.0.0-beta.8 @angular/platform-browser: 4.3.5 @angular/platform-browser-dynamic: 4.3.5 @angular/router: 4.3.5 @angular/cli: 1.3.0 @angular/compiler-cli: 4.3.5 @angular/language-service: 4.3.5

Is there anything else we should know?

[benjamincharity]

We were able to get a mask directive working with Material inputs using the text-mask library mentioned above. You can see the code here if it’s helpful (at least until an official solution is offered).

[remborg]

Hi @WandersonAlves I can see 2 ways to do that, the first one would be to use the date pipe in the text-mask-addons lib, but you’ll likely have to create a custom pipe for some mask formats. The second way would be to do it on the angular side, catching when the input value changes and then doing a check. Not really clean I think because then the input validation is half vanilla, half angular… but as a workaround that would work. Good luck and please let me know what you go for 😃