Angular.Js入力[日]検証

Question

は私のフォームである：ここでは

<form name="user_submission" novalidate="novalidate" method="post"> 
     <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]\d{3})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/" ng-model="step_content.date_of_birth" required ng-maxlength="10" ng-minlength="10" > 
    <br> 
        <span class="error" ng-show="user_submission.date_of_birth.$error.pattern">Wrong format!</span> 
        <span class="error" ng-show="user_submission.date_of_birth.$error.date">Wrong Date!</span> 
        <span class="error" ng-show="user_submission.date_of_birth.$error.minlength">Wrong Date!</span> 
        <span class="error" ng-show="user_submission.date_of_birth.$error.maxlength">Wrong Date!</span> 
</form> 

は、私は、フォーム上から得るものです：私は封じ込める必要がある（これは完璧な）

年から 'yyyy'しかし、私が何をしても、4桁以上を入力することができます。

私はそれのためにディレクティブを試してみました：私は、日付フィールドにlimitToを追加するとき

// Usage: <input limit-to="4" type="number" > 

app.directive("limitTo", [function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      var limit = parseInt(attrs.limitTo); 
      angular.element(elem).on("keydown", function() { 
       if (this.value.length == limit) return false; 
      }); 
     } 
    } 
}]); 

は、しかし、私は単に私が角度が「YYYYをオーバーライドすると思わ通年を入力することはできません'右から数字を追加して左から' y 'を削除すると、limitTo=10は単純に機能しません。

オプションがありません。

何か助けや指示があれば幸いです。

ありがとうございます。

Answer 1

私は自分のディレクティブをあきらめましたが、誰かが同じ問題を抱えている場合にはこの質問を削除しません。

ここで私が作った命令は少し浸透性ですが、それは仕事です。 Chrome、Safari、Firefoxでテスト済み。 。あなたがこれを実装する場合ので、理由はテンプレートfocusディレクティブを埋め込むPlunkerに埋め込まれて、私は働いていません（私はテンプレートでplunkerのアドレスを整理できなかったhttps://plnkr.co/edit/XwNR618DM8IULxu9KLMe

：ここ

はPlunkerアドレスです次のコードで、あなたのカーソルがそれを完了すると、別のものに1つのテキストフィールドから移動する必要があります）。ここ

app.directive('multiSelectDate', function() { 

     return { 
      restrict: 'EA', 
      scope: { 
       datasource: '=' 
      }, 
      controller: function ($scope) { 

       $scope.date = { 
        day: [], 
        month: [], 
        year: [] 
       }; 

       if (typeof $scope.datasource != 'undefined' && $scope.datasource != '') { 
        var sources = $scope.datasource.split('/'); 

        if (typeof sources == 'object') { 
         $scope.date = { 
          day: [sources[0][0], sources[0][1]], 
          month: [sources[1][0], sources[1][1]], 
          year: [sources[2][0], sources[2][1], sources[2][2], sources[2][3]], 
         }; 
        } 
       } 

       $scope.only_one_allowed = function(array) { 
        var val = []; 
        angular.forEach(array, function(value, index){ 
         if (typeof value != 'undefined') { 
          if (value.length > 1) { 
           val[index] = value.split('')[1]; 
          } else { 
           val[index] = value 
          } 
         } 
        }); 
        return val; 
       }; 

       $scope.only_number_allowed = function(array, type) { 

        if (type == 'year') { 
         var year_1st_digit = /1|2/; 
         var year_2nd_digit = /0|9/; 
         var year_rest_digit = /[0-9]/; 

         if (!year_1st_digit.test(array[0])) { 
          array[0] = ''; 
         } 
         // Should be 0 or 9 
         if (!year_2nd_digit.test(array[1])) { 
          array[1] = ''; 
         } 
         if (!year_rest_digit.test(array[2])) { 
          array[2] = ''; 
         } 
         if (!year_rest_digit.test(array[3])) { 
          array[3] = ''; 
         } 

        } else if (type == 'month') { 

         var month_1st_digit = /[0-1]/; 
         var month_2nd_digit = /[0-9]/; 

         // Shouldn't be more than 1 or less than 0 
         if (!month_1st_digit.test(array[0])) { 
          array[0] = ''; 
         } 

         // Shouldn't be more than 2 or less than 0 
         if (!month_2nd_digit.test(array[1])) { 
          array[1] = ''; 
         } 

         // if the month[0] is undefined and second digit has value change the first digit to 0 
         if ((typeof array[0] == 'undefined' || array[0] == '') && parseInt(array[1]) >= 0) { 
          array[0] = 0; 
         } 

         // date.array must have only one digit 
         if (parseInt(array[0], 10) != array[0]) { 
          array[0] = ''; 
         } 

         if (parseInt(array[1], 10) != array[1]) { 
          array[1] = ''; 
         } 


         if (parseInt(array[0], 10) == array[0] && parseInt(array[1], 10) != array[1]) { 
          array[1] = 0; 
         } 


        } else { 

         var day_1st_digit = /[0-3]/; 
         var day_2nd_digit = /[0-9]/; 

         // Shouldn't be more than 1 or less than 0 
         if (!day_1st_digit.test(array[0])) { 
          array[0] = ''; 
         } 

         // Shouldn't be more than 2 or less than 0 
         if (!day_2nd_digit.test(array[1])) { 
          array[1] = ''; 
         } 

         // if the day[0] is 3 then second digits must be less than 1 
         if (parseInt(array[0]) == 3 && parseInt(array[1]) > 1) { 
          array[1] = 1; 
         } 

         // if the day[0] is undefined and second digit has value change the first digit to 0 
         if ((typeof array[0] == 'undefined' || array[0] == '') && parseInt(array[1]) >= 0) { 
          array[0] = 0; 
         } 

         // date.array must have only one digit 
         if (parseInt(array[0], 10) != array[0]) { 
          array[0] = ''; 
         } 

         if (parseInt(array[1], 10) != array[1]) { 
          array[1] = ''; 
         } 

         if (parseInt(array[0], 10) == array[0] && parseInt(array[1], 10) != array[1]) { 
          array[1] = 0; 
         } 


        } 

        return array; 
       }; 

       $scope.update_date = function() { 

        var day = ''; 
        var month = ''; 
        var year = ''; 

        if (typeof $scope.date.day != 'undefined') { 
         var dirty_day = $scope.only_one_allowed($scope.date.day); 
         dirty_day = $scope.only_number_allowed(dirty_day, 'day'); 
         $scope.date.day = dirty_day; 
         day = dirty_day.join(''); 
        } 

        if (typeof $scope.date.month != 'undefined') { 
         var dirty_month = $scope.only_one_allowed($scope.date.month); 
         dirty_month = $scope.only_number_allowed(dirty_month, 'month'); 
         $scope.date.month = dirty_month; 
         month = dirty_month.join(''); 
        } 

        if (typeof $scope.date.year != 'undefined') { 
         var dirty_year = $scope.only_one_allowed($scope.date.year); 
         dirty_year = $scope.only_number_allowed(dirty_year, 'year'); 
         $scope.date.year = dirty_year; 
         year = dirty_year.join(''); 
        } 

        $scope.datasource = day + '/' + month + '/' + year 
       } 
      }, 
      templateUrl: '/multiSelectDate.html', 
      link: function (scope, element, attrs) { 

       var start_year = attrs.startYear; 
       if (scope.date.year.length != 4 && typeof start_year != 'undefined') { 
        scope.date.year = [start_year[0], start_year[1], start_year[2], start_year[3]]; 
       } 

    scope.$watch('datasource', function(){ 

       var sources = scope.datasource.split('/'); 

       if (typeof sources == 'object') { 
        if (sources.length == 3) { 
         scope.date = { 
          day: [sources[0][0], sources[0][1]], 
          month: [sources[1][0], sources[1][1]], 
          year: [sources[2][0], sources[2][1], sources[2][2], sources[2][3]] 
         }; 
        } 

       } 
      }) 



      } 
     } 
    }); 

はテンプレートです：。（/multiSelectDate.html）

<div class="form-inline"> 
    <input type="text" focus ng-model="date.day[0]" class="dl_float" size="1" ng-keyup="update_date()"> 
    <input type="text" focus ng-model="date.day[1]" class="dl_float" size="1" ng-keyup="update_date()">/
    <input type="text" focus ng-model="date.month[0]" class="dl_float" size="1" ng-keyup="update_date()"> 
    <input type="text" focus ng-model="date.month[1]" class="dl_float" size="1" ng-keyup="update_date()">/
    <input type="text" focus ng-model="date.year[0]" class="dl_float" size="1" ng-keyup="update_date()"> 
    <input type="text" focus ng-model="date.year[1]" class="dl_float" size="1" ng-keyup="update_date()"> 
    <input type="text" focus ng-model="date.year[2]" class="dl_float" size="1" ng-keyup="update_date()"> 
    <input type="text" focus ng-model="date.year[3]" class="dl_float" size="1" ng-keyup="update_date()"> 
</div> 

012ここで

は焦点である：ここでは

// <input focus type="text" /> 

    app.directive('focus', function() { 
     return { 
      restrict: 'A', 
      link: function ($scope, elem, attrs) { 
       elem.bind('keyup', function (e) { 
        if (e.keyCode == 8) { 
         if (typeof elem.prev() != 'undefined' && elem.prev().size() > 0) { 
          elem.prev()[0].focus(); 
          elem.prev()[0].value = ''; 
         } 
        } else { 
         if (typeof elem.next() != 'undefined' && elem.next().size() > 0) { 
          var val = elem[0].value; 
          if (!isNaN(parseFloat(val)) && isFinite(val)) { 
           elem.next()[0].focus(); 
          } 
         } 
        } 

       }); 
      } 
     } 
    }); 

は、サンプルCSSです：ここで

.dl_float { 
    font-size: 14px !important; 
    width: 19px; 
} 

それを使用する方法：

<multi-select-date datasource="date_of_birth" start-year="1945" ></multi-select-date> 

ここでは、結果

を見ることができますどのように

{{date_of_birth}} 

コントローラで必要な場合は、ここでどのように起動しますか：

$scope.date_of_birth = '11/01/1950';