JSFiddle - React, Tailwind, and code Playground

HTML

<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>

JavaScript

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 phoneParse = function (value) {
                var numbers = value && value.replace(/-/g, "");
                if (/^\d{10}$/.test(numbers)) {
                    return numbers;
                }
                    
                return undefined;
            }
            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;
            }
           ngModelCtrl.$parsers.push(phoneParse);
           ngModelCtrl.$formatters.push(phoneFormat);
            
            element.bind("blur", function () {
                var value = phoneFormat(element.val());
                var isValid = !!value;
                if (isValid) {
                    ngModelCtrl.$setViewValue(value);
                    ngModelCtrl.$render();
                }
                
                ngModelCtrl.$setValidity("telephone", isValid);
                scope.$apply();
            });
        }
    };
});