Question

点击＆＃34;获取表格＆＃34; 按钮应该对表单api发出请求，并使用响应中收到的信息呈现表单。一旦表单呈现，用户必须能够“提交表单”＃34;并且还应允许用户重复此过程。的 HTML：

<body ng-app="JsonApp">
<div ng-controller="JsonCtrl" style="margin: 200px;">
<button type="button" class="btn btn-success center-block" ng-click="JsonData()">GET FORM</button>
</div>
</body>

Angular JavaScript

app = angular.module('JsonApp', []);

app.controller('JsonCtrl', function ($scope,$http) { 
        console.log("*************Entered into getJSON(): *************");

    $scope.JsonData = function () {
        $http.get("https://randomform.herokuapp.com/")

            .then(function(response) {

                console.log("getJSON data is :: ", response.data);
            });
    };

response.data：（json格式）

{
    "Data": {
        "Form_fields": [
            {
                "Autofill": "that other",
                "Component": "textinput",
                "Description": "competition hateth, because that will have to be chosen here",
                "Editable": false,
                "Label": "nothing to complain",
                "Required": true,
                "Validation": "^. + $"
            },
            {
                "Autoselect" :[
                    "Takes pains because"
                ],
                "Component": "radio",
                "Description": "are not those who are provident excepteur who",
                "Editable": false,
                "Label": "Duis him of them",
                "Options": [
                    "Some of these",
                    "Takes pains because"
                ],
                "Required": true
            },
            {
                "Component": "textareas",
                "Description": "all the pains of rejecting it are lorem",
                "Editable": true,
                "Label": "pleasure as a",
                "Required": true,
                "Validation": "^ [a-zA-Z1-9 \\ s] + $"
            },
            {
                "Component": "select",
                "Description": "when an obstacle to cupidatat, however, believe that the life of a wise",
                "Editable": true,
                "Label": ", which is not cillum",
                "Options": [
                    "Pains explain",
                    "Itself",
                    "Them",
                    "Practice to come",
                    "They are"
                ],
                "Required": false
            },
            {
                "Component": "select",
                "Description": "there is something which is the order of things be dolor consequat",
                "Editable": true,
                "Label": "When the choice was accepted",
                "Options": [
                    "And",
                    "Not certain",
                    "We consider them",
                    "They pay labor"
                ],
                "Required": true
            },
            {
                "Component": "textareas",
                "Description": ", and that the choice of, and the duties",
                "Editable": true,
                "Label": "ecological soul",
                "Required": true,
                "Validation": "^ (. | \\ N) + $"
            }
        ],
        "Form_id": "2hUnEy6tqUXG",
        "FORM_NAME": "in order to make the distinction"
    },
    "Success": true
}

无法继续，如何使用json数据呈现HTML表单。？

Answer 1

您可以使用现有的库。

一个简单的问题是： Angular Dynamic Forms

更加标准的方法是JSON Schema这个很好的实现Angular Schema Form。请参阅此处的示例DEMO

使用json数据创建动态HTML表单？

1 个答案: