examples/views/ngMask.html
<div class="row">
<div class="row">
<h1>The Best NgMask!</h1>
</div>
</div>
<div class="row">
<div class="row">
<h2>How To Use</h2>
<ol>
<li>
<p>Add ngMask plugin after your AngularJS.</p>
<p>
<code>
<script src="angular.min.js"></script>
</code>
<br>
<code>
<script src='ngMask.min.js'></script>
</code>
</p>
</li>
<li>
<p>Add ngMask module dependency to your app.</p>
<p>
<code>
angular.module('yourApp', ['ngMask']);
</code>
</p>
</li>
<li>
<p>Use the avaiable patterns to create your mask. Set the mask as input attribute.</p>
<code>
<input type='text' ng-model='maskModel' mask='39/19/9999' />
</code>
<span class="help-block">"/" isn't a pattern. It's considered a divisor. Every divisor is automatically written by ngMask. Check all available patterns here.</span>
</li>
<li>
<p>Adjust your mask options.</p>
<code>
<input type='text' ng-model='maskModel ng-value='0/3/9' mask='3/9?' mask-repeat='2' mask-restrict='accept' mask-clean='true' mask-validate='false' mask-limit='false' />
</code>
<span class="help-block">Generated mask '3/9?3/9?'. Check all available options here.</span>
</li>
</ol>
</div>
<hr>
<div class="row">
<h2>Avaiable Patterns</h2>
<p>
You can make your mask using some patterns available.
If you use a pattern not specified below to construct your mask, It'll be considered a divisor.
A dividor is a character used to group semantic elements, for example: "/" in dates to separate days, months and years, "-" in SSN to separate area, group and serial numbers or "." in IPv4 to create 4 groups of 8 bits.
</p>
<div class="col-xs-12 col-sm-3">
<h3>Common Patterns</h3>
<ul>
<li>
<span>
<strong>'*'</strong> => /./
</span>
<span class="help-block">Any single character</span>
</li>
<li>
<span>
<strong>'w'</strong> => /\w/
</span>
<span class="help-block">Any word character (letter, number, underscore)</span>
</li>
<li>
<span>
<strong>'W'</strong> => /\W/
</span>
<span class="help-block">Any non-word character</span>
</li>
<li>
<span>
<strong>'d'</strong> => /\d/
</span>
<span class="help-block">Any digit</span>
</li>
<li>
<span>
<strong>'D'</strong> => /\D/
</span>
<span class="help-block">Any non-digit</span>
</li>
<li>
<span>
<strong>'s'</strong> => /\s/
</span>
<span class="help-block">Any whitespace character</span>
</li>
<li>
<span>
<strong>'S'</strong> => /\S/
</span>
<span class="help-block">Any non-whitespace character</span>
</li>
<li>
<span>
<strong>'b'</strong> => /\b/
</span>
<span class="help-block">Any word boundary</span>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-3">
<h3>Number Patterns</h3>
<ul>
<li>
<span>
<strong>'9'</strong> => /[0-9]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3,4,5,6,7,8,9</span>
</li>
<li>
<span>
<strong>'8'</strong> => /[0-8]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3,4,5,6,7,8</span>
</li>
<li>
<span>
<strong>'7'</strong> => /[0-7]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3,4,5,6,7</span>
</li>
<li>
<span>
<strong>'6'</strong> => /[0-6]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3,4,5,6</span>
</li>
<li>
<span>
<strong>'5'</strong> => /[0-5]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3,4,5</span>
</li>
<li>
<span>
<strong>'4'</strong> => /[0-4]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3,4</span>
</li>
<li>
<span>
<strong>'3'</strong> => /[0-3]/
</span>
<span class="help-block">Valid numbers: 0,1,2,3</span>
</li>
<li>
<span>
<strong>'2'</strong> => /[0-2]/
</span>
<span class="help-block">Valid numbers: 0,1,2</span>
</li>
<li>
<span>
<strong>'1'</strong> => /[0-1]/
</span>
<span class="help-block">Valid numbers: 0,1</span>
</li>
<li>
<span>
<strong>'0'</strong> => /[0]/
</span>
<span class="help-block">Valid numbers: 0</span>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6">
<h3>Extra Patterns</h3>
<ul>
<li>
<span>
<strong>'?'</strong> => /?/
</span>
<span class="help-block">Optional character. It makes the previous pattern optional.</span>
</li>
<li>
<span>
<strong>'A'</strong> => /[A-Z]/
</span>
<span class="help-block">Any uppercase alphabet letter without accents</span>
</li>
<li>
<span>
<strong>'a'</strong> => /[a-z]/
</span>
<span class="help-block">Any lowercase alphabet letter without accents</span>
</li>
<li>
<span>
<strong>'Z'</strong> => /[A-ZÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/
</span>
<span class="help-block">Any uppercase alphabet letter with accents</span>
</li>
<li>
<span>
<strong>'z'</strong> => /[a-zçáàãâéèêẽíìĩîóòôõúùũüû]/
</span>
<span class="help-block">Any lowercase alphabet letter with accents</span>
</li>
<li>
<span>
<strong>'@'</strong> => /[a-zA-Z]/
</span>
<span class="help-block">Any alphabet letter without accents</span>
</li>
<li>
<span>
<strong>'#'</strong> => /[a-zA-ZçáàãâéèêẽíìĩîóòôõúùũüûÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/
</span>
<span class="help-block">Any alphabet letter with accents</span>
</li>
<li>
<span>
<strong>'%'</strong> => /[0-9a-zA-zçáàãâéèêẽíìĩîóòôõúùũüûÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/
</span>
<span class="help-block">Any digit and alphabet letter with accents</span>
</li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="row">
<h2>Options</h2>
</div>
</div>
<div class="row">
<div class="row">
<ul>
<li>
<p><strong>NgModel (required)</strong>: model object</p>
<span class="help-block">Attribute 'ng-model'</span>
<p>The model of input.</p>
</li>
<li>
<p><strong>Mask (required)</strong>: mask definition</p>
<span class="help-block">Attribute 'mask'</span>
<p>The mask for input.</p>
</li>
<li>
<p><strong>NgValue</strong>: initial mask value (default: undefined)</p>
<span class="help-block">Attribute 'ng-value'</span>
<p>The initial value of input.</p>
</li>
<li>
<p><strong>Restrict</strong>: 'select', 'reject' or 'accept' (default: select)</p>
<span class="help-block">Attribute 'mask-restrict' or 'restrict'</span>
<p>
The way how ngMask will interact with user input.
<strong>Select</strong> restriction: The input will show the char inputted even on error cases. If it has errors, the wrong char will be selected.
<strong>Reject</strong> restriction: The input will show the char inputted on successfull cases. If it has errors, the wrong char will be rejected.
<strong>Accept</strong> restriction: The input will always show the char inputted. No matter it's right or wrong.
</p>
</li>
<li>
<p><strong>Repeat</strong>: number - repeat mask n times (default: undefined)</p>
<span class="help-block">Attribute 'mask-repeat' or 'repeat'</span>
<p>Repeats the mask attribute the defined times.</p>
</li>
<li>
<p><strong>Clean</strong>: 'true' or 'false' (default: false)</p>
<span class="help-block">Attribute 'mask-clean' or 'clean'</span>
<p>Cleans model value. Removes divisors from model value.</p>
</li>
<li>
<p><strong>Validate</strong>: 'true' or 'false' (default: true)</p>
<span class="help-block">Attribute 'mask-validate' or 'validate'</span>
<p>Applies validation. Uses form controller setValidity method.</p>
</li>
<li>
<p><strong>Limit</strong>: 'true' or 'false' (default: true)</p>
<span class="help-block">Attribute 'mask-limit' or 'limit'</span>
<p>Limits the max length inputted according with mask.</p>
</li>
</ul>
</div>
</div>
</form>
<div class="row">
<div class="row">
<h2>Examples</h2>
</div>
</div>
<div class="row">
<form name="form">
<div class="row">
<h3>Date example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 39/19/9999</label>
<br>
<input type="text" name="date"
mask="39/19/9999"
ng-model="date">
<p>Model: {{date}}</p>
<p>Field Error: {{form.date.$error}}</p>
<p>Field Valid: {{form.date.$valid}}</p>
<code>
<input type="text" name="date"
mask="39/19/9999"
ng-model="date">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 39/19/9999 CLEAN: TRUE</label>
<br>
<input type="text" name="date1"
mask="39/19/9999"
clean="true"
ng-model="date1">
<p>Model: {{date1}}</p>
<p>Field Error: {{form.date1.$error}}</p>
<p>Field Valid: {{form.date1.$valid}}</p>
<code>
<input type="text" name="date1"
mask="39/19/9999"
clean="true"
ng-model="date1">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 39/19/9999 CLEAN: FALSE</label>
<br>
<input type="text" name="date2"
mask="39/19/9999"
clean="false"
ng-model="date2">
<p>Model: {{date2}}</p>
<p>Field Error: {{form.date2.$error}}</p>
<p>Field Valid: {{form.date2.$valid}}</p>
<code>
<input type="text" name="date2"
mask="39/19/9999"
clean="false"
ng-model="date2">
</code>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 19/39/9999 RESTRICT: REJECT</label>
<br>
<input type="text" name="date4"
mask="19/39/9999"
restrict="reject"
ng-model="date4">
<p>Model: {{date4}}</p>
<p>Field Error: {{form.date4.$error}}</p>
<p>Field Valid: {{form.date4.$valid}}</p>
<code>
<input type="text" name="date"
mask="19/39/9999"
restrict="reject"
ng-model="date4">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 19/39/9999 RESTRICT: REJECT CLEAN: TRUE</label>
<br>
<input type="text" name="date5"
mask="19/39/9999"
restrict="reject"
clean="true"
ng-model="date5">
<p>Model: {{date5}}</p>
<p>Field Error: {{form.date5.$error}}</p>
<p>Field Valid: {{form.date5.$valid}}</p>
<code>
<input type="text" name="date5"
mask="19/39/9999"
restrict="reject"
clean="true"
ng-model="date5">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 19/39/9999 RESTRICT: ACCEPT CLEAN: TRUE</label>
<br>
<input type="text" name="date6"
mask="19/39/9999"
restrict="accept"
ng-model="date6">
<p>Model: {{date6}}</p>
<p>Field Error: {{form.date6.$error}}</p>
<p>Field Valid: {{form.date6.$valid}}</p>
<code>
<input type="text" name="date6"
mask="19/39/9999"
restrict="accept"
clean="true"
ng-model="date6">
</code>
</fieldset>
</div>
</div>
<hr>
<div class="row">
<h3>Phone example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: (999) 999-9999 CLEAN: TRUE</label>
<br>
<input type="text" name="phone"
mask="(999) 999-9999"
clean="true"
ng-model="phone">
<p>Model: {{phone}}</p>
<p>Field Error: {{form.phone.$error}}</p>
<p>Field Valid: {{form.phone.$valid}}</p>
<code>
<input type="text" name="phone"
mask="(999) 999-9999"
clean="true"
ng-model="phone">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: (99) 9?9999-9999</label>
<br>
<input type="text" name="phone2"
mask="(99) 9?9999-9999"
ng-model="phone2">
<p>Model: {{phone2}}</p>
<p>Field Error: {{form.phone2.$error}}</p>
<p>Field Valid: {{form.phone2.$valid}}</p>
<code>
<input type="text" name="phone2"
mask="(99) 9?9999-9999"
ng-model="phone2">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: +99 99 9?9999-9999 RESTRICT: REJECT</label>
<br>
<input type="text" name="phone3"
mask="+99 99 9?9999-9999"
restrict="reject"
ng-model="phone3">
<p>Model: {{phone3}}</p>
<p>Field Error: {{form.phone3.$error}}</p>
<p>Field Valid: {{form.phone3.$valid}}</p>
<code>
<input type="text" name="phone3"
mask="+99 99 9?9999-9999"
restrict="reject"
ng-model="phone3">
</code>
</fieldset>
</div>
</div>
<hr>
<div class="row">
<h3>String example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: % REPEAT: 30 RESTRICT: REJECT</label>
<br>
<input type="text" name="name0"
mask="%"
repeat="30"
restrict="reject"
ng-model="name0">
<p>Model: {{name0}}</p>
<p>Field Error: {{form.name0.$error}}</p>
<p>Field Valid: {{form.name0.$valid}}</p>
<code>
<input type="text" name="name0"
mask="%"
repeat="30"
restrict="reject"
ng-model="name0">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: @ REPEAT: 15</label>
<br>
<input type="text" name="name2"
mask="@"
repeat="15"
ng-model="name2">
<p>Model: {{name2}}</p>
<p>Field Error: {{form.name2.$error}}</p>
<p>Field Valid: {{form.name2.$valid}}</p>
<code>
<input type="text" name="name2"
mask="@"
repeat="15"
ng-model="name2">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: w?s? REPEAT: 10 RESTRICT: REJECT VALIDATE: FALSE</label>
<br>
<input type="text" name="name3"
mask="w?s?"
repeat="10"
restrict="reject"
validate="false"
ng-model="name3">
<p>Model: {{name3}}</p>
<p>Field Error: {{form.name3.$error}}</p>
<p>Field Valid: {{form.name3.$valid}}</p>
<code>
<input type="text" name="name3"
mask="w?s?"
repeat="10"
restrict="reject"
validate="false"
ng-model="name3">
</code>
</fieldset>
</div>
</div>
<hr>
<div class="row">
<h3>IPv4 example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 95?5?.95?5?.95?5?.95?5?</label>
<br>
<input type="text" name="ip"
mask="95?5?.95?5?.95?5?.95?5?"
ng-model="ip">
<p>Model: {{ip}}</p>
<p>Field Error: {{form.ip.$error}}</p>
<p>Field Valid: {{form.ip.$valid}}</p>
<code>
<input type="text" name="ip"
mask="95?5?.95?5?.95?5?.95?5?"
ng-model="ip">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 95?5?.? REPEAT: 4 CLEAN: TRUE</label>
<br>
<input type="text" name="ip2"
mask="95?5?.?"
repeat="4"
clean="true"
ng-model="ip2">
<p>Model: {{ip2}}</p>
<p>Field Error: {{form.ip2.$error}}</p>
<p>Field Valid: {{form.ip2.$valid}}</p>
<code>
<input type="text" name="ip2"
mask="95?5?"
repeat="4"
clean="true"
ng-model="ip2">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 255.255.255.255</label>
<br>
<input type="text" name="ip3"
mask="255.255.255.255"
ng-model="ip3">
<p>Model: {{ip3}}</p>
<p>Field Error: {{form.ip3.$error}}</p>
<p>Field Valid: {{form.ip3.$valid}}</p>
<code>
<input type="text" name="ip3"
mask="255.255.255.255"
ng-model="ip3">
</code>
</fieldset>
</div>
</div>
<hr>
<div class="row">
<h3>CPF example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 999.999.999-99</label>
<br>
<input type="text" name="cpf1"
mask="999.999.999-99"
ng-model="cpf1">
<p>Model: {{cpf1}}</p>
<p>Field Error: {{form.cpf1.$error}}</p>
<code>
<input type="text" name="cpf1"
mask="999.999.999-99"
ng-model="cpf1">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 999.999.999-99 CLEAN: TRUE</label>
<br>
<input type="text" name="cpf3"
mask="999.999.999-99"
clean="true"
ng-model="cpf3">
<p>Model: {{cpf3}}</p>
<p>Field Error: {{form.cpf3.$error}}</p>
<code>
<input type="text" name="cpf3"
mask="999.999.999-99"
clean="true"
ng-model="cpf3">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 999.999.999-99 CLEAN: FALSE</label>
<br>
<input type="text" name="cpf2"
mask="999.999.999-99"
clean="false"
ng-model="cpf2">
<p>Model: {{cpf2}}</p>
<p>Field Error: {{form.cpf2.$error}}</p>
<code>
<input type="text" name="cpf2"
mask="999.999.999-99"
clean="false"
ng-model="cpf2">
</code>
</fieldset>
</div>
</div>
<hr>
<div class="row">
<h3>Numbers example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 123?4? RESTRICT: REJECT LIMIT: FALSE</label>
<br>
<input type="text" name="optional"
mask="123?4?"
restrict="reject"
limit="false"
ng-model="optional">
<p>Model: {{optional}}</p>
<p>Field Error: {{form.optional.$error}}</p>
<p>Field Valid: {{form.optional.$valid}}</p>
<code>
<input type="text" name="optional"
mask="123?4?"
restrict="reject"
limit="false"
ng-model="optional">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 9 REPEAT: 5</label>
<br>
<input type="text" name="repeat"
mask="9"
repeat="5"
ng-model="repeat">
<p>Model: {{repeat}}</p>
<p>Field Error: {{form.repeat.$error}}</p>
<p>Field Valid: {{form.repeat.$valid}}</p>
<code>
<input type="text" name="repeat"
mask="9"
repeat="5"
ng-model="repeat">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 99999</label>
<br>
<input type="text" name="dontrepeat"
mask="99999"
ng-model="dontrepeat">
<p>Model: {{dontrepeat}}</p>
<p>Field Error: {{form.dontrepeat.$error}}</p>
<p>Field Valid: {{form.dontrepeat.$valid}}</p>
<code>
<input type="text" name="dontrepeat"
mask="99999"
ng-model="dontrepeat">
</code>
</fieldset>
</div>
</div>
<hr>
<div class="row">
<h3>Default value example</h3>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 39/19/9999</label>
<br>
<input type="text" name="dateDefault"
mask="39/19/9999"
ng-value="30/09/1986"
ng-model="dateDefault">
<p>Model: {{dateDefault}}</p>
<p>Field Error: {{form.dateDefault.$error}}</p>
<code>
<input type="text" name="dateDefault"
mask="39/19/9999"
ng-value="30/09/1986"
ng-model="dateDefault">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 999.999.999-99 CLEAN: FALSE</label>
<br>
<input type="text" name="cpfDefault"
mask="999.999.999-99"
clean="false"
ng-value="a8799900105"
ng-model="cpfDefault">
<p>Model: {{cpfDefault}}</p>
<p>Field Error: {{form.cpfDefault.$error}}</p>
<code>
<input type="text" name="cpfDefault"
mask="999.999.999-99"
clean="false"
ng-value="a8799900105"
ng-model="cpfDefault">
</code>
</fieldset>
</div>
<div class="col-xs-12 col-sm-4">
<fieldset>
<label>MASK: 9 REPEAT: 5</label>
<br>
<input type="text" name="numberDefault"
mask="9"
repeat="5"
ng-value="12345"
ng-model="numberDefault">
<p>Model: {{numberDefault}}</p>
<p>Field Error: {{form.numberDefault.$error}}</p>
<code>
<input type="text" name="numberDefault"
mask="9"
repeat="5"
ng-value="12349"
ng-model="numberDefault">
</code>
</fieldset>
</div>
</div>
</form>
</div>
<p class="text-center">
<br>
<a href="https://github.com/candreoliveira/ngMask">@candreoliveira - ngMask</a>
<br>
</p>