How to create dynamic form from given JSON alongwith form validation using angularjs

Question

I have this JSON data with me which has some options to build a form and I'm trying to create a dynamic form with each question per screen along with next/prev button. This is what I have tried so far. Can someone help me with creating form with this JSON along with form validation and prev/next functionality?

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

JSON

var questions = [
      {
        text: "What is your name?",
        type: "text",
        required: true,
        model: "name"
      },
      {
        text: "Tell us something about yourself.",
        type: "textarea",
        required: true,
        model: "about"
      },
      {
        text: "Explain your job profile",
        type: "textarea",
        required: false,
        model: "profile"
      },
      {
        text: "Which is the largest country in the world by population?",
        offeredAnswers: [
          {"value": "Yes"},
          {"value": "No"}
        ],
        type: "radio",
        required: true,
        model: "radio1"
      },
      {
        text: "Would you be available to work in shifts?",
        offeredAnswers: [
          {"value": "Yes"},
          {"value": "No"}
        ],
        type: "radio",
        required: true,
        model: "radio2"
      },
      {
        text: "How long have you been working at your current job?",
        offeredAnswers: [
          {"value": "Not long, it's part time"},
          {"value": "1-2 yrs"},
          {"value": "3-4 yrs"},
          {"value": "5+ yrs"}
        ],
        type: "radio",
        required: true,
        model: "radio3"
      }
];

HTML

<form name="mmSurvey">
   <ul id="options">
      <li ng-show="question">
         <label>
            <div ng-if="(question.type == 'radio' && question.options)">
               <p ng-repeat="option in question.options">
                  <input type="{{option.type}}" name="" ng-change="updateAnswerList(option.value)" ng-required="{{option.required}}" />
               </p>
            </div>
            <div ng-if="(question.type == 'text')">
               <input type="{{question.type}}" ng-required="{{question.required}}" />
               <!-- show an error if this isn't filled in -->
               <p ng-show="mmSurvey.mm.$error.required">Please enter your name.</p>
            </div>
            <div ng-if="(question.type == 'textarea')">
               <textarea ng-required="{{question.required}}"></textarea>
            </div>
         </label>
      </li>
   </ul>
</form>

Answer 1

Hmm.. Assuming you are asking about the prev/next part.

It can be done by assigning your current question to a variable.

//init
var currentIndex = 0;

//update question object according to index
$scope.$watch(function() {
  return currentIndex;
}, function() {
  $scope.question = questions[currentIndex];
});

$scope.next = function() {
  // validation here
  // hint: you can use formname.$invalid for first check

  // increase question number
  currentIndex++;
}

// similar for prev

By the way you should put type="button" in every button so it won't attempt to submit the form every time you click it.