如何从给定的 JSON 创建动态表单以及使用 angularjs 进行表单验证

Question

我有这个 JSON 数据，其中有一些构建表单的选项，我正在尝试创建一个动态表单，每个屏幕的每个问题以及下一个/上一个按钮。这是我到目前为止所尝试的。有人可以帮助我使用此 JSON 创建表单以及表单验证和上一个/下一个功能吗？

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

嗯..假设您在询问上/下一部分。

可以通过将您当前的问题分配给变量来完成。

//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

顺便说一句，您应该在每个按钮中添加type="button"，这样它就不会在您每次单击时都尝试提交表单。