清除输入图标在具有角度 js 验证的表单中无法正常工作

Question

我正在尝试在表单的输入文本框中实现输入清除图标。我是通过一个指令来做的。但它不能正常工作。每当我在输入框中写东西时，十字按钮才会出现，除非它是有效输入，例如当我在公司名称中输入三个字符时，才会显示十字按钮，而不是当字符小于 3 或当模式是错误的。我希望每次在文本框中写入任何值时都应该显示它。当我点击交叉按钮时，它应该清除文本并显示所需的条件，当我点击交叉时，当前也显示。我正在使用以下代码作为指令-

 .directive('inputClearNoMaterial', function(){
    return {
            restrict: 'A',
            compile: function (element, attrs) {
                var color = attrs.inputClearNoMaterial;
                var style = color ? "color:" + color + ";" : "";
                var action = attrs.ngModel + " = ''";
                element.after(
                    '<span class="animate-show"' +
                    'ng-show="' + attrs.ngModel + '" ng-click="' + action + '"' +
                    'style="position: absolute; margin: 3px 0px; cursor: pointer; ">' +
                    '<div style="' + style + '">x</div>' +
                    '</span>');
            }
        };
        });

任何人都可以帮助我吗？十字按钮也应该显示在文本框内，因为它目前在框外。我在这里创建了一个 plunker- https://plnkr.co/edit/4sXB3S9HAuvszlZdimIU?p=preview

Answer 1

这是工作的link

如下修改你的指令代码

 .directive('inputClearNoMaterial', ['$compile','$timeout',function($compile,$timeout){
    return {
    restrict: 'A',
    require: 'ngModel',
    scope: {},
    link: function(scope, el, attrs, ctrl) {

     var color=attrs.inputClearNoMaterial;
       var style = color ? "color:" + color + ";" : "";

      var template = $compile('<i ng-show="enabled" ng-mousedown="clear()" style="' + style + '" class="fa fa-times-circle"></i>')(scope);
      el.after(template);

      scope.clear = function() {
        ctrl.$setViewValue(null);
        ctrl.$render();
        $timeout(function() {
            el[0].focus();
        }, 0, false);
      };

      el.bind('input focus', function() {
        scope.enabled = !ctrl.$isEmpty(el.val());
        scope.$apply();
      })
      .bind('blur', function() {
        scope.enabled = false;
        scope.$apply();
      });
    }
  };
        }]);