Überprüfen Sie das Optionsfeld AngularJS

78

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

javascript html forms angularjs Spencer
quelle

Antworten:

125

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.

Gedanken
quelle
2
ng-requiredanstatt es einfach zu requiredtun. Vielen Dank.
Spencer
Brillant! Vielen Dank.
Rod Hartzell
Diese Lösung funktioniert nicht einmal in der bereitgestellten plnkr-Demo.
Ahmed Hasn.
@ ConquerorsHaki Es scheint immer noch für mich zu funktionieren. Sie können das Formular senden, wenn ein Wert ausgewählt ist. Was siehst du?
Gedanken
1
entschuldige mich @dmullings ich muss die plnkrs verwirrt haben. Es funktioniert in der Tat wie ein Zauber!
Ahmed Hasn.
97

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

E-Cloud
quelle
Funktioniert einwandfrei und der Name der Gruppe ist für die korrekte Funktion des
Optionsfelds
@ CilliéMalan, ich denke, es funktioniert immer so. Zumindest ab 1.2.
E-Cloud
2
Es ist wichtig zu beachten, dass eine Optionsfeldgruppe unabhängig von einer ausgewählten Option als gültig angesehen wird, es sei denn, mindestens eines der Optionsfelder in einer Gruppe verfügt über das ng-modelAttribut.
Robert Hickman
1
Eine andere zu beachtende Sache ist, dass dies nicht das Problem behebt, bei dem man an die $touchedoder $dirty-Eigenschaft von binden möchte ng-model, aber es gibt eine Problemumgehung (zumindest für $dirty), bei ng-formder verschachtelt und verwiesen werden kann. Siehe ähnliche Frage hier - stackoverflow.com/questions/22181462/…
jamiebarrow
0

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>
jroot
quelle
Wenn Sie eine neue Frage haben, fragen Sie es bitte durch Klicken Frage stellen Taste. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies zur Bereitstellung des Kontexts beiträgt.
Taryn East
2
Entschuldigung, dies sollte eine alternative Lösung sein, die in Firefox (Version 33.0) funktioniert. Die aktuell akzeptierte Antwort hat bei mir nicht funktioniert.
Jroot
cool, das ist also eine Lösung, die funktioniert? Wenn ja, großartig. Möglicherweise macht nur die Sprache in Ihrer Antwort das nicht besonders offensichtlich :)
Taryn East
0

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

NotABot
quelle