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>

Platter

Does it work if you use ng-submit on your <form> and you can either return true or return false if $parent.selectedAnswer has a value? – Tucket

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

Monorail

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? – Platter

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

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. – Monorail

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

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. – Platter

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? – Platter

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. – Diehl

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

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. – Clint

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

Basion