如果父 div 有条件地隐藏，则 ng-required 无法按预期工作

Question

在我的代码中，我结合使用了 ng-show 和 ng-required。但是，即使相应的 $scope 变量值设置为 false，ng-required 也没有按预期工作。请在下面找到代码

<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 元素具有显示选项的逻辑并且工作正常。当我们select选项'Write my own question'时，显示隐藏的input。如果用户选择任何其他问题，自定义问题 input 将被隐藏，而不是表单元素的一部分。但是 ng-required 仍在应用，尽管该值设置为 false 并且相应的 form 未验证。

请让我知道我缺少什么才能让它发挥作用。预先感谢您的帮助。

Answer 1

使用 ng-if 而不是 ng-show。使用 ngShow 和 ngHide 隐藏的项目仍然存在于 DOM 中，并将由 angular 处理。它只是对用户不可见。

如果父 div 有条件地隐藏，则 ng-required 无法按预期工作

ng-required not working as expected if parent div is hidden conditionally

requiredfieldvalidator

angularjs

ng-show

angularjs-validation

angularjs-forms