AngularJS Input Mask Form Fields Validation Example For Phone Numbers & Currency Input Full Project For Beginners

 

 

index.html

 

 

<body>


<div ng-app="app">
	<div ng-controller="amount">
		<input id="number" type="text" ng-model="myNumber"/>
		<label for="number">{{myNumber | currency}}</label>
	</div>
</div>


</body>


<style>

* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

input {
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  display: block;
  height: 40px;
  margin: 0;
  outline: 0;
  padding: 4px;
  text-align: left;
  vertical-align: top;
  width: 160px;
}

input:focus + label {
  display: none;
}

label {
  background: white;
  border-radius: 0;
  border: 1px solid grey;
  box-shadow: none;
  font-size: 16px;
  display: block;
  line-height:32px;
  height: 40px;
  margin: -40px 0 0;
  position: relative;
  outline: 0;
  padding: 4px;
  text-align: left;
  width: 160px;
}

</style>


<script>


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

module.controller("amount", function($scope, $element, $attrs) {
	$scope.myNumber = 1234.56;
});


</script>

Leave a Reply