First, install it.
ember install ember-text-mask
Then, use it as follows:
Add the following markup to your template to render a masked input component.
In the template's controller, specify a mask
.
import Controller from '@ember/controller';
export default Controller.extend({
mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
});
📍 For more information about the attributes that the masked-input
component accepts, see the
documentation here.
Text Mask does not provide an option to unmask the model before storing it. You can sanitize the model on your side. See here for details.
To see an example of the code running, follow these steps:
- Clone the repo,
git clone git@github.com:text-mask/text-mask.git
cd text-mask/ember
npm install
bower install
ember serve
- Open http://localhost:4200
You should have a working demo.