角的$輸入場解析器正對初始輸入

困難我有以下爲全面工作元件

http://plnkr.co/edit/Q1iZwBp6LXlun4yHs7Dq?p=preview

這裏plunker鏈接僅僅是一個簡單的代碼片段與我的問題跟着

var view_value; 
function fromUser(text) { 

    var return_value; 

    if(text.match(pattern) === null){ 
    // if input is not the regex 

    return_value = view_value; 
    // alert("pattern not matched we need to reset input \nreturn value: " + return_value + "\nview_value: " + view_value); 
    ngModelCtrl.$setViewValue(view_value); 
    ngModelCtrl.$render(); 
    } 
    else{ 
     // alert("pattern matched we need to continue \nreturn value: " + return_value + "\nview_value: " + view_value); 
     return_value = text; 
     view_value = return_value; 
    } 

    return return_value; 
    // if your return value is same as initial passin then it ends 
} 
ngModelCtrl.$parsers.push(fromUser); 
// parser gets fired when UI updates

基本上我有一個輸入字段，我也有一個正則表達式模式，當輸入內容時，我檢查這個正則表達式模式，如果它是無效的，那麼我返回到最後一個已知的有效狀態，這意味着UI更新。因此，不屬於我的正則表達式的無效字符或字符不能輸入到我的輸入中。只要你在輸入中輸入的第一個元素是一個有效的字符，如數字，這一切都可以正常工作。然後你可以輸入無效的或有效的，並且它可以正確地防止錯誤的輸入並允許輸入正確。所以唯一的問題是，當第一個數字是一個無效的字符，比如說'a'，那麼輸入沒有被重置。這是因爲我還沒有最後一個有效狀態。似乎只要設置我的var view_value =「」;但是這會造成無限循環。

所以要重申，我的輸入只允許小數點最多4位數的正數。如果我輸入4然後它會刪除a，我可以有42.44335，它刪除了5等，所以它是工作，如果我第一次鍵入一個數字。但是，如果我從一個像數字開始它應該刪除一個，所以輸入將再次爲空，但它不這樣做，所以我只有第一個初始輸入的問題。

我該如何解決這個問題？

來源

2016-02-13 thawts

這就解決您的問題時，第一個字符是一個非數字，同時，也使改變你的代碼的最小數量：

app.directive('inputRestrictor', [function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attr, ngModelCtrl) { 
      // changed here 
      var pattern = /^(?:|(?:[0-9]+(?:\.[0-9]{0,4})?))$/g; 
      var view_value; 

      function fromUser(text) { 
       var return_value; 
       if (text.match(pattern) === null) { 
        return_value = view_value; 
        // changed here 
        ngModelCtrl.$setViewValue(view_value || ''); 
        ngModelCtrl.$render(); 
       } 
       else { 
        return_value = text; 
        view_value = return_value; 
       } 

       return return_value; 
      } 
      ngModelCtrl.$parsers.push(fromUser); 
     } 
    }; 
}]);

來源

2016-02-14 02:26:40 kuujinbo

角的$輸入場解析器正對初始輸入

回答

相關問題