Question

在angularJS应用程序上，我有一个带有一组单选按钮的<form>，我想强迫用户在验证表单之前选择一个选项。

这是我的HTML代码的简化版本：

  <form name="myForm">
    <label ng-repeat="option in options">
      {{option.name}}
      <input type="radio" name="animalOptions" value="option.id" required>
    </label>
    <button type="submit" ng-disabled="!myForm.$valid">
      SUBMIT
    </button>
    <h1>
    {{myForm.$valid}}
    </h1>
  </form>

我在此示例中重现了我的问题：

JSfiddle

为什么打印 true 而不是 false ？

Answer 1

您需要设置ng-model来保持所选值，例如$ scope.selected（需要使用ng-model才能工作）。此外，还需要一个函数来在每次单击时设置模型。验证可以这样完成：

 <label ng-repeat="option in options">
    {{option.name}}
    <input type="radio" name="animalOptions" value="option.id" ng-model="selected" ng-click="toggle(option.id)" ng-required="!selected">
  </label>

ng-required =“！selected”确保用户选择了一个选项检查以下示例：fiddle example

Answer 2

您需要ng-model来设置表单输入的有效性。并使用

必填

以Angular的方式这样：

ng-required =“ true”

类似这样的东西：

<form name="testForm" ng-submit="yourSubmitFunction();" novalidate>
    <input type="radio" name="radio" ng-model="rr" value="optionA" ng-required="true"/> optionA
    <input type="radio" name="radio" ng-model="rr" value="optionB" /> optionB
    <button type="submit" >Submit</button>
</form>

Angularjs单选按钮组，窗体有效，无需任何选择

2 个答案: