NG-無効角度で、私は私がやった何</p> <pre><code>1) All the inputs are null or empty 2) If the endDate field is less than the startDate itself </code></pre> <p>場合、送信ボタンを無効にしたい私の角度UIで

Question

を動作していない...

  <input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" 
ng-disabled="groupMembershipUserInputForm.$invalid || !(!!groupmembership.chapterCode || !!groupmembership.groupCode || 
!!groupmembership.groupName || !!groupmembership.createdBy || 
!!groupmembership.createdDate || !!groupmembership.startDate || 
!!groupmembership.endDate || !!groupmembership.losCode 
|| groupmembership.compareAgainstStartDate(groupmembership.endDate))" /> 

すべての文字列は空/ nullをチェック日付比較チェックを除いて正常に動作しています。

は私のコントローラでは、この方法は、

$scope.groupmembership.compareAgainstStartDate = function (item) { 
    var startDate = $filter('date')(new Date($scope.groupmembership.startDate), 'MM/dd/yyyy'); 
    var endDate = $filter('date')(new Date($scope.groupmembership.endDate), 'MM/dd/yyyy'); 

    if (endDate < startDate) { 
     $scope.groupmembership.toggleInvalidInput = true; 
    } 
    else 
     $scope.groupmembership.toggleInvalidInput = false; 

    return $scope.groupmembership.toggleInvalidInput; 
}; 

のように見えるそれがヒットしているが、無効化は起きていない理由は、日付が失敗した比較すれば、私は知りません。

私を助けてください。

Answer 1

だから、最初：1場合はそうgroupMembershipUserInputForm.$invalidがtrueになりますない場合

すべての入力は、このために

nullまたは空になっているだけで、すべてのinput/select/... にrequiredを追加します必要な項目のうちのいずれかが入力されていません。

これは非常にあなたng-disabled次のように簡素化されます：

ng-disabled="groupMembershipUserInputForm.$invalid || 
    groupmembership.compareAgainstStartDate(groupmembership.endDate)" 

これは、最初の有効な作業工程です。あなたがこれを必要とする以外の形態を持っている場合、これは便利になります

<input ng-model="afterDate" date-greater-than="beforeDate"/> 

：あなたがさらに移動したい場合は今、あなたはディレクティブを作成して、のようなものを持つことができます。あなたがこれを行うに興味があるなら、私はあなたに "角度jsカスタム検証フォーム指令"のようなものを提案し、もしあなたがその指示に問題があるなら、あなた自身で試した後、別の質問に戻ってください。

最終的にカスタム検証フォームをマスターする場合はangular-messageを使用できます。フォームからエラーを表示するように特別に設計された小さなアドオンです。ここで

はhttps://scotch.io/tutorials/angularjs-form-validation-with-ngmessagesからのサンプルコードです：

<form name="myForm"> 
    <input 
    type="text" 
    name="username" 
    ng-model="user.username" 
    ng-minlength="3" 
    ng-maxlength="8" 
    required> 

    <div ng-messages="userForm.name.$error"> 
     <p ng-message="minlength">Your name is too short.</p> 
     <p ng-message="maxlength">Your name is too long.</p> 
     <p ng-message="required">Your name is required.</p> 
     <p ng-message="myCustomErrorField">Your name is <your custom reason></p> 
    </div> 
    <input type="submit" ng-disabled="myForm.$invalid"/> 

</form> 

Answer 2

あなたのロジックはかなり正しいですが、私はあなたの$scope.groupmembership.startDateと$scope.groupmembership.endDateに疑問を抱いています。なぜなら、正しい日付を提供すれば、それは期待どおりに働いているからです。あなたの機能が適切に動作しているかどうかを確認するために、一定の日付を入力してみてください。私にとっては実際の日付の値でうまくいきます。

$scope.startDate = $filter('date')(new Date("07/02/2016"), 'MM/dd/yyyy'); 
$scope.endDate = $filter('date')(new Date("0710/2016"), 'MM/dd/yyyy'); 

Answer 3

あなたの例では、あなたが正しい結果を取得できない場合がありますので、日付が文字列型です。日付を比較するには、時間に変換してください。正確な結果が得られるgetTime()を使用してください。日付チェックのためにフィルターを使用する必要はありません。

同じように使用します。ただ、ミリ秒にSTARTDATEと終了日を変換し、それらを比較

$scope.groupmembership.compareAgainstStartDate = function() { 
    var startDate = new Date($scope.groupmembership.startDate); 
    var endDate = new Date($scope.groupmembership.endDate); 

    if (endDate.getTime() < startDate.getTime()) { 
     $scope.groupmembership.toggleInvalidInput = true; 
    } 
    else 
     $scope.groupmembership.toggleInvalidInput = false; 

    return $scope.groupmembership.toggleInvalidInput; 
}; 

Answer 4

。

$scope.groupmembership.compareAgainstStartDate = function() { 
    var startDate = new Date($scope.groupmembership.startDate).getTime(); 
    var endDate = new Date($scope.groupmembership.endDate).getTime(); 

    if (endDate < startDate) { 
     $scope.groupmembership.toggleInvalidInput = true; 
    } else { 
     $scope.groupmembership.toggleInvalidInput = false; 
    } 

    return $scope.groupmembership.toggleInvalidInput; 
};