AngularJS指令模糊事件沒有設置驗證

我想第一次做一個自定義的AngularJS指令，其中幾個貨幣驗證檢查完成和表單有效性設置。我正在嘗試使用驗證用戶輸入的鏈接來設置模糊事件，並在驗證檢查失敗時添加CSS和html元素。以下是我迄今爲止：AngularJS指令模糊事件沒有設置驗證

angular.module('sharedDirectives', []).directive('abccurrency', function() { 
return { 
    restrict: "A", 
    require: 'ngModel', 
    replace: true, 
    link: function (scope, element, attr, ctrl) { 
     var commaRegEx = /^(?:\d+(?:,\d{3})*(?:\.\d{2})?)$/; 
     var min = 0; 
     var max = 99999.99; 

     element.bind('blur', function (value) { 

      var valueNoComma = parseFloat(value.currentTarget.value.replace(/,/g, '')); 
      ctrl.$setViewValue(String(value.currentTarget.value).replace(/,/g, '')); 

      var validCommas = commaRegEx.test(value.currentTarget.value); 
      ctrl.$setValidity('commaValidate', validCommas); 

      if (validCommas === true) { 
       var aboveMin = min < valueNoComma; 
       ctrl.$setValidity('minValidate', aboveMin); 
      } 

      if (validCommas === true) { 
       var belowMax = valueNoComma <= max; 
       ctrl.$setValidity('maxValidate', belowMax); 
      } 
     }); 
    } 
}; 
});

下面是HTML我想這個指令適用的例子：

<form name="testform"> 
<div class="row top-buffer15"> 
    <div class="col-md-3" ng-class="{'has-error' : testform.currencytest.$invalid && testform.currencytest.$touched}"> 
     <input type="text" ng-model="matchpay.test" id="currencytest" name="currencytest" class="form-control" abccurrency> 
     <p style="color: red" ng-show="testform.currencytest.$error.commaValidate">Currency fields must the form XX,XXX.XX or XXXXX.XX.</p> 
     <p style="color: red" ng-show="testform.currencytest.$error.minValidate">Currency fields must be more than zero.</p> 
     <p style="color: red" ng-show="testform.currencytest.$error.maxValidate">Currency fields cannot be more than $99,999.99.</p> 
    </div> 
</div> 
</form>

現在我的問題是，在該項目的一個區域，這與預期一致。用戶輸入他們的輸入並顯示CSS樣式和錯誤通知html。但是，在另一個區域，即使指令中的代碼已運行，blur事件實際上也不會改變任何內容。只有在您輸入和輸入完成後，纔會顯示正確的驗證信息。有沒有立即顯而易見的，我做錯了？我不清楚爲什麼它能在一個地方工作，而不是另一個地方。如果您需要更多信息，請告訴我，我很樂意發佈功能差異的屏幕截圖。

來源

2017-08-02 Max MacEachern

經過一番研究和確認，應該工作。我試着把$ setViewValue調用放在最後看看它是否會做任何事情。事實證明，無論出於何種原因，它確實會阻止$ setValidity調用。任何想法爲什麼？這個重構允許指令正確地通知用戶不正確的輸入。

element.bind('blur', function (value) { 

      var valueNoComma = parseFloat(value.currentTarget.value.replace(/,/g, '')); 

      var validCommas = commaRegEx.test(value.currentTarget.value); 
      var aboveMin = min < valueNoComma; 
      var belowMax = valueNoComma <= max; 

      ctrl.$setValidity('commaValidate', validCommas); 
      ctrl.$setValidity('minValidate', aboveMin); 
      ctrl.$setValidity('maxValidate', belowMax); 
      ctrl.$setViewValue(String(value.currentTarget.value).replace(/,/g, '')); 


     });

來源

2017-08-03 16:34:48

AngularJS指令模糊事件沒有設置驗證

回答

相關問題