AngularJS radio button should be validated on click

Question

Hi have a form which uses a json data, also my form should validate on submit. not sure why the radio buttons become selected when only one should be checked. Not sure the js for the form work ether. Any help much appreciated.

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

The reason the buttons are not mutually exclusive is because they have to share the same name, but the JSON document doesn't define a name for the radio group. Try providing a name as done below ("name": "test").

{
    "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"
            }
        }
    }
}