在Angular中禁用ng不能正常工作

Question

在我的Angular UI中，如果要禁用提交按鈕

1) All the inputs are null or empty
2) If the endDate field is less than the startDate itself

我所做的是...

           <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) )" />

除日期比較檢查外，所有字符串空/空檢查都可以正常工作。

在我的控制器中，方法看起來像

$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

您的邏輯非常正確，我對您的$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 2

所以首先：

所有輸入為空或為空

為此，只需在所有input/select/...添加一個required input/select/...如果這樣做，則如果未填寫必填字段之一，則groupMembershipUserInputForm.$invalid將為true。

這將大大簡化您的ng-disabled以下操作：

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

這是第一個有效的工作步驟。 現在，如果您想走得更遠，可以創建一個指令並添加以下內容：

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

如果您有其他不需要的表格，這將很有用。 如果您有興趣執行此操作，建議您使用谷歌搜索“ angular 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 3

在您的示例中，日期是字符串類型，因此您可能無法獲得正確的結果。 要比較日期，請先使用getTime()將日期轉換為時間 ，這將為您提供准確的結果。 無需使用過濾器進行日期檢查。

就像這樣使用：

$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

只需將startdate和enddate轉換為毫秒 ，然后進行比較即可。

嘗試以下代碼一次：

$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;
};