Angular Input Masks GitHub

How to use it

ui-number-mask

<input type="text" ng-model="number" ui-number-mask="4">
Number: Model value: {{demoNumber}}
Decimals:

  • Support to the min and max attributes.
  • Number: Model value: {{number2}}
    Min value: Number respect the min value: {{!formN.field7.$error.min}}
    Max value: Number respect the max value: {{!formN.field7.$error.max}}

  • Support to ui-negative-number to accepts negative numbers.
  • Number: Press '-' to test

  • Support to ui-hide-group-sep attributes.
  • Number: Model value: {{number4}}

  • Internationalized: Used the decimal separator and thousands separator defined in the client browser configuration.

  • ui-percentage-mask

    <input type="text" ng-model="percentage" ui-percentage-mask="4">
    Percentage: Model value: {{percentageDemo}}
    Decimals:

  • Support to the min and max and ui-negative-number attributes.
  • Internationalized: Used the decimal separator and thousands separator defined in the client browser configuration.

  • ui-money-mask

    <input type="text" ng-model="money" ui-money-mask="3">
    Money: Model value: {{moneyDemo}}
    Decimals:

  • Support to the min and max and ui-negative-number attributes.
  • Internationalized: Used the currency symbol, decimal separator and thousands separator defined in the client browser configuration.

  • ui-br-phone-number

    <input type="text" ng-model="phoneNumber" ui-br-phone-number>
    Phone number: Model value: {{phone8}}
    Phone number: Model value: {{phone9}}

  • The same mask supports phone numbers with 8 or 9 numbers.

  • ui-br-cep-mask

    <input type="text" ng-model="cep" ui-br-cep-mask>
    CEP: Model value: {{cep}}

    ui-br-cpf-mask

    <input type="text" ng-model="cpf" ui-br-cpf-mask>
    CPF:
      Model value: {{cpf}} ({{cpfForm.cpfField.$error.cpf? 'Invalid' : 'Valid'}} CPF)

  • With CPF validation support.

  • ui-br-cnpj-mask

    <input type="text" ng-model="cnpj" ui-br-cnpj-mask>
    CNPJ:
      Model value: {{cnpj}} ({{cnpjForm.cnpjField.$error.cnpj? 'Invalid' : 'Valid'}} CNPJ)

  • With CNPJ validation support.

  • ui-br-cpfcnpj-mask

    <input type="text" ng-model="cpfCnpj" ui-br-cpfcnpj-mask>
    CPF/CNPJ:
      Model value: {{cpfcnpj}} ({{ccForm.ccField.$error.cpf || ccForm.ccField.$error.cnpj ? 'Invalid' : 'Valid'}} CPF/CNPJ)

  • With CPF/CNPJ validation support.

  • ui-br-ie-mask

    <select ng-init="ufs=['AC','AL','AM','TO']" ng-model="selectedUF" ng-options="uf for uf in ufs"></select>
    <input type="text" ng-model="ieField" ui-br-ie-mask='selectedUF'>
    State:    I.E.:
      Model value: {{ieField}}

  • Support all the 27 brazillian states.
  • Validations according to the Sintegra especification