JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MY_APP">
  <div ng-controller="MyCtrl">
  <form name="userForm" novalidate ng-submit="userForm.$valid && submit(userData)">
              <div class="errorMsg" ng-show="submitted==true && userForm.$invalid">
                    <ul>
                        <li ng-show="submitted==true && userForm.emailphone.$error" class="errorMsg">
                            wrong format, It should be email or 10 digit mobile number
                        </li>
                    </ul>
                </div>
    <input overwrite-email type="email" name="emailphone" ng-model="userData.user" id="emailphone"  required />
    <button type="submit" ng-click="submitted = true">Submit</button>
</form>
</div>
</div>

JavaScript

var app = angular.module("MY_APP", []);
app.controller("MyCtrl", function($scope) {
  $scope.submitted = false;
  $scope.submit = function(userData){
  	console.log(userData)
  }
});
app.directive('overwriteEmail', function() {
	return {
    restrict: 'A',
    require: 'ngModel',
    priority: 1,
    link: function(scope, elem, attrs, ctrl) {
    	if (ctrl.$validators.email) {
      	ctrl.$validators.email = function(value) {
        	return !ctrl.$isEmpty(value);
        }
      }
    	console.log('Ctrl: ', ctrl);
      elem.on('change', function() {
        console.log('Ctrl: ', ctrl);
      })
    }
 	}
});