Angular Input Types

Angular Input Types is used to create form inputs which help users enter the correct format using autocomplete and validation. See available input types below.

• Swedish SSN (i.e. personnummer)
• Swedish organization number
• Number
• Time

Demo

There is a demo at https://www.blitter.se/angular-input-types/examples/

Installation

Several options are available:

• Download latest version.
• Install with npm: npm install angular-input-types
• Install with yarn: yarn add angular-input-types

Usage

Include angular-input-types.min.js on the page.

<script src="angular-input-types.min.js"></script>

Include the inputTypes dependency in on your AngularJS module.

var app = angular.module('exampleApp', [ 'inputTypes' ]);

See how to use different input types below.

Swedish SSN (i.e. personnummer)

Helps the user to enter a swedish SSN in the format of yyyymmdd-nnnn.

The input must have an ng-model for the validation to work.

<input type="tel" id="personnummer" ng-model="personnummer" input-personnummer/>

Swedish organization number

Helps the user to enter an swedish organization number in the format of nnnnnn-nnnn or nnnnnnnn-nnnn. Also allows Swedish SSN as that could be an organization number.

The input must have an ng-model for the validation to work.

<input type="tel" id="orgnr" ng-model="orgnr" input-orgnr/>

Number

Helps the user to enter a number by adding thousand separators and restricting number of decimals.

The input must have an ng-model for the validation to work. The type has to be tel to work in Firefox on Android.

<input type="tel" id="number" ng-model="number" input-number/>

The thousand separator and decimal separators comes from $locale. You can override these like this.

angular.module('myApp').run(['$locale', function($locale) {
  $locale.NUMBER_FORMATS.GROUP_SEP = ' '; // Use space as thousand separator
  $locale.NUMBER_FORMATS.DECIMAL_SEP = ','; // Use comma as decimal separator
}])

Change number of decimals for all input-number fields. Default is no decimals.

angular.module('myApp').config(['inputNumberProvider', function(inputNumberProvider) {
    inputNumberProvider.nrOfDecimals = 2;
}]);

Change number of decimals for a single field.

<input type="tel" id="number" ng-model="number" input-number decimals="2"/>

Set a minimum allowed value.

<!-- This example only allows positive values -->
<input type="tel" id="number" ng-model="number" input-number min="0"/>

Time

Helps the user to enter a time using native time input on mobile devices by setting type="time" on the input element. The input-time attribute adds validation plus autocomplete as fallback.

The input must have an ng-model for the validation to work.

<input type="time" id="time" ng-model="time" input-time/>