javascript - Angularjs单选按钮组，表单有效，无需任何选择

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