Angular Telephone Filter
A simple Angular filter to clean or format a US telephone number.
While working on a project, I came across the need for an Angular component that would format a tel input for phone numbers based on the North American Numbering Plan, a standard followed by 24 countries. This standard allows for a 10-digit number, and it generally starts with what we know as the area code.
The component had to support Angular forms for validations, as well as the ability to trigger some events on blur, change, and focus. After creating the component, I thought it might be useful for others who just need a simple component that will format phone numbers appropriately for North America.
There are some Angular directives available for formatting telephone inputs, but they are all for international numbers, requiring the user to select a country before the appropriate formatting can be applied. For my use case, I didn’t need to cover any other formats other than the North American Numbering Plan, and I suspect others might come across the same use case.
If you’d like to use the component, it is available via bower:
bower install angular-tel-input --save
After adding it to your project, you can add ngTelInput as a dependency in your app:
Then, you can drop the component where needed as follows:
<tel-input input-name="'phone'" is-required="true" number="Ctrl.phoneNumber" on-blur="Ctrl.onBlur()" on-change="Ctrl.onChange()" on-focus="Ctrl.onFocus()"></tel-input>