仅对可见控件应用`$ visible‘

Question

我有一个简单的表单，它根据属性data-ng-hide="objective.editMode"显示控件：

<form class="form-horizontal" role="form" name="adduserform">                        
    <div class="form-group">                           
       <label for="title6" class="col-sm-5 control-label">Progress</label>
       <div class="col-sm-6">

          <input data-ng-hide="objective.editMode" type="number" min="0" max="100" 
               data-ng-model="newTask.Progress" class="form-control" required  />
          <input data-ng-show="objective.editMode" type="number" min="0" max="100" 
               data-ng-model="objective.Progress" class="form-control" required  />

       </div>
    </div>    

    <div class="form-group">
       <div class="col-sm-offset-2 col-sm-10">
          <span data-ng-hide="editMode">
             <input data-ng-hide="objective.editMode" type="submit" value="Add" 
                    ng-disabled="adduserform.$invalid" data-ng-click="add()"/>
             <input data-ng-show="objective.editMode" type="submit" value="Save" 
                    ng-disabled="adduserform.$invalid" data-ng-click="Save()" />    
          </span>                 
       </div>
    </div>
</form>

我的问题是，adduserform.$invalid 可以检查窗体上显示的控件吗？，因为adduserform.$invalid要求填充所有控件，但并不是所有控件都显示在窗体上，因为控件的外观取决于objective.editMode。

Answer 1

您可以使用ng-if而不是ng-hide

<input data-ng-if="!objective.editMode" type="number" min="0" max="100" 
           data-ng-model="newTask.Progress" class="form-control" required  />

Answer 2

隐藏在data-ng-hide / data-ng-show中的元素仍然在DOM树上，因此被验证。相反，使用data-ng-if，它将从DOM中删除元素：

<form class="form-horizontal" role="form" name="adduserform">                        
<div class="form-group">                           
   <label for="title6" class="col-sm-5 control-label">Progress</label>
   <div class="col-sm-6">

      <input data-ng-if="!objective.editMode" type="number" min="0" max="100" 
           data-ng-model="newTask.Progress" class="form-control" required  />
      <input data-ng-if="objective.editMode" type="number" min="0" max="100" 
           data-ng-model="objective.Progress" class="form-control" required  />

   </div>
</div>    

<div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
      <span data-ng-if="!editMode">
         <input data-ng-if="!objective.editMode" type="submit" value="Add" 
                ng-disabled="adduserform.$invalid" data-ng-click="add()"/>
         <input data-ng-if="objective.editMode" type="submit" value="Save" 
                ng-disabled="adduserform.$invalid" data-ng-click="Save()" />    
      </span>                 
   </div>
</div>

​