AngularJS輸入掩碼與驗證

Question

我有一個指令，它有一個輸入控件的掩碼和驗證。它基本上是一個時間輸入，用戶可以輸入45（45分鐘）或2.5（2.5小時=> 150分鐘）。編輯時輸入的是type=number，但使用過濾器顯示結果時的輸入爲type=text。

（只有15分鐘的增量是允許的，並且過濾器被應用在模糊事件）

所有工作正常，除了初始值，當我點擊到文本框中，會丟失。在focus事件中，scope.minutes值未定義，其中應該是控制器中設置的90值。我無法弄清楚爲什麼。

angular.module('demoApp', []) 
 
\t .controller('MainController', MainController) 
 
    .filter("hoursMinutes", function() { 
 
      return function (mins) { 
 
       if (mins == 0) return "0 mins"; 
 
       var hours = ((mins - (mins % 60))/60); 
 
       var minutes = (mins % 60); 
 
       return (hours > 0 ? hours + " hr" + (hours === 1 ? "" : "s") : "") + (minutes > 0 ? " " + minutes + " min" + (minutes === 1 ? "" : "s") : ""); 
 
      } 
 
     }) 
 
    .directive("ixTimeEntry", function ($filter) { 
 
      return { 
 
       restrict: "A", 
 
       require: 'ngModel', 
 
       scope: { 
 
        minutes: "=", 
 
        filter: "@", 
 
        inputFormat: "@" 
 
       }, 
 
       link: function (scope, element, attr, ngModel) { 
 
        
 
        // could set a max attribute, so mins can't be more than 1440 (a day)? 
 

 
        var inputFormat = scope.inputFormat || "minutes"; 
 
        var filter = scope.filter || "hoursMinutes"; 
 

 
        // for DOM -> model validation 
 
        ngModel.$parsers.unshift(function (value) { 
 
         var result = validate(value); 
 
         ngModel.$setValidity('ixTimeEntry', result.valid); 
 
         return result.value; 
 
        }); 
 

 
        // for model -> DOM validation 
 
        ngModel.$formatters.unshift(function (value) { 
 
         ngModel.$setValidity('ixTimeEntry', true); 
 
         return $filter(filter)(value); 
 
        }); 
 

 
        function validate(input) { 
 
         var result = { valid: false, value: input }; 
 
         if (input === undefined) return result; 
 
         input = +input; 
 
         if (input === 0) return result; 
 
         if (input < 0) return result; 
 

 
         if (inputFormat === "minutes") { 
 
          // entering as minutes: 
 
          // if 15, 30, 45, 60, 75, 90, etc  => treat as minutes 
 
          // if .25, .5, .75, 1, 1.25, ...12  => treat as hours 
 
          // else (e.g. 13, 14, 16, 17, 18, etc) => invalid 
 
          if (input % 15 === 0) result = { valid: true, value: input }; 
 
          if (input % .25 === 0 && input <= 12) result = { valid: true, value: input * 60 }; 
 
         } else if (inputFormat === "hours") { 
 
          // entering as hours: 
 
          // if .25, .5, .75, 1, 1.25, etc  => treat as hours 
 
          // else         => invalid 
 
          if (input % .25 === 0) result = { valid: true, value: input * 60 }; 
 
         } else { 
 
          throw "Invalid inputFormat in timeEntry"; 
 
         } 
 

 
         return result; 
 
        } 
 

 
        function addMask(text) { 
 
         return $filter(filter)(text); 
 
        } 
 

 
        function removeMask(text) { 
 
         if (inputFormat === "hours") 
 
          return +text/60; 
 
         return text; 
 
        } 
 

 
        element.val(addMask(scope.minutes)); 
 

 
        element.bind("blur", function() { 
 
         element.attr("type", "text"); 
 
         scope.$apply(function() { 
 
          var value = validate(element.val()).value; 
 
          scope.minutes = value; 
 
          element.val(addMask(value)); 
 
         }); 
 
        }); 
 

 
        element.bind("focus", function() { 
 
         element.attr("type", "number"); 
 
         scope.$apply(function() { 
 
          element.val(removeMask(scope.minutes)); 
 
         }); 
 
        }); 
 
       } 
 
      }; 
 
     });; 
 

 

 
function MainController() { 
 
\t var vm = this; 
 
    vm.minutes1 = 90; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="demoApp" ng-controller="MainController as vm"> 
 
<form id="timeForm" name="timeForm" > 
 
<input type="text" class="form-control" name="time" placeholder="time" ix-time-entry input-format="minutes" minutes="vm.minutes" filter="hoursMinutes" ng-required="true" ng-model="vm.minutes1" /> 
 
</form> 
 
<br> 
 
Model: {{vm.minutes1}}<br> 
 
Valid: {{timeForm.time.$valid}}<br> 
 
</div>

Answer 1

你只在你MainController設置vm.minutes1 = 90;。如果你設置了vm.minutes = 90;，它也可以工作。

angular.module('demoApp', []) 
 
\t .controller('MainController', MainController) 
 
    .filter("hoursMinutes", function() { 
 
      return function (mins) { 
 
       if (mins == 0) return "0 mins"; 
 
       var hours = ((mins - (mins % 60))/60); 
 
       var minutes = (mins % 60); 
 
       return (hours > 0 ? hours + " hr" + (hours === 1 ? "" : "s") : "") + (minutes > 0 ? " " + minutes + " min" + (minutes === 1 ? "" : "s") : ""); 
 
      } 
 
     }) 
 
    .directive("ixTimeEntry", function ($filter) { 
 
      return { 
 
       restrict: "A", 
 
       require: 'ngModel', 
 
       scope: { 
 
        minutes: "=", 
 
        filter: "@", 
 
        inputFormat: "@" 
 
       }, 
 
       link: function (scope, element, attr, ngModel) { 
 
        
 
        // could set a max attribute, so mins can't be more than 1440 (a day)? 
 

 
        var inputFormat = scope.inputFormat || "minutes"; 
 
        var filter = scope.filter || "hoursMinutes"; 
 

 
        // for DOM -> model validation 
 
        ngModel.$parsers.unshift(function (value) { 
 
         var result = validate(value); 
 
         ngModel.$setValidity('ixTimeEntry', result.valid); 
 
         return result.value; 
 
        }); 
 

 
        // for model -> DOM validation 
 
        ngModel.$formatters.unshift(function (value) { 
 
         ngModel.$setValidity('ixTimeEntry', true); 
 
         return $filter(filter)(value); 
 
        }); 
 

 
        function validate(input) { 
 
         var result = { valid: false, value: input }; 
 
         if (input === undefined) return result; 
 
         input = +input; 
 
         if (input === 0) return result; 
 
         if (input < 0) return result; 
 

 
         if (inputFormat === "minutes") { 
 
          // entering as minutes: 
 
          // if 15, 30, 45, 60, 75, 90, etc  => treat as minutes 
 
          // if .25, .5, .75, 1, 1.25, ...12  => treat as hours 
 
          // else (e.g. 13, 14, 16, 17, 18, etc) => invalid 
 
          if (input % 15 === 0) result = { valid: true, value: input }; 
 
          if (input % .25 === 0 && input <= 12) result = { valid: true, value: input * 60 }; 
 
         } else if (inputFormat === "hours") { 
 
          // entering as hours: 
 
          // if .25, .5, .75, 1, 1.25, etc  => treat as hours 
 
          // else         => invalid 
 
          if (input % .25 === 0) result = { valid: true, value: input * 60 }; 
 
         } else { 
 
          throw "Invalid inputFormat in timeEntry"; 
 
         } 
 

 
         return result; 
 
        } 
 

 
        function addMask(text) { 
 
         return $filter(filter)(text); 
 
        } 
 

 
        function removeMask(text) { 
 
         if (inputFormat === "hours") 
 
          return +text/60; 
 
         return text; 
 
        } 
 

 
        element.val(addMask(scope.minutes)); 
 

 
        element.bind("blur", function() { 
 
         element.attr("type", "text"); 
 
         scope.$apply(function() { 
 
          var value = validate(element.val()).value; 
 
          scope.minutes = value; 
 
          element.val(addMask(value)); 
 
         }); 
 
        }); 
 

 
        element.bind("focus", function() { 
 
         element.attr("type", "number"); 
 
         scope.$apply(function() { 
 
          element.val(removeMask(scope.minutes)); 
 
         }); 
 
        }); 
 
       } 
 
      }; 
 
     });; 
 

 

 
function MainController() { 
 
\t var vm = this; 
 
    vm.minutes = 90; 
 
    vm.minutes1 = 90; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="demoApp" ng-controller="MainController as vm"> 
 
<form id="timeForm" name="timeForm" > 
 
<input type="text" class="form-control" name="time" placeholder="time" ix-time-entry input-format="minutes" minutes="vm.minutes" filter="hoursMinutes" ng-required="true" ng-model="vm.minutes1" /> 
 
</form> 
 
<br> 
 
Model: {{vm.minutes1}}<br> 
 
Valid: {{timeForm.time.$valid}}<br> 
 
</div>