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>

Does it work if you use `ng-submit` on your `
` and you can either `return true` or `return false` if `$parent.selectedAnswer` has a value? — Cybrix, May 27 '13 at 16:20

Dan · Accepted Answer · 2013-05-27T22:32:35.450

13

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

edited May 27 '13 at 22:32

answered May 27 '13 at 16:55

Dan

59,490
13
101
110

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 May 27 '13 at 17:00
Sorry, I should give you more info. I'm going to edit my question to add more info. – Riz May 27 '13 at 17:04
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. – Dan May 27 '13 at 17:10
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: http://plnkr.co/edit/5lEeW4Db5XPWruNO6MMQ – Riz May 27 '13 at 17:23
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 May 27 '13 at 17:24
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? – Riz May 27 '13 at 19:16
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. – rGil May 27 '13 at 19:31
Let's [move this to chat](http://chat.stackoverflow.com/rooms/30707/16776919) if you'd like. – Dan May 27 '13 at 19:39
http://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. – SpoBo Dec 06 '13 at 14:49

score 3 · Answer 2 · answered Jun 23 '14 at 13:38

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>

How to make selecting a radio button required before submitting

2 Answers2