angular-input-types
Version:
AngularJS directives used on form inputs. Makes it easy for the users to input the correct information using autocomplete and validation.
48 lines (47 loc) • 2.4 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Input Types Demo (personnummer, orgr)</title>
<link rel="stylesheet" href="examples.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.6.4/angular-locale_sv-se.min.js"></script>
<script src="../dist/angular-input-types.min.js"></script>
</head>
<body ng-app="exampleApp" ng-controller="exampleController" ng-strict-di>
<h1>Angular Input Types Demo</h1>
<form>
<ul>
<li>
<label for="personnummer">Personnummer</label>
<input type="tel" id="personnummer" ng-model="personnummer" placeholder="ÅÅÅÅMMDD-NNNN" input-personnummer/>
</li>
<li>
<label for="orgnr">Organisationsnummer</label>
<input type="tel" id="orgnr" ng-model="orgnr" input-orgnr/>
</li>
<li>
<label for="number">Number</label>
<input type="tel" id="number" ng-model="number" input-number decimals="2"/>
<span ng-if="number">modelValue={{number}}</span>
</li>
<li>
<label for="positive-number">Positive number</label>
<input type="tel" id="positive-number" ng-model="positiveNumber" input-number decimals="2" min="0"/>
<span ng-if="number">modelValue={{positiveNumber}}</span>
</li>
<li>
<label for="time">Time</label>
<input type="time" id="time" placeholder="HH:MM" ng-model="time" input-time/>
<span ng-if="time">modelValue={{time}}</span>
</li>
</ul>
</form>
<script>
angular.module('exampleApp', [ 'inputTypes' ]).controller('exampleController', function() {});
</script>
<p>Usage: <a href="https://github.com/FlaxHaxx/angular-input-types">https://github.com/FlaxHaxx/angular-input-types</a>.</p>
<a href="https://github.com/FlaxHaxx/angular-input-types"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</body>
</html>