ng-required не работает должным образом, если родительский 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 и будут обрабатываться угловыми. Это просто не видно пользователю.