javascript - 需要 Angular Material md 复选框

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从您的 Controller 显示您的消息。您可以检查您的项目列表是否具有预期的长度(我猜您已经实现了逻辑)，如果不满足条件则显示消息。

<小时/>

编辑

所以我会在你的 Controller 中添加某种预言机，例如:$scope.sentinel = []

当您选中某个复选框时，只需将其值添加到 sentinel 值中即可:

$scope.sentinel.push(yourValue)

然后，当您单击提交按钮时，您只需检查其长度:

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

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