AngularJS Form how to display radio buttons and data from json

Question

I'm not able to display correctly the json data.

• How can I display The radio buttons from my json file ( plunker demo )?

• Aslo I'd like to validate the form, on submit.

html:

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

    <form ng-submit="submitForm()" novalidate>

        <fieldset>
            <div ng-repeat="field in result.fields">
              <label for="{{field.type}}">{{field.label}}</label>
              <input 
                    ng-required="{{field.required}}"
                    value="{{options.value}}"
                    type="{{field.type}}" >

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


        </fieldset>

        <button type="button" ng-click="onValidate(); return false;"> Validate</button>
        <button type="submit" ng-disabled="userForm.$invalid"> Submit </button>
    </form>


</my-form>

Answer 1

Here's how you can iterate over the radio options. I agree with @charlietfl that you should use an Angular form library like angular-formly instead.

<fieldset>
  <div ng-repeat="field in result.fields">
    <div ng-if="field.type === 'radio'">
      <span>{{field.label}}</span>
        <div ng-repeat="option in field.options">
          <label for="{{option.label}}">{{option.label}}</label>
          <input ng-required="{{field.required}}"
                 value="{{options.value}}"
                 id="{{options.label}}"
                 type="{{field.type}}" >
        </div>
    </div>
    <div ng-if="field.type !== 'radio'">
      <label for="{{field.type}}">{{field.label}}</label>
      <input ng-required="{{field.required}}"
             value="{{options.value}}"
             type="{{field.type}}" >
    </div>
    <form-error ng-show="{{field.errorMessages.required}}"></form-error>
    <form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
  </div>
</fieldset>

Answer 2

Initiate a value on controller first

        $scope.richestClub = {};

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

Html:

<form ng-submit="submitForm()" novalidate>
          <fieldset>
            <div ng-repeat="field in result.fields">
              <label for="{{field.type}}">{{field.label}}</label>
              <input ng-if="field.type != 'radio'" 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}}" ng-model="richestClub.val" value="{{option.value}}">{{option.label}}</br>
                </div>

              </div>



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

          <button type="button" ng-click="onValidate(); return false;"> Validate</button>
          <button type="submit" ng-disabled="userForm.$invalid"> Submit </button>
        </form>