清除輸入圖標在正在驗證角度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(); 
     }); 
    } 
    }; 
     }]);