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

Date masking, showing forward slashes when typing #960

Closed
mattiLeBlanc opened this issue Dec 17, 2021 · 1 comment
Closed

Date masking, showing forward slashes when typing #960

mattiLeBlanc opened this issue Dec 17, 2021 · 1 comment

Comments

@mattiLeBlanc
Copy link

🐞 bug report

Trying to use the date masking for Date of Birth entry and assist users whilst inputting numbers.

Is this a regression?

Not sure.

Description

I am having the following form control in which I want to capture a DOB, (DD/MM/YYYY).

<input matInput type="tel" formControlName="dob" [leadZeroDateTime]="true" mask="d0/M0/0000" name="dob" tabindex="1">

When I use the above config, it works fine. User types 30 and then when they start typing the month number it will inject a forward slash.
However, the requirement for me is that when you type, it already shows / / so older users know they dont have to add slashes on the mobile (since we are using the TEL keyboard, no dashes).

So to get this to work I used the showMaskedTyped option, which kinda does what I need:

<input matInput type="tel" formControlName="dob" [leadZeroDateTime]="true" [showMaskTyped]="showSlashes" placeHolderCharacter=" " mask="d0/M0/0000" name="dob" tabindex="1">

So this kinda works, but when I hit backspace it doesn't empty out the DAY and MONTH area.
See GIF:
Dec-17-2021 11-02-27

So I am a bit at a loss how to deal with this.

A clear and concise description of the problem...

🔬 Minimal Reproduction

Use code displayed above

I am getting a can't find package error on stackblitz but I put in the code example.
https://stackblitz.com/edit/angular-ivy-kyzlwk?file=src/app/app.component.html

🔥 Exception or Error

🌍 Your Environment

Angular Version:

@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/flex-layout            13.0.0-beta.36
@schematics/angular             13.0.3
rxjs                            6.6.7
typescript                      4.4.4

Anything else relevant?

@NepipenkoIgor
Copy link
Collaborator

@mattiLeBlanc Thank you for using ngx-mask. Please try ngx-mask >= 14.2.2
Also checked your example https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-iqjoan?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants