JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
{{ myForm.email }}
<form name="myForm">
<blur type="email" ng-model="test" name="email" required></blur>
</form>
</div>
JavaScript
var app = angular.module('app', [])
.directive('blur', function () {
return {
restrict: 'E',
require: '?ngModel',
replace: true,
template: "<input />",
link: function postLinkFn($scope, $element, $attrs, ctrl) {
if (!ctrl) { return; }
ctrl.untouched = true;
ctrl.touched = false;
$element.on('blur', function (){
$scope.$apply(function () {
ctrl.untouched = false;
ctrl.touched = true;
});
});
}
};
});