AngularJS單選按鈕應單擊進行驗證

Question

您好有一個使用json數據的表單，我的表單也應該在提交時進行驗證。 不確定爲什麼單選按鈕被選中時，只有一個應該被選中。 不確定窗體的js工作以太。 任何幫助非常感謝。

HTML：

<my-form ng-app="CreateApp" ng-controller="mainController"> 

     <form ng-submit="userForm()" name="userForm" novalidate> 
      <fieldset> 
      <div ng-repeat="field in result.fields"> 
       <label for="{{field.type}}">{{field.label}}</label> 

       <input ng-if="field.type != 'radio'" 
        name="{{field.name}}" 
        ng-required="{{field.required}}" 
        value="{{options.value}}" 
        type="{{field.type}}" /> 

       <div ng-if="field.type == 'radio'"> 
       <div ng-repeat="option in field.options"> 

        <input type="{{field.type}}" 
         name="{{field.name}}" 
         ng-required="{{field.required}}" 
         ng-model="richestClub" 
         value="{{option.value}}" />{{option.label}} 
       </div> 
       </div> 

       <form-error ng-show="{{!!field.errorMessages.required}}">{{field.errorMessages.required}}</form-error> 
       <form-error ng-show="{{!!field.errorMessages.invalid}}">{{field.errorMessages.invalid}}</form-error> 
      </div> 
      </fieldset> 

     <button type="submit" 
       ng-disabled="userForm.$invalid" 
       ng-click="onSubmit(userForm)"> Submit </button> 
     </form> 

    </my-form> 

JS：

var myApp=angular.module('CreateApp', []); 

myApp.controller('mainController', function($scope, $http) { 
    $http.get('form.json').success(function(response) { 
    $scope.result = response; 
    console.log($scope.fields); 
    }); 

    $http.get('form.json').success(function(response) { 
    $scope.result = response; 
    var fields = response.fields; 
    $scope.richestClub = fields.answer.options[0].value; 
    console.log($scope.richestClub); 
    console.log($scope.fields); 
    }); 

}); 

Plunker

Answer 1

原因的按鈕並不相互排斥，是因爲他們有相同的名稱，但JSON文件沒有按爲廣播組定義一個名字。嘗試提供一個名稱，如下所示（「名稱」：「測試」）。

{ 
    "fields": { 
     "name": { 
      "type": "text", 
      "required": true, 
      "label": "Name", 
      "errorMessages": { 
       "required": "You need to tell us your name!" 
      } 
     }, 
     "email": { 
      "type": "email", 
      "required": true, 
      "label": "email", 
      "errorMessages": { 
       "required": "You need to tell us your name!", 
       "invalid": "There's a typo in your email" 
      } 
     }, 
     "comment": { 
      "type": "text", 
      "required": false, 
      "label": "Comment", 
      "errorMessages": { 
      } 
     }, 
     "answer": { 
      "type": "radio", 
      "name": "test", 
      "required": true, 
      "label": "What's the richest club?", 
      "options": [ 
       { 
        "label": "A: Chelsea", 
        "value": "Chelsea" 
       }, 
       { 
        "label": "B: Man City", 
        "value": "Man City" 
       }, 
       { 
        "label": "C: Real Madrid", 
        "value": "Real Madrid" 
       }, 
       { 
        "label": "D: Fiorentina", 
        "value": "Fiorentina" 
       } 
      ], 
      "errorMessages": { 
       "required": "Please answer the question" 
      } 
     } 
    } 
}