Проверить Переключатель AngularJS

это кажется, что это должно быть довольно легко, но я не найдя ответа. У меня есть форма, где мне нужно проверить, что выбор был сделан из группы Радио. Я попытался использовать атрибут "required" на переключателях, но когда форма проверяется, она жалуется, если не выбраны все переключатели (что невозможно по дизайну).

что такое правильный способ, чтобы проверить радио группового отбора на AngularJS?

<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
  <input type="radio" ng-model="color" value="red" required>  Red <br/>
  <input type="radio" ng-model="color" value="green" required> Green <br/>
  <input type="radio" ng-model="color" value="blue" required> Blue <br/>
  <tt>color = {{color | json}}</tt><br/>
  <button type="submit">Submit</button>
</form>

Нажмите кнопку Отправить кнопка в Plnkr показывает поведение.

http://plnkr.co/edit/3qcIbMvJk19OvokcHe2N?p=preview

3 73
javascript forms angularjs html

3 ответа:

попробуйте использовать ng-required="!color". Это делает его так, что поле требуется только тогда, когда значение не задано. Если значение задано, то required удаляется и проходит проверку.

<input type="radio" ng-model="color" value="red" ng-required="!color">  Red <br/>
<input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/>
<input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>

вот обновленный планкер, который демонстрирует, что форма теперь проверяет правильно: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

обновление

е-облака ответ просто и не требует дополнительной директивы. Я предлагаю все используют этот метод, если это возможно. Оставляя этот ответ здесь, поскольку он обеспечивает рабочее решение и демонстрирует использование директивы ng-required.

117

Я думаю, что вам нужно добавить имя для группы Радио, для радиовхода нужно имя, чтобы определить, к какому он принадлежит, ссылка ниже работает проверка без ng-required (принятый ответ)

<input type="radio" name='group' ng-model="color" value="red" required>  Red <br/>
<input type="radio" name='group' ng-model="color" value="green" required> Green <br/>
<input type="radio" name='group' ng-model="color" value="blue" required> Blue <br/>

http://plnkr.co/edit/LdgAywfC6mu7gL9SxPpC?p=preview

85

альтернативное решение с помощью директивы. Принятый ответ не работал для меня в Firefox (v 33.0).

идея состояла в том, чтобы установить требуемый атрибут в false на всех радиостанциях с определенным именем класса, при изменении.

  • jQuery был добавлен, потому что у меня возникли проблемы с функцией атрибута jqlite remove.
  • Я скопировал как можно больше от оригинала plunker.

http://plnkr.co/edit/nbzjQqCAvwNmkbLW5bxN?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
</head>
<body ng-app="radioExample">
  <script>
    angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.myObject= {};

      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };

      $scope.submitForm = function() {
        alert('valid');
      }

    }])
    .directive('colorChoice', function() {
      return {
        restrict: 'E',
        template: '<div ng-repeat="c in colors"><input class="colorClass" type="radio" value={{c}} ng-model="myObject.color" required />{{c}}</div>',
        link: function(scope, element, attrs) {
          scope.colors = ['Red', 'Green', 'Blue'];

          element.on('change', function(){
            $(".colorClass").attr("required", false);
          });
        }
      }
    });
  </script>
  <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
    <color-choice></color-choice>
    <tt>color = {{myObject.color | json}}</tt><br/>
    <button type="submit">Submit</button>
  </form>

</body>
</html>
0