CODEWITHSUNDEEP
angularjs
Saman
Saman

Reputation: 5334

How to generate form in AngularJS using angular-dynamic-forms with dynamic JSON data

I want to use this library (angular-dynamic-forms) to generate dynamic form from my JSON data

So this is my HTML file

<!doctype html>
<html ng-app="app" id="ng-app">
    <head>
        <title>Hello form</title>
    </head>

    <body ng-controller="AppCtrl" ng-cloak="">
        <dynamic-form class="col-md-12" 
            template="stdFormTemplate" 
            ng-model="stdFormData">
        </dynamic-form>

        <script src="./libs/angularjs/1.0.8/angular.min.js"></script>
        <script src="./libs/components/dynamic-forms.js"></script>
        <script src="./controller/dynamic-forms.js"></script>
    </body>
</html>

Now if I have a controller like this everything works fine, I have my form

(function(){
    var app = angular.module('app', ['dynform']);
    app.controller('AppCtrl', function ($http, $scope) {
        $scope.stdFormTemplate = [
            {
                "type": "text",
                "model": "name.first",
                "label": "Last Name",
            },
            {
                "type": "text",
                "label": "Last Name",
                "model": "name.last",
            },
            {
                "type": "email",
                "label": "Email Address",
                "model": "email",
            },
            {
                "type": "submit",
                "label": "submit",
                "model": "submit",
            }
        ];

        $scope.stdFormData = {
            "name": {
                "first": "Saman",
                "last": "Shafigh"
                },
            "email": "[email protected]"
        };            
    });
})();

But when I want to use dynamic JSON data then it does not work. For example I have an API service which returns JSON content like this

{"form":{
     "template":[
          {"type":"text","model":"title","label":"","required":true},
          {"type":"textarea","model":"description","label":"","required":true},
          {"type":"number","model":"price","label":"","required":true},
          {"type":"choice","model":"available","label":"","required":true}],
     "data":{"title":"","description":"","price":"","available":"1"}}
 }

Then I want to use this JSON to generate my form dynamically, my code is like this

(function(){
    var app = angular.module('app', ['dynform']);

    app.controller('AppCtrl', function ($http, $scope) {
        $http.get('../api/product/form').
            success(function(data) {
                $scope.stdFormData = data.form.data;
                $scope.stdFormTemplate = data.form.template;
            });   
    });
})();

Even the following code is not working (it is just for test).

(function(){
    var app = angular.module('app', ['dynform']);
    app.controller('AppCtrl', function ($http, $scope) {
        $http.get('../api/product/form').
            success(function(data) {
                $scope.stdFormTemplate = [
                    {
                        "type": "text",
                        "model": "name.first",
                        "label": "Last Name"
                    },
                    {
                        "type": "text",
                        "label": "Last Name",
                        "model": "name.last"
                    },
                    {
                        "type": "email",
                        "label": "Email Address",
                        "model": "email"
                    },
                    {
                        "type": "submit",
                        "label": "submit",
                        "model": "submit"
                    }
                ];

                $scope.stdFormData = {
                    "name": {
                        "first": "Saman",
                        "last": "Shafigh"
                        },
                    "email": "[email protected]"
                };            

        });   
    });
})();

I think the form is not initialized when I initialize it in an action that has some delay.

Upvotes: 1

Views: 1889

Answers (1)

Saman
Saman

Reputation: 5334

I try something like this and it works for me, I've confirmed it with #danhunsaker who is the main contributions of this module, that for the moment this is the best solution.

In my html I have something like

<div id="my-form"></div>

Then in controller I have

(function(){
    var app = angular.module('app', ['dynform']);

    app.controller('AppCtrl', function ($http, $compile, $scope) {
        $http.get('../api/product/form/1').
            success(function(data) {
                $scope.stdFormData = data.form.data;
                $scope.stdFormTemplate = data.form.template;

                var element = angular.element(document.getElementById("my-form"));
                element.html('<dynamic-form class="col-md-12" template="stdFormTemplate" ng-model="stdFormData"></dynamic-form>');
                $compile(element.contents())($scope);                
            });   
    });
})();

Upvotes: 1

Related Questions