Question

在My 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

首先：

所有输入都为空或空

为此，只需为required input/select/...添加groupMembershipUserInputForm.$invalid 如果您这样做，ng-disabled如果未填写其中一个必填字段，则为真。

这将大大简化ng-disabled="groupMembershipUserInputForm.$invalid || groupmembership.compareAgainstStartDate(groupmembership.endDate)"以下内容：

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

这是第一个有效的工作步骤。现在，如果你想要更进一步，你可以创建一个指令，并有类似的东西：

angular-message

如果您有其他形式而不是需要，这将非常有用。如果您有兴趣这样做，我建议您使用类似＆＃34; angular js自定义验证表单指令＆＃34;如果你在使用该指令时遇到问题，在自己尝试之后，请回到我们的另一个问题。

FInally如果您掌握自定义验证表单，则可以使用<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>。它是一个专门用于显示表单错误的小插件。

以下是https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages的示例代码：

server.js

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

Angular中的ng-disabled无法正常工作

4 个答案: