Question

我有一系列有无线电答案选择的问题。我无法弄清楚如何使用角度验证来要求用户在单击下一步之前选择一个。以下是我的代码：

编辑：请注意，单击“下一步”将从控制器获取下一个问题节点，具体取决于所做的选择。这基本上是一份动态问卷。

    <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

编辑： 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}}"/>

然后使用ng-disabled将next按钮的disabled属性绑定到单选按钮的有效性：

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

Answer 2

如果没有点击单选按钮，请使用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>

如何在提交前选择所需的单选按钮

2 个答案: