Подтверждение ввода: сообщение проверки и кнопки ng-disabled не работают должным образом

Question

Подтверждение ввода: сообщение проверки и кнопки ng-disabled не работают должным образом

0

У меня есть следующий код, который я пытаюсь проверить с помощью функции 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 не работает для кнопки "Далее". Я все еще могу щелкнуть по нему, хотя я не выбрал никаких ответов для необходимых разделов.
Сообщение проверки только исчезает, когда я нажимаю последний элемент в наборе вопросов с запертыми кнопками.

Я что-то упустил?

Пожалуйста помоги. Спасибо.

Dee J. 29 июль 2016, в 08:09

Источник

Теги:

angularjs

angularjs-validation

1 ответ

Ещё вопросы

Dinesh Shah · Answer 1 · 2016-07-29T03-54-00.000Z

ваша проверка не будет работать так, как ожидалось, потому что u использует одно и то же имя для элементов управления ввода в ng-repeat.

вы можете использовать ng-форму внутри ng-repeat, как это.

 <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>

Спасибо, я попробовал ваше решение. Это работает, однако он помещает «Требуется ввод» в конце каждого выбора. Сообщение должно быть после того, как все элементы <li> будут повторены. Есть ли способ сделать это?