Question

我有以下代码，我正在尝试使用AngularJS进行验证：

<div ng-form="transWizard" novalidate>
    <div style="word-wrap:break-word; padding-top:4px; padding-left:14px">
        <p style="font-family:'MetricWeb-Regular'; font-size:17.5px;"><span style="font-family:'MetricWeb-Semibold'">Question {{carousel.currentQuestionIndex+1}}:</span>&nbsp;&nbsp;{{carousel.currentQuestionObject.question}}</p>

        <ul style="padding-left:30px;">
            <li ng-repeat="query in carousel.currentQuestionObject.choices" style="padding-bottom:5px;">
                <input class="TWInputField" name="inputname" 
                           type="{{carousel.currentQuestionObject.inputType}}" id="{{query.id}}" 
                           ng-model="query.selected" ng-change="carousel.changeOnSelection(query.selected, query.id)"
                           value="" ng-value="true" ng-required="{{carousel.currentQuestionObject.inputType === 'radio' || carousel.currentQuestionObject.inputType === 'text' ? true : false}}">

                <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.question}}</label>
            </li>
        </ul>

        <p class="msg-required" ng-show="transWizard.inputname.$invalid">
                Input is required.
        </p>

    </div>

   <div class="carousel-wizard-btn-container">
        <div class="carousel-wizard-buttons" ng-click="carousel.wizardPrevious()" ng-hide="carousel.currentQuestionIndex == 0">Previous</div>
        <div class="carousel-wizard-buttons" ng-click="carousel.wizardNext()" ng-hide="carousel.currentQuestionIndex == carousel.wizardQuestionSet.length - 1" ng-disabled="transWizard.$invalid">Next</div>
        <div class="carousel-wizard-buttons" ng-click="carousel.showResults()" ng-show="carousel.currentQuestionIndex == carousel.wizardQuestionSet.length - 1" ng-disabled="transWizard.$invalid">Finish</div>
   </div>
</div>

正如您所看到的，我没有使用<form>标记，但我已经读过，由于ng-form指令，即使不使用表单也可以进行验证。

我的条件是仅在类型为radio或text时才需要输入。

然而，当我执行此操作时，我得到以下内容：

ng-disabled不适用于“下一步”按钮。即使我没有为所需部分选择任何答案，我仍然可以点击它。
当我点击一组单选按钮问题中的最后一项时，验证消息才会消失。

我在这里错过了什么吗？

请帮忙。谢谢。

Answer 1

您的验证将无法正常工作，因为您在 ng-repeat 中使用相同的输入控件名称。

你可以像这样在ng-repeat中使用ng-form。

 <div ng-form="transWizard" novalidate>

<li ng-repeat="query in carousel.currentQuestionObject.choices" style="padding-bottom:5px;">

<ng-form name="innerForm" >
<input class="TWInputField" name="inputname" type="  {{carousel.currentQuestionObject.inputType}}" id="{{query.id}}" ng-model="query.selected" ng-change="carousel.changeOnSelection(query.selected, query.id)" value="" ng-value="true" ng-required="{{carousel.currentQuestionObject.inputType === 'radio' || carousel.currentQuestionObject.inputType === 'text' ? true : false}}">

<label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.question}}</label>

<p class="msg-required" ng-show="innerForm.inputname.$invalid">
    Input is required.
</p>
</ng-form>
</li>
</div>

输入验证：验证消息和ng禁用按钮无法按预期工作

1 个答案: