Input masking

Masking user input is an input UX tool, as well as a data quality one. I'm a fan of the ngx-mask library, which makes it really easy to implement input masking in Angular. We will demonstrate input masking by updating the phone number input field so we can ensure that users input a valid phone number, as shown in the following screenshot:

Figure 11.11: Phone number field with input masking

Set up your input masking as follows:

1. Install the library via npm with npm i ngx-mask.
2. Import the forRoot module:

   src/app/app.module.ts
   export const options: Partial<IConfig> | (() => Partial<IConfig>) = {
     showMaskTyped: true,
   }
   @NgModule({
     imports: [
       ...
       NgxMaskModule.forRoot(options),
     ]
   })
   

3. Import the module in the user feature module as well:

   src/app/user/user.module.ts
   @NgModule({
     imports: [
       ...
       NgxMaskModule.forChild(),
     ]
   })
   

4. Update the number field in...