使用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" />

以下是我在控制器开头的内容：

vm.selectAllDates = false;

这是我在提交函数中的代码：

这是我在提交函数中的代码：

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

如果我点击提交按钮时表单是“有效的”，则会显示模态窗口。

现在发生的情况是页面加载，如果我没有输入日期或选中复选框然后提交，消息会出现，我不能提交，这很好。

当我选中复选框时，消息仍然存在，但我可以提交。

当我取消选中复选框并输入日期时，消息仍然存在，但我可以提交。

当任何条件满足时，如何隐藏消息？抱歉！我还是 Angular 的新手。

- rsford31

---

我刚刚发现Angular可以使用HTML5输入类型["time"]（https://docs.angularjs.org/api/ng/input/input％5Btime％5D）和["date"]（https://docs.angularjs.org/api/ng/input/input％5Bdate％5D），这让我的生活变得轻松了许多，因为本地浏览器处理日期弹出窗口。 AngularJS还会在非HTML兼容的浏览器上优雅地回退。这使我能够大大简化应用程序中与日期时间部分相关的所有代码，真是太好了。希望这有所帮助！ - DrCord

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

- ryanyuyu

---

如果我使用ng-show='reportForm.$valid'，表单将加载而没有任何消息。但是，如果我点击复选框，则会显示错误消息。如果我使用ng-show='reportForm.$invalid'，即使用户还没有机会与表单交互，表单也会加载一个消息。 - rsford31

你还可以添加类似 reportForm.$dirty 的内容来检查表单是否被实际操作过。 - ryanyuyu

Answer 2

好的，我搞清楚了。 对于复选框，我放置了这个：

<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="vm.selectedReport.Parameters.StartDate == null && 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" />

至于消息，我放了这个：

<div ng-show="reportForm.submitted || reportForm.dateSelectAll.$touched || reportForm.beginningDate.$touched
         || reportFrom.endDate.$touched">
        <span class="error" ng-show="reportForm.dateSelectAll.$error.required || reportForm.beginningDate.$error.required || reportFrom.endDate.$error.required">Please select a Dissolved date</span>
    </div>

我在控制器中保留了与我在原始帖子中放置的代码相同的代码。

感谢@ryanyuyu的快速回答。还要感谢@DrCord提供的信息。我得记住这个！

- rsford31