Перевірити перемикач AngularJS

Question 1

Здається, це повинно бути досить легко, але я не знаходжу відповіді. У мене є форма, де мені потрібно підтвердити, що вибір зроблено з радіогрупи. Я спробував використовувати атрибут '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

Question 2

Спробуйте використовувати ng-required="!color". Це робить так, що поле обов’язкове лише тоді, коли значення не встановлено. Якщо встановлено значення, тоді необхідне видаляється, і воно пройде перевірку.

<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

Оновлення

E-Клауд відповідь проста і не вимагає додаткової директиви. Я пропоную всім користуватися цим методом, якщо це можливо. Залишаючи цю відповідь тут, оскільки вона надає робоче рішення та демонструє використання директиви ng-required.

Question 3

Я думаю, що вам потрібно додати ім'я для радіогрупи, для радіовходу потрібно вказати ім'я, щоб визначити, якому він належить, посилання нижче працює для перевірки без необхідності ng (прийнята відповідь)

<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

Question 4

Альтернативне рішення з використанням директиви. Прийнята відповідь не працювала для мене у Firefox (v 33.0).

Ідея полягала в тому, щоб на всіх радіоприймачах із певною назвою класу при необхідності встановити для атрибута false значення.

jQuery було додано, оскільки у мене були проблеми з функцією атрибута jqlite remove.
Я скопіював якомога більше з оригінального плюнкера.

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>

Question 5

У моєму випадку я використовував бібліотеку матеріалів angularJS, і додавання requiredатрибута до <md-radio=group>тегу зробило трюк.