CODEWITHSUNDEEP
angulartypescriptangular-reactive-formsangular-forms
Sri
Sri

Reputation: 41

Angular 13 : Reactive Form Control Input Masking

I am trying to have the phone number input field in the reactive form & having formatting directive to format the phone number in this format (123) 456-7890.

Example link: https://stackblitz.com/edit/angular13-reactive-form-validation-y1qwmf?file=src/app/app.component.ts

it is giving me the phone number input value on submit like below

{ "phno": "(112) 345-66899" }

But, I wanted to have the value in display as (112) 345-66899 and when i submit i need the value of control without formatting like

{ "phno": "11234566899" }

Is there anyway i can have two different values for display & rawvalue using reactive form control.

Any help would be appreciated.

Upvotes: 2

Views: 4398

Answers (1)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

Here is the example from documentation of ngx-mask: npmjs.com/package/ngx-mask

<input type="text" [mask]="'(000) 000-0000'" />

Upvotes: 1

Related Questions