Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/2.0/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-animate.min.js"></script>
<meta charset=utf-8 />
<title>Angular Reset Field</title>
</head>
<body>
    <div ng-controller="FirstCtrl">
     <form novalidate name="myForm">
    <p>{{firstName}}</p>
    <label>FirstName: <input ng-model="myForm.firstName" am-reset-field type="text" required ng-pattern="firstNamePattern" /></label>
    <p>{{lastName}}</p>
    <label>LastName: <input ng-model="myForm.lastName" am-reset-field type="text" required/></label>
      </form>
  </div>
</body>
</html>
 
​
angular.module('am.resetField', []).directive('amResetField', 
function resetField($compile, $timeout) {
return {
    require: 'ngModel',
    scope: {},
    transclusion: true,
    link: function (scope, el, attrs, ctrl) {
        // limit to input element of specific types
        var inputTypes = /text|search|tel|url|email|password/i;
        if (el[0].nodeName !== "INPUT")
            throw new Error("resetField is limited to input elements");
        if (!inputTypes.test(attrs.type))
            throw new Error("Invalid input type for resetField: " + attrs.type);
​
        // compiled reset icon template
        var template = $compile('<i ng-show="enabled" ng-mousedown="reset()" class="fa fa-times-circle"></i>')(scope);
        el.addClass('reset-field');
        el.after(template);
​
        scope.reset = function () {
            ctrl.$setViewValue(null);
            ctrl.$render();
            $timeout(function () {
                el[0].focus();
            }, 0, false);
            scope.enabled = false;
        };
​
        el.bind('input', function () {    
          
          //I added this snippet since the directive on its own works so  
          // well, (thought scope.reset() above would do the trick) but it                   
          //doesn't pass the validations... thus the remaining code
            if (ctrl.$isEmpty(el.val())) {  
                ctrl.$setPristine();
                ctrl.$setValidity('required', true);
                // the form now thinks this model satisfies the 'required' validity requirement
              
            } else {
                scope.enabled = !ctrl.$isEmpty(el.val());
            }
            scope.$apply();
        })
        .bind('focus', function () {
            $timeout(function () {
                scope.enabled = !ctrl.$isEmpty(el.val());
                scope.$apply();
            }, 0, false);
        })
        .bind('blur', function () {           
            $timeout(function () {
                scope.enabled = false;                    
            }, 0, false);
​
        });
    }
};
});
​
​
​
angular.module('ResetApp', ['ngAnimate', 'am.resetField'])
  .controller('FirstCtrl', function($scope){
  
  $scope.firstNamePattern = new RegExp(/matt/);
  
});
angular.bootstrap(document, ['ResetApp']);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers