Question

我有一组复选框，这些复选框是一周中的几天。如果用户单击“提交”按钮并且未选中任何复选框，则我希望显示错误消息。以下是我正在使用的HTML代码。

<form id="addEditForm" name="addEditForm" ng-submit="addEditForm.$valid && saveBooking()" novalidate>
    <div ng-repeat="item in days">
        <md-checkbox ng-required="daysSelected.length == 0" ng-checked="dayExists(item, daysSelected)" ng-click="toggleWeekdays(item, daysSelected)" name="daysOfWeek">{{ item }}</md-checkbox>
    </div>

    <div flex ng-messages="addEditForm.daysOfWeek.$error" ng-if="addEditForm.$submitted">
        <div ng-message="required">Please select a day.</div>
    </div>

    <md-button aria-label="Save Booking" class="md-primary-short" type="submit" >Save</md-button>
</form>

Answer 1

嗯，您的示例中没有submit，但我认为您的HTTP代码中有一个位于下方。

我建议您使用the Dialog directive从您的控制器显示您的消息。您可以检查您的项目列表是否具有预期长度（我猜测已经实现的逻辑），并在不满足条件的情况下显示该消息。

修改

所以我会在你的控制器中添加一些oracle，比如： $scope.sentinel = []

勾选方框时，只需将其值添加到sentinel值：

$scope.sentinel.push(yourValue)

然后，当您单击submit按钮时，只需检查其长度：

if ($scope.sentinel.length == 0) { $scope.displayError = true; }

这是我想到的最简单的方法。不要忘记将$scope.displayError变量初始化为false，并在满足条件时将其重新设置为true。

需要Angular Material md-checkbox

1 个答案: