How to make selecting a radio button required before submitting

Question

I have a series of questions which have radio answer choices. I can't figure out how to use AngularJS validation to require the user to select one before clicking "Next". Below is my code:

EDIT: Please note that clicking "Next" gets the next question node from the controller depending on what choice was made. It's basically a dynamic questionnaire.

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

Solution 1

EDIT: Here is a working fiddle

First give the form a name so that you can refer to it:

<form name="myForm" novalidate>

Next add the required attribute to the radio button:

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

Then use ng-disabled to bind your next button's disabled property to the validity of the radio button:

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

Solution 2

Look below, using ng-show to display an error message should neither radio button be clicked.

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

Comments

[Riz]

thanks, but two problems: 1. I have to click on radio button twice to enable Next button. 2. I have a series of questions, so once Next is enabled, then it stays enabled for subsequent questions. How do I disable it every step?

[Riz]

Sorry, I should give you more info. I'm going to edit my question to add more info.

[Dan]

1. This sounds like a scoping issue. I suspect unexpected behavior from $parent.selectedAnswer if you have to click twice. 2. You'll need to invalidate the radio button when next is successfully clicked. Maybe add a fiddle/plunker if possible.

[Riz]

yeah the only thing is that I'm making an ajax request in the load function to get the nodes. Nevertheless, I've created it here but it obviously won't work because of the ajax request: plnkr.co/edit/5lEeW4Db5XPWruNO6MMQ

[Riz]

I'm not sure how to get around the $parent.selectedAnswer. I've gotten advice on not to use it, but then I don't know how to make it work without it.

[Riz]

sorry I don't understand. It seems to be working for me except for making the selection required. If I remove the value attribute, how am I supposed to figure out what the user selected?

[rGil]

Maybe you could predefine the radio model as $scope.selectedAnswer=undefined, then in the click handler: if ($scope.selectedAnswer === undefined){//send message saying pick an answer. In this case, I don't think ng-require will give you the result you need.

[Dan]

Let's move this to chat if you'd like.

[SpoBo]

jsfiddle.net/UYTLh/8 this doesn't work though. If you use ng-disabled="!myForm.$valid" it wont register the validity correctly on the first radio button selection. Seems like a bug in angular. I need it to work like this because my form isn't this simple to validate.