Angular ngx-mask - Value not formatted

Question

I'm using this library ngx-mask and I'm trying to mask some fields (dates and phone numbers) in Angular 11 with Reactive Forms. Here are two snippets from my code

<input type="text" class="form-control" mask="d0/M0/0000" [leadZeroDateTime]="true" [showMaskTyped]="true" required formControlName="dateOfBirth" />
<input type="text" class="form-control" id="mobile-phone" mask="0000-0000" [showMaskTyped]="true" required formControlName="mobilePhone" />

But when I try to get the value from the form, the values are not formatted:

let formValue = this.createForm.value;

This is how it's shown in the UI

But this is the result when I access the values

Any idea on what I'm doing wrong

Answer 1

Add one more mask option i.e dropSpecialCharacters like below:

<input type="text" class="form-control" id="mobile-phone" mask="0000-0000" [showMaskTyped]="true" required formControlName="mobilePhone" [dropSpecialCharacters]="false" />

Please verify... And you can refer additional info from this ngx-mask documentation: https://www.npmjs.com/package/ngx-mask