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实际上会在不满足条件时将其从页面中删除。页面上没有输入意味着没有验证错误。

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

1 个答案: