🐞 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:

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?