Angular - nicht validieren Form von Radio-Tasten

Question

Ich habe eine form mit nur radio Tasten, muss die form vor der Einreichung überprüft werden (Benutzer muss etwas auswählen). Nachdem der Benutzer eine Optionsschaltfläche ausgewählt hat, sollte ein Styling unter Verwendung von ngclass gelten. Ich habe zwei Probleme:
1. Aus irgendeinem Grund ist die letzte Option standardmäßig ausgewählt.
2. Ich bin nicht in der Lage, Formularvalidierungsattribute zu erhalten. Die Daten werden nicht aktualisiert, wenn ich Sachen darauf auswähle.

plunkr

JS:

app.controller('MainCtrl', function($scope) { 

    $scope.questionObject = [{ 
    "body": "abc" 
    }, { 
    "body": "def" 
    }, { 
    "body": "aghi" 
    } ] 
    $scope.selectAnswer=function(number,obj) 
    { 
    $scope.isChecked=number; 
} 
}); 

HTML:

<div class="form-group" ng-form="form"> 
    <div class="col-lg-8 col-lg-offset-2 col-sm-12"> 
     <div class="row" ng-repeat="obj in questionObject track by $index"> 
     <div class="radio"> 
      <label class="choice" ng-class="{'choiceSelected': isChecked==$index}"> 
      <input type="radio" 
        name="optradio" 
        ng-click="selectAnswer($index,questionObject.correct_answer)" 
        ng-model="radioInput">{{obj.body}} 
      </label> 
     </div> 
     </div> 
    </div> 
    </div> 
    <pre> 
    dirty:{{form.$dirty}} 
    pristine:{{form.$pristine}} 
    </pre> 

EDIT Dies ist die Form ausgegeben. Wird nie aktualisiert

{ 
    "$error": {}, 
    "$name": "form", 
    "$dirty": false, 
    "$pristine": true, 
    "$valid": true, 
    "$invalid": false, 
    "$submitted": false 
} 

Answer 1

Versuchen Sie so. Suchen Sie nach dem NG-Modell und den ng-erforderlichen Attributen für das Optionsfeld.

<div name="myForm" novalidate ng-form> 
    <div class="col-lg-8 col-lg-offset-2 col-sm-12"> 
     <div class="row" ng-repeat="obj in questionObject track by $index"> 
     <div class="radio"> 
      <label class="choice" ng-class="{'choiceSelected': isChecked==$index}"> 
     <input type="radio" name="optradio" ng-click="selectAnswer($index,questionObject.correct_answer)" ng-model="data.option" ng-value="obj.body" ng-required="data.option == ''">{{obj.body}} 
     </label> 

     </div> 
     </div> 
    </div> 
    </div> 

    <pre> 
    dirty:{{myForm.$dirty}} 
    pristine:{{myForm.$pristine}} 
    $valid:{{myForm.$valid}} 
    $invalid:{{myForm.$invalid}} 
    </pre> 

Plunker: https://plnkr.co/edit/crpV5QnSGdSv6rUBnTnR?p=preview

Answer 2

Mit Radio-Buttons ein standardmäßig ausgewählt wird. Sie können stattdessen Kontrollkästchen verwenden und sie mit angularjs so steuern, dass nur eines ausgewählt wird.

Dazu jede Frage gibt eine ausgewählte Eigenschaft Objekt, das zunächst falsch sein wird:

$scope.questionObject = [{ 
    "body": "abc", 
    "selected": false 
    }, { 
    "body": "def", 
    "selected": false 
    }, { 
    "body": "aghi", 
    "selected": false 
    }]; 

Dann, wenn der Benutzer Funktion eine Checkbox Ihrer selectAnswer wählt verwendet werden kann, nur ein Kontrollkästchen, um sicherzustellen, immer gewählt wird:

$scope.selectAnswer = function(obj) { 
    angular.forEach($scope.questionObject, function(val) { 
     if (obj !== val) { 
     val.selected = false; 
     } 
    }); 
    }; 

Plunker: https://plnkr.co/edit/0TBDHJEjDpiIjmhd3AqT?p=preview