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

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

这是我对复选框和输入字段以及错误消息的设置：

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

这是我在提交功能中的功能：

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

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

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

当我勾选该复选框时，消息将保留，但我可以提交

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

满足任何条件后，如何隐藏消息？很抱歉我仍然是Angular的新手。

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

您应该能够使用类似

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

好吧，我知道了。 对于复选框，我放了以下内容：

<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>

所有可用日期

关于开始日期，我写下：

<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>

关于结束日期，我写下：

<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>

我要传达的信息是：

<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提供的信息。我必须记住这一点

这不是问题的答案，但我刚刚发现angular可以使用HTML5输入类型，这让我的生活变得更加轻松，因为本地浏览器可以处理日期上的弹出窗口。Angularjs在不兼容HTML的浏览器上也会优雅地后退。这让我大大简化了我应用程序中datetime部分的所有代码，真是太棒了。希望有帮助！如果我使用ng show='reportForm.$valid'，则加载表单时不会显示任何消息。但如果我单击复选标记，则会显示错误消息。如果我使用ng show='reportForm.$invalid'，即使用户还没有机会与表单交互，表单也会加载一条消息。您还可以包括类似于

reportForm.$dirty

的内容，以检查表单是否确实与之交互。