Question

我的页面上有一个复选框，表示＆＃34;所有日期＆＃34;和两个输入字段，表示开始日期和结束日期。首次加载页面时，将取消选中复选框。要求是取消选中复选框，并且在开始日期和结束日期字段中没有任何内容，必须向用户显示消息。

这是我对复选框和输入字段以及错误消息的所有内容：

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

如果表格是＆＃34;有效＆＃34;当我点击提交按钮时，将显示一个模态窗口。

正在发生的是页面加载，如果我没有输入日期或选中复选框并且我点击提交，则会显示消息，但我无法提交，这是正常的。< / p>

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

当我取消选中复选框并输入日期时，邮件会保留，但我可以提交。

如果满足任何条件，我该如何隐藏消息？抱歉!我还是Angular的新手。

Answer 1

我不确定这是＆＃34;最佳做法＆＃34;，但您可以使用表单的有效性来显示/隐藏消息（因为您已经设置了验证）条件）。

您应该可以使用类似

的内容

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

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

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

2 个答案: