Html 如何在提交前选择需要的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16776919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make selecting a radio button required before submitting
提问by Riz
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:
我有一系列问题，其中有无线电答案选项。我不知道如何使用 AngularJS 验证来要求用户在单击“下一步”之前选择一个。下面是我的代码：
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>
回答by Dan
编辑：这是一个工作小提琴
First give the form a name so that you can refer to it:
首先为表单命名，以便您可以引用它：
<form name="myForm" novalidate>
Next add the requiredattribute to the radio button:
接下来将required属性添加到单选按钮：
<input type="radio" name="answerGroup" required
ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>
Then use ng-disabledto bind your nextbutton's disabledproperty to the validity of the radio button:
然后使用ng-disabled将next按钮的disabled属性绑定到单选按钮的有效性：
<input type="button" ng-click="next(selectedAnswer)" value="Next"
ng-disabled="myform.answerGroup.$invalid" />
回答by arush436
Look below, using ng-show to display an error message should neither radio button be clicked.
看下面，使用 ng-show 显示错误消息，不应单击两个单选按钮。
<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>
