AngularJS: Validierung von Optionsfeldern

AngularJS verfügt über eine ziemlich gute integrierte Formularvalidierung, aber aus irgendeinem Grund gibt es keine standardmäßige Unterstützung für die Validierung von Optionsfeldern. Als ich also eine Anforderung bearbeitete, bei der die Endbenutzer Multiple-Choice-Fragebögen ausfüllen mussten, musste ich mir etwas Elegantes einfallen lassen, um zu überprüfen, ob alle Fragen beantwortet wurden. Der Backend-Dienst gibt die Fragebögen in JSON wie folgt zurück: [code language="javascript"] "Fragen":[ { "id":1, "text": "Frage eins", "Antworten":[{"id":2, "text": "Antwort A"},{"id":3, "text": "Antwort B"}], "selectedAnswer":null }, { "id":4, "text": "Frage zwei", "answers":[{"id":5, "text": "Antwort X"},{"id":6, "text": "Antwort Y"}], "selectedAnswer":null } ] [/code] Zuerst legen wir die Fragen in den Bereich und fügen dann den folgenden Code in die HTML-Vorlage ein [code language="html"] <fieldset class="listing" ng-repeat="Frage in applicationKnowledge.questions"> <div class="control-group"> <label class="control-label">{{$index + 1}}. {{Frage.Text}}</label > <div class="controls"> <label class="radio" ng-repeat="antwort in frage.antworten"> <input type="radio" ng-model="question.selectedAnswer" name="answer-for-question-{{question.id}}" value="{{answer.id}}"> <span>{{Antwort.Text}}</span> </label></div> </div></fieldset> [/code] Dadurch werden die Fragen schön gerendert und die ID der ausgewählten Antwort wird für jede einzelne Frage gebunden, aber wir haben immer noch keine Validierung. Also fügen wir im Controller eine Funktion hinzu, die ausgelöst wird, wenn das Formular abgeschickt wird. [code language="javascript"] function allQuestionsAnswered = function() { for(var i = 0 ; i < $scope.questions.length ; i++) { if(! $scope.questions[i].selectedAnswer) { return false; } } return true; } $scope.onSubmit = function() { if(allQuestionsAnswered()) { delete $scope.validationFailed; // Code, um hier zum nächsten Schritt zu gelangen } else { $scope.validationFailed = true; } } [/code] Jetzt haben wir also einen Code, der prüft, ob alle unsere Optionsfelder markiert sind, aber der Endbenutzer sieht immer noch nicht, welche Fragen er beim Absenden des Formulars übersehen hat. Also fügen wir dem HTML-Code ein ng-class-Driektiv hinzu, etwa so: [code language="html"] <fieldset class="listing" ng-repeat="Frage in applicationKnowledge.questions"> <div class="control-group" ng-class="{'error': !question.selectedAnswer && validationFailed}"> <label class="control-label">{{$index + 1}}. {{Frage.Text}}</label > <div class="controls"> <label class="radio" ng-repeat="antwort in frage.antworten"> <input type="radio" ng-model="question.selectedAnswer" name="answer-for-question-{{question.id}}" value="{{answer.id}}"> <span>{{Antwort.Text}}</span> </label></div> </div></fieldset> [/code] Und schon fügt die ng-class-Direktive die CSS-Klasse error zu jeder einzelnen Frage hinzu, wenn die Formularvalidierung ausgelöst wurde und wenn diese einzelne Frage noch nicht beantwortet wurde. Dies ist vielleicht nicht ideal, da es ein wenig benutzerdefinierten Validierungs-Javascript-Code erfordert, aber ich hoffe, es hilft allen anderen, die mit AngularJs eine Validierung ihrer Optionsschaltflächen durchführen möchten.