1

生年月日を表示するために、Angular 1.4.9 で JqueryUI datepicker(1.0.0) ディレクティブを使用しています。このフィールドは必須ではなく、入力されていない限り検証しないでください。

ページが読み込まれると、フィールドは true (期待どおり) として検証されます。ユーザーが日付を選択すると、再び有効になります。ただし、フィールドを手動で消去すると、フィールドは無効になります。

<input ui-date="dateOptions" name="dateOfBirth" ng-model="dob"/>

ng-model前後に同じ値を設定できますが、値は無効のままです。

ここで問題を再現する JSFiddle を作成しました。 https://jsfiddle.net/nipuna777/ctsmuv80/

4

2 に答える 2

1

これはプラグインのバリデータの問題であり、master branch/dist/date.jsで修正されています。

そのため、cdn のファイルの代わりにそのファイルを使用して修正できます

于 2016-03-15T04:49:13.750 に答える
1

@ nipuna777 が言ったように、日付ピッカーのバグのようです。

ディレクティブで修正できます。

jsfiddle のライブ例。

var myApp = angular.module('myApp', ['ui.date']);

myApp.directive('uiDateFix', function($timeout) {
  return {
    restrict: "A",
    require: 'ngModel',
    priority: 100,
    scope: {
      ngRequired: "="
    },
    link: function(scope, elem, attr, ngModel) {
      var originalValidate = null;
      $timeout(function() {
        if (!originalValidate)
          originalValidate = ngModel.$validators.uiDateValidator;
        ngModel.$validators.uiDateValidator = function uiDateValidator2(modelValue, viewValue) {
          //Define correct validations
          if (viewValue || scope.ngRequired)
            return originalValidate(modelValue, viewValue);
          else
            return true;
        }
      }, 500);
    }
  }
});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'Superhero';
  $scope.value = 'Superhero';
  $scope.dateOptions = {
    changeYear: true,
    changeMonth: true,
    yearRange: '1900:-0'
  };
  $scope.isReq = true;
  $scope.dob = ""
})
<script src="https://code.jquery.com/jquery-2.2.1.js" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-date/1.0.0/date.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">


<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <h1> Datepicker</h1>
    <form name="person">
      <label for="dateOfBirth">Date of Birth: </label>
      <input ui-date="dateOptions" name="dateOfBirth" ng-model="dob" ui-date-fix ng-required="isReq" />
       <label for="isReq">Required </label>
       <input type="checkbox" name="isReq" ng-model="isReq" />
      <p>
        dob value: {{dob}}
      </p>
      <p>
        dob valid: {{person.dateOfBirth.$valid}}
      </p>
      <p>
        dob errors: {{person.dateOfBirth.$error}}
      </p>

      <hr>

      <h2>Recreating the problem</h2>
      <ol>
        <li>With the field empty dob is valid</li>
        <li>When you select a value from datepicker again the dob field is valid</li>
        <li>When dob is manually removed, the field becomes invalid</li>
      </ol>

    </form>
  </div>
</body>

于 2016-03-15T05:11:01.290 に答える