ng-required不能按预期工作，如果parent div有条件隐藏

Question

在我的代码中，我使用ng-show和ng-required的组合。但是，ng-required即使在各自的$scope变量值设置为false时也无法按预期方式工作。请在下面找到

<div role="form" name="selectQuestionsForm" id="selectQuestionsForm" ng-form> 
    <div class="form-group col-sm-12"> 
     <label class="control-label question-answer-label" 
        for="firstQuestionSelect">First question</label> 

     <div> 
      <select class="form-control nopadding"> 
       <option value="">-- Select --</option> 
      </select> 
     </div> 
     <div ng-show="showCustomQuestion.first" > 
      <input type="text" class="form-control" ng-model="questionsText.first" ng-required="showCustomQuestion.first" 
      id="firstQuestionInput" name="firstQuestionInput" validation-min-length="3" validation-max-length="100" /> 
     </div> 
     <label class="control-label question-answer-label" 
        for="firstAnswerInput">First answer</label> 
     <div style="padding-bottom: 15px;"> 
      <input type="text" class="form-control" ng-model="answersText.first" 
      id="firstAnswerInput" validation-min-length="3" validation-field-required="true" validation-max-length="100" required/> 
     </div> 
    </div> 
</div> 
<div id="securityActionBtnContainer" class="visible-md visible-sm visible-lg"> 
    <button id="saveBtn" type="button" ng-disabled="selectQuestionsForm.$invalid" class="btn btn-default btn-xs pull-right" ng-click="saveQuestion(selectQuestionsForm.$valid)">Save</button> 
    <button id="cancelBtn" type="button" class="btn btn-xs btn-default pull-right" style="margin-right: 10px;" ng-click="redirect['cancel']()">Cancel</button> 
</div> 

代码中的select元素必须显示选项逻辑，它工作正常。当我们选择'写我自己的问题'选项时，显示隐藏的input。如果用户选择任何其他问题，自定义问题input被隐藏，而不是表单元素的一部分。但ng-required仍然得到应用，虽然值设置为false并且各自的form未验证。

请让我知道我失踪，使其工作。在此先感谢您的帮助。

Answer 1

使用ng-if而不是ng-show。使用ngShow或ngHide隐藏的项目仍然存在于DOM中，并将按角度进行处理。这对用户来说是不可见的。