Как сделать выбор радиокнопки, необходимой перед отправкой

Question

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

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> 

Answer 1

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

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