Группа радиокнопок 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-модель, чтобы сохранить выбранное значение, например, $ scope.selected (требуется, чтобы ng-модель работала).Также необходима функция для настройки модели при каждом нажатии.Проверка может быть выполнена следующим образом:

 <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

Answer 2

Вам нужна ng-модель, чтобы установить достоверность ввода (-ов) формы. И использовать

обязательны для заполнения

как это по-английски:

нг-требуется = "истина"

Примерно так:

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