angularjs - 使用 AngularJS 进行输入和复选框验证

Question

我有一个页面，其中有一个代表“所有日期”的复选框和两个代表开始日期和结束日期的输入字段。当页面首次加载时，该复选框未被选中。要求是，如果未选中该复选框，并且开始日期和结束日期字段中没有任何内容，则必须向用户显示消息。

这是我的复选框和输入字段以及错误消息:

<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="$parent.vm.selectedReport.Parameters.StartDate == null || $parent.vm.selectedReport.Parameters.EndDate == null" />All Available Dates

<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
           ng-disabled="$parent.vm.selectAllDates"
           ng-model="$parent.vm.selectedReport.Parameters.StartDate"
           is-open="beginningDateOpened"
           ng-required="$parent.vm.selectAllDates == false"
           close-text="Close" />
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
           ng-disabled="$parent.vm.selectAllDates"
           ng-model="$parent.vm.selectedReport.Parameters.EndDate"
           is-open="endDateOpened"
           ng-required="$parent.vm.selectAllDates == false"
           close-text="Close" />

请选择

这是我一开始在 Controller 中的内容:

vm.selectAllDates = false;

这是我在提交功能中的内容:

if ($scope.reportForm.$valid) {
                //do stuff
            }
            else
            {
                $scope.reportForm.submitted = true;
            }

如果当我点击提交按钮时表单“有效”，将显示模式窗口。

发生的情况是页面加载，如果我没有输入日期或选中复选框并点击提交，则会出现消息，但我无法提交，这很好。

当我选中该复选框时，消息会保留，但我可以提交。

当我取消选中复选框并输入消息保留的日期时，我可以提交。

满足任何条件后如何隐藏消息？对不起!我还是 Angular 的新手。

Answer 1

我不确定这是否是“最佳实践”，但您可以使用表单的有效性来显示/隐藏消息(因为您已经设置了验证条件)。

你应该能够使用类似的东西

<p ng-show='reportForm.$valid'>Error Message</p>

或者，您可以手动设置表单有效性的 $watch 来执行您可能需要的任何其他逻辑

$scope.$watch('reportForm.$valid', function(isValid) {
    //change some value to show/hide the message
    //any other logic for a change in validity
});