Components: Input mask

[alexKnysh]

Hi!

When there may be work masks in md-input example:

<md-input-container>
    <input mdInput MASK='/[0-9]/' >
</md-input-container>

Thank you!

[donroyco]

I'm not sure what you mean by 'mask', @alexKnysh. Are you referring to only use numbers? If so, you can use <input mdInput type="number"> on your input. See this Plunker for reference.

[alexKnysh]

@donroyco, understood me wrong. I mean using regular expressions or masks, for example:

<md-input-container> <input mdInput MASK='/[0-9]{3} [0-9]{5}/' > </md-input-container>

or example:

<md-input-container> <input mdInput MASK='99.99.9999' > </md-input-container>

or example:

<md-input-container> <input mdInput MASK='[phone]' > </md-input-container>

[M-a-c]

If you're talking about validation of form material you're looking for validators
https://scotch.io/tutorials/angular-2-form-validation

But I have a feeling you mean this https://github.com/text-mask/text-mask/issues/197
That's the mask library though, you can use it to extend the functionality of Angular Material 2

[jelbourn]

We don't have any plans to add input masking in the short term. However, since the material input is just a regular input, you should be able to use an existing solution for this.

[ChrisTarasovs]

what exactly you talking about ? "an existing solution for this."???

[donroyco]

@ChrisTarasovs Using an input pattern, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes

[alexKnysh]

Hi!
@jelbourn Tell me, do you have plans for the development of input masks?

Thank you!

[stewieoO]

@jelbourn
He already answered your question.

We don't have any plans to add input masking in the short term

If you go to the issue linked above text-mask/text-mask#197 you will see that

use an existing solution for this

means using an already existing library for this problem and combining it with @angular/material.

In this case the issue was resolved by not using the matInput directly on the input but using the md-input-container which now is mat-form-field.

So basically:

<mat-form-field>
  <input /> <!-- With this input you can do whatever you want. For example using an existing library for input masking, while keeping the material styles -->
</mat-form-field>

[sangecz]

@siegerx3 not working for me without matInput directive on input resulting in error: mat-form-field must contain a MatFormFieldControl. even with the latest greatest.

[stewieoO]

That is true, indeed. Damn i forgot about that. Though i suppose if you can implement your own ControlValueAccessor for whatever external library you want to use, you implement your own MatFormFieldControl.
This should be what you're looking for.

[boskokg]

That is true, indeed. Damn i forgot about that. Though i suppose if you can implement your own ControlValueAccessor for whatever external library you want to use, you implement your own MatFormFieldControl.
This should be what you're looking for.

The link that you provided forces the user to use mouse or tab to switch to the next part of the input field... I don't think this is user-friendly solution...

[jneuhaus20]

I'm chiming in just to say that:

1. There are no good input mask libraries that I can find. If you're lucky, they correctly handle detection of which field you're currently in, but not a single one of them supports tabbing through the intra-input fields or arrows for up/down in numeric fields.
2. There are at least 2 Material Components that would greatly benefit from a proper implementation, Datepicker and Input (for time and datetime). Native HTML5 support is inconsistent or nonexistent. For example, Chrome's are pretty superb from a masking standpoint, but Edge's datetime-local is a usability nightmare. Material's version are very sub-par for keyboard users.
3. Granted this is 2 years late, but when you say "use an existing solution" like acceptable ones are plentiful and it's unreasonable to expect Angular Materials to do this, it's insulting. Especially so when the ones stating such appear to have an incomplete understanding of what's being asked.

I'm not demanding you have it or research solutions for the OP, but at least acknowledge this as missing functionality and don't assume it's a basic problem for which a hundred libraries exist.

[M-a-c]

Well I’m glad this post isn’t dead, yeah it’s a missing feature. Also, to kick input masks 2 years down the line seems like it just might have slipped through the cracks

[daddyschmack]

Masks are part of several other libraries, I do believe as the premier library for Angular, Angular material should make having a mask development priority. (Please)

[angular-automatic-lock-bot[bot]]

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._}