javascript - Angular 中的 ng-disabled 不起作用

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

除了日期比较检查之外，所有字符串空/空检查都工作正常。

在我的 Controller 中，该方法看起来像

$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

所以首先:

All the inputs are null or empty

为此，只需将 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>