2013-05-27 2 views
9

У меня есть ряд вопросов, на которых есть выбор ответа на радио. Я не могу понять, как использовать угловую проверку, чтобы потребовать от пользователя выбрать один, прежде чем нажимать дальше. Ниже приведен мой код:Как сделать выбор радиокнопки, необходимой перед отправкой

EDIT: Обратите внимание, что нажмите «Далее», появится следующий вопрос «Узел с контроллера» в зависимости от того, какой выбор был сделан. Это в основном динамическая анкета.

<form novalidate> 

      <div class="radio" ng-repeat="answer in node.Answers"> 
       <input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer" 
         value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}} 
      </div> 
      <div> 
       <input type="button" ng-click="previous()" value="Previous"/> 
       <input type="button" ng-click="next(selectedAnswer)" value="Next"/> 
      </div> 

    </form> 
+0

ли работа, если вы используете 'нг-submit' на ваш' '

и вы можете либо' возвращение true' или 'вернуть false' если' $ parent.selectedAnswer' имеет значение? – Cybrix

ответ

12

EDIT:Here is a working fiddle

Сначала дайте форме имя, так что вы можете обратиться к нему:

<form name="myForm" novalidate> 

Следующая добавить атрибут required к кнопке радио:

<input type="radio" name="answerGroup" required 
    ng-model="$parent.selectedAnswer" 
    value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> 

Затем используйтесвязать disabled свойства вашей next кнопки на действительность радио-кнопке:

<input type="button" ng-click="next(selectedAnswer)" value="Next" 
    ng-disabled="myform.answerGroup.$invalid" /> 
+0

спасибо, но две проблемы: 1. Дважды нажмите на переключатель, чтобы включить кнопку «Далее». 2. У меня есть ряд вопросов, поэтому после включения «Далее» он остается включенным для последующих вопросов. Как отключить его на каждом шагу? – Riz

+0

Извините, я должен дать вам больше информации. Я собираюсь изменить свой вопрос, чтобы добавить дополнительную информацию. – Riz

+0

1. Это звучит как проблема. Я подозреваю неожиданное поведение от '$ parent.selectedAnswer', если вам нужно дважды щелкнуть. 2. При успешном нажатии кнопки «next» вам необходимо отключить переключатель. Возможно, добавьте скрипку/плункер, если это возможно. – sh0ber

2

Посмотри ниже, используя нг-шоу, чтобы отобразить сообщение об ошибке не должна ни радио кнопка будет нажата.

      <label for="dateofbirth"> 
          <span>Are you the primary cardholder?</span> 
          </label> 
          <ul> 
           <li> 
           <label for="yes"> 
            <input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/> 
            Yes 
           </label> 
           </li> 
           <li> 
           <label for="no"> 
            <input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/> 
            No 
           </label> 
           </li> 
          </ul> 
         </fieldset> 
         <span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span> 
Смежные вопросы