javascript - Custom directive for telephone format using angularjs -

i trying write custom directive usa telephone number using angularjs , need preserve data type of field integer.here jsfiddle directive , need complete directive.

if user enters valid telephone no (exactly 10 numbers ie.1234567890) input should split 3 chunks 123-456-7890 when user moves next control.otherewise should show error message "not valid number".

<div ng-app="myapp" ng-controller="myctrl"> <form name="myform">     <input type="text" ng-model="telephone" phoneformat  name="input1" />      <span class="error" ng-show="myform.input1.$error.telephone">numbers only!</span>     <span class="error" ng-show="myform.input1.$error.telephone">exact 10 numbers only!</span>  </form> </div>  var myapp = angular.module("myapp", []);  var myctrl = myapp.controller("myctrl",["$scope", function($scope) { $scope.telephone = "1234567890"; }]);   myapp.directive("phoneformat", function () {   return {     restrict: "a",     require: "ngmodel",     link: function (scope, element, attr, ngmodelctrl) {         var phoneformat = function () {          }        }     };  }); 

it looks want leverage $error property of form drive validation. this, need call $setvalidity in ngmodelctrl have required directive:

var myapp = angular.module("myapp", []);  var myctrl = myapp.controller("myctrl",["$scope", function($scope) {     $scope.telephone = "1234567890"; }]);  myapp.directive("phoneformat", function () {     return {         restrict: "a",         require: "ngmodel",         link: function (scope, element, attr, ngmodelctrl) {             //parsing performed angular view model (e.g. update input box)             //sounds want number without hyphens, take them out replace             var phoneparse = function (value) {                 var numbers = value && value.replace(/-/g, "");                 if (/^\d{10}$/.test(numbers)) {                     return numbers;                 }                  return undefined;             }             //formatting done view model (e.g. when set $scope.telephone)             //function insert hyphens if 10 digits entered.             var phoneformat = function (value) {                 var numbers = value && value.replace(/-/g,"");                 var matches = numbers && numbers.match(/^(\d{3})(\d{3})(\d{4})$/);                  if (matches) {                     return matches[1] + "-" + matches[2] + "-" + matches[3];                 }                  return undefined;             }             //add these functions formatter , parser pipelines            ngmodelctrl.$parsers.push(phoneparse);            ngmodelctrl.$formatters.push(phoneformat);             //since want update error message on blur, call $setvalidity on blur            element.bind("blur", function () {                 var value = phoneformat(element.val());                 var isvalid = !!value;                 if (isvalid) {                     ngmodelctrl.$setviewvalue(value);                     ngmodelctrl.$render();                 }                  ngmodelctrl.$setvalidity("telephone", isvalid);                 //call scope.$apply() since blur event happens "outside of angular"                 scope.$apply();             });         }     }; }); 

working fiddle. quick way of demonstrating parser , formatter pipelines used in ngmodel, along $setvalidity -- used populate $error field(s).

update: use same phone validation across multiple phones, use form $error. notice each input gets unique name used myform (name of form). both use $error.telephone:

<form name="myform">     mobile phone:     <input type="text" ng-model="mobilephone" phoneformat name="mobilephone" />     <span class="error" ng-show="myform.mobilephone.$error.telephone">        exact 10 numbers only!     </span>     <br />     home phone:     <input type="text" ng-model="homephone" phoneformat  name="homephone" />     <span class="error" ng-show="myform.homephone.$error.telephone">         exact 10 numbers only!     </span> </form> 

updated fiddle.