Применение `$ invalid` только для видимых элементов управления

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>