Überprüfen Sie das Optionsfeld AngularJS

Question 1

Dies scheint ziemlich einfach zu sein, aber ich finde keine Antwort. Ich habe ein Formular, in dem ich bestätigen muss, dass eine Auswahl aus einer Funkgruppe getroffen wurde. Ich habe versucht, das Attribut 'erforderlich' für die Optionsfelder zu verwenden, aber wenn das Formular validiert wird, wird es beschwert, es sei denn, alle Optionsfelder sind ausgewählt (was aufgrund des Designs unmöglich ist).

Was ist der richtige Weg, um eine Funkgruppenauswahl in AngularJS zu validieren?

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

Wenn Sie im Plnkr auf die Schaltfläche "Senden" klicken, wird das Verhalten angezeigt.

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

Question 2

Versuchen Sie es mit ng-required="!color". Dadurch wird das Feld nur benötigt, wenn der Wert nicht festgelegt ist. Wenn ein Wert festgelegt ist, wird der erforderliche Wert entfernt und die Validierung bestanden.

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

Hier ist ein aktualisierter Plunker, der zeigt, dass das Formular jetzt korrekt validiert wird: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

Aktualisieren

Die Antwort von e-cloud ist einfach und erfordert keine zusätzliche Anweisung. Ich schlage vor, dass jeder diese Methode verwendet, wenn möglich. Lassen Sie diese Antwort hier, da sie eine funktionierende Lösung darstellt und die Verwendung der ng-erforderlichen Richtlinie demonstriert.

Question 3

Ich denke, Sie müssen einen Namen für die Funkgruppe hinzufügen. Für einen Funkeingang muss ein Name angegeben werden, zu dem er gehört. Der folgende Link funktioniert ohne ng-erforderlich (die akzeptierte Antwort).

<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

Alternative Lösung unter Verwendung einer Richtlinie. Die akzeptierte Antwort hat in Firefox (Version 33.0) bei mir nicht funktioniert.

Die Idee war, das erforderliche Attribut bei Änderungen auf allen Funkgeräten mit einem bestimmten Klassennamen auf false zu setzen.

jQuery wurde hinzugefügt, weil ich Probleme mit der Funktion zum Entfernen von jqlite-Attributen hatte.
Ich habe so viel wie möglich vom Originalplunker kopiert.

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

In meinem Fall habe ich die AngularJS-Materialbibliothek verwendet und das Hinzufügen eines requiredAttributs zum <md-radio=group>Tag hat den Trick getan.