javascript - 防止验证 angularJS/ionic 中的隐藏字段

Question

我有这个表单，并且在满足某些要求时使用 ng-hide 隐藏了一些字段。我对所有字段都使用了验证(当一个字段留空时，它会验证并要求填写该字段)。问题是当我的字段被隐藏时，它似乎仍在验证。所以我不能继续我的表格。我该如何解决这个问题？

我对隐藏的字段使用了 ng-required，并在不需要该字段时将其设置为 false，但它似乎不起作用。

这是我所指的表单的一部分:

<div class="form-group" ng-class="{ 'has-error' :submitted && (myForm.scheduler.$pristine || myForm.scheduler.$invalid)}">
                                   <label class="labelColor"><h5><b>Payment Type *</b></h5></label>
                                   <select  type="select" class="textbox-n"  id="scheduler" ng-model="data.scheduler" ng-change="scheduleChange()"  ng-options="Scheduler.name for Scheduler in SchedulersArr" name="scheduler" required>

                                       <option id="default" value="" selected="selected">--Select--</option></select>
                                   <span class="help-inline" ng-show="submitted && (myForm.scheduler.$pristine || myForm.scheduler.$invalid)" >A Payment Type is required.</span>
                               </div>

                               <!-- Effective Date:-->
                               <div ng-hide = "hideFutureDate">
                                   <div class="form-group" ng-class="{ 'has-error' : myForm.effectiveDate.$invalid && myForm.effectiveDate.$dirty && submitted || (myForm.effectiveDate.$invalid && myForm.effectiveDate.$pristine) && submitted }">
                                       <label class="labelColor" ><h5><b>Effective Date*</b></h5></label><br>
                                       <input style="width:100%" class="item-input-wrapper" type="date"  id="effectiveDate" name="effectiveDate" ng-model="data.effectiveDate"
                                       placeholder="Effective Date" ng-required="!hideFutureDate" />
                                       &nbsp;
                                       <span class="help-inline" ng-show="submitted && myForm.startDate.$error.required"  >A Effective date is required.</span>
                                       <font color="red" >{{dateValidation}}</font>

                                   </div>
                               </div>


                               <!--From/To Dates -->
                               <div ng-hide = "hideRecurrent" >
                                   <div class="row" style="padding-left:15px">
                                       <div class="form-group" ng-class="{ 'has-error' : myForm.startDate.$invalid && myForm.startDate.$dirty && submitted || (myForm.startDate.$invalid && myForm.startDate.$pristine) && submitted }">
                                           <label class="labelColor" ><h5><b>From Date*</b></h5></label><br>
                                           <input style="width:100%" class="item-input-wrapper" type="date"  id="startDate" name="startDate" ng-model="data.startDate"
                                           placeholder="From Date" ng-required="!hideRecurrent" />
                                           &nbsp;
                                           <span class="help-inline" ng-show="submitted && myForm.startDate.$error.required"  >A Start date is required.</span>
                                           <font color="red" >{{dateValidation}}</font>

                                       </div>
                                       &nbsp;&nbsp;&nbsp;
                                       <div class="form-group" ng-class="{ 'has-error' : myForm.toDate.$invalid && myForm.toDate.$dirty && submitted || (myForm.toDate.$invalid && myForm.toDate.$pristine) && submitted }">
                                           <label class="labelColor" ><h5><b>To Date*</b></h5></label><br>
                                           <input style="width:100%" class="item-input-wrapper" type="date" id="toDate" name="toDate" ng-model="data.toDate"
                                           placeholder="To Date" ng-required="!hideRecurrent" />
                                           <span class="help-inline" ng-show="submitted && myForm.toDate.$error.required" >An End date is required.</span>
                                           <font color="red" >{{dateValidation}}</font>
                                       </div>

                                       &nbsp;
                                   </div>

JS部分

 $scope.scheduleChange = function(){


                   if($scope.data.scheduler.name == 'Future Date'){

                   $scope.hideFutureDate = false;
                   $scope.hideRecurrent = true;

                   }
                   else if($scope.data.scheduler.name == 'Recurrent'){
                   $scope.hideFutureDate = true;
                   $scope.hideRecurrent = false;
                   }

我看到我可以使用 ng-if 来解决这个问题，但不确定如何解决。

Answer 1

您确实可以使用 ng-if 来解决这个问题。假设您的后端实际上可以处理诸如 data.startDate 之类的空白输入，那么您可以:

<input ... ng-if="!hideRecurrent" />

ng-if 不是显示/隐藏输入，而是在不满足条件时将其从页面中实际删除。并且页面上没有输入意味着没有验证错误。