1

AngularJS を使用して、date2 < date1 および date3 > date2 かどうかを検証するにはどうすればよいですか。

<form name='myForm'>
       date1: <input type='text' name='date1' ng-model='obj.date1' required pattern='datePattern'/>
              <div ng-show='obj.date2 > obj.date1'>date1 has to be greater than date2</div>
       date2: <input type='text' name='date2' ng-model='obj.date2' required pattern='datePattern'/>
       date3: <input type='text' name='date3' ng-model='obj.date3' required pattern='datePattern'/>

       <input type='button' ng-click='saveData(obj)'/>
</form>

ユースケース (ユーザーが入力):

  • date2 = 2013 年 1 月 15 日
  • date1 = 1/14/2013 (エラーが表示されます: date1 は date2 より大きくなければなりません)
  • date3 = 2013 年 1 月 16 日
  • user change date1 = 1/20/2013 (date1=1/20/2013 は date2=1/15/2013 より大きいため、エラーはなくなり、date1 は現在有効です)
  • user change date2 = 1/30/2013 ---ここから date1 の検証をトリガーして、メッセージ「date1 は date2 より大きくなければなりません」と表示され、date1 を無効にするにはどうすればよいですか?
4

2 に答える 2

1

スコープで比較を行う関数を定義します。このようなもの：

date1: <input type='text' name='date1' ng-model='obj.date1' 
required pattern='datePattern'/>
<div ng-show="compareDates(obj.date1, obj.date2)">
    date1 has to be greater than date2
</div>
date2: <input type='text' name='date2' ng-model='obj.date2' 
required pattern='datePattern'/>

JS:

function myController($scope){ 
    $scope.compareDates = function(d1,d2){          
        /* convert to date object assuming the input d1 = 2013-08-15 */         
        /* or some other valid format */
        d1 = new Date(d1);
        d2 = new Date(d2);          
        return d1 < d2;
    }
}

コントローラーのスコープ内に直接日付がある場合は、日付を関数に渡す必要はありません。次のように簡単に実行できます。

<div ng-show="compareDates()">date1 has to be greater than date2</div>

JS:

function myController($scope){ 
    $scope.obj = {};

    $scope.compareDates = function(){
        /* convert to date objects assuming valid inputs */         
        return new Date($scope.obj.date1) < new Date($scope.obj.date2);
    }
}
于 2013-08-16T08:29:54.853 に答える