Masks
An Angular/Ionic 4 input masking library for Brazilian formats like CPF, CNPJ, phone numbers, and currency.
What is Masks?
brmasker-ionic is an input masking library for Ionic 4 and Angular applications that formats user input according to Brazilian standards. It provides pre-configured masks for CPF, CNPJ, phone numbers, currency, and percentages, as well as custom mask patterns. The library solves the problem of manually implementing complex input formatting for Brazilian data formats in web and mobile apps.
Developers building Ionic 4 or Angular applications that require Brazilian-specific input formatting, such as financial apps, registration forms, or government-related systems.
It offers a lightweight, easy-to-integrate solution tailored to Brazilian conventions, saving development time compared to building custom masking logic or using generic international libraries.
Overview
brmasker-ionic is an input masking library designed specifically for Ionic 4 and Angular applications. It provides a directive to format user input in real-time according to common Brazilian conventions, such as CPF/CNPJ, phone numbers, currency, and percentages.
Key Features
- Brazilian Format Support — Pre-configured masks for CPF, CNPJ, phone numbers (with/without DDD), and Brazilian Real currency.
- Custom Mask Patterns — Define custom masks using patterns like '00:00' for time or any alphanumeric format.
- Flexible Configuration — Options for decimal places, thousand separators, and handling user-entered special characters.
- Directive Integration — Easily apply masks to Ionic input elements via the
[brmasker]directive. - Programmatic Masking — Use the
BrMaskDirectiveto format values programmatically in TypeScript.
Philosophy
It focuses on simplifying the implementation of Brazilian-specific input formatting in Ionic 4 apps, reducing boilerplate code for developers.
Use Cases
Best For
- Formatting CPF and CNPJ inputs in Brazilian registration forms
- Applying phone number masks with and without DDD in contact forms
- Formatting currency inputs for Brazilian Real with custom decimal places
- Creating custom input masks for time, dates, or alphanumeric patterns
- Handling percentage inputs with proper formatting
- Ensuring consistent data entry in Brazilian Portuguese applications
Not Ideal For
- Projects using Ionic 5+ or modern Angular versions beyond v6
- Applications requiring input masking for international formats outside Brazil
- Teams needing actively maintained libraries with regular updates and bug fixes
- Large-scale production apps where dependency on deprecated code poses security risks
Pros & Cons
Pros
Includes pre-configured masks for CPF, CNPJ, phone with/without DDD, currency, and percentages, directly addressing Brazilian conventions without custom logic.
Supports custom mask patterns like '00:00' for time, with configurable types (alfa/num/all) and user-defined characters, enabling versatile input formatting.
Provides a simple [brmasker] directive that can be applied directly to Ionic input elements, reducing boilerplate code for developers.
Offers BrMaskDirective for formatting values in TypeScript, allowing dynamic masking and integration with reactive forms.
Cons
The README explicitly states the project is deprecated with no maintenance, meaning no bug fixes, security updates, or compatibility improvements.
Requires specific old versions like Node 10.7.0, Ionic 4.1.2, and Angular CLI 6.1.2, which are incompatible with modern development stacks.
Focused solely on Brazilian formats, so it lacks support for international masks, making it unsuitable for global applications.
Frequently Asked Questions
Related Projects
Dynamic FormsRapid form development library for Angular
SelectableIonic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.
Form Generator based on JSONHTML form generation based on JSON Schema
AutocompleteIonic 2 autocomplete component
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.