kelp404 / angular-form-builder

Drag and drop to build bootstrap forms in AngularJS.
http://kelp404.github.io/angular-form-builder/
MIT License
600 stars 340 forks source link

How to render? #88

Open vko-online opened 9 years ago

vko-online commented 9 years ago

I have this kind of data in mongodb,

var q = {
            "_id": "5604f521c25fa455c8b574bd",
            "user": {"_id": "5604e3b2103796a25e4045e8", "displayName": "User"},
            "catalog": "5604e3df103796a25e4045ea",
            "__v": 0,
            "created": "2015-09-25T07:17:53.610Z",
            "elements": [{
                "id": 0,
                "component": "radio",
                "editable": true,
                "index": 0,
                "label": "Radio",
                "description": "description",
                "placeholder": "placeholder",
                "options": ["value one", "value two"],
                "required": false,
                "validation": "/.*/"
            }],
            "name": "f"
        };

Notice the elements property, it has some data to render to end-user. But how to that exactly? Here's the piece that retrieves that data

$scope.findOne = function(){
            $scope.form = Forms.get({
                formId: $stateParams.formId
            }, function(){
                angular.forEach($scope.form.elements, function(element){
                    $builder.addFormObject(element.name, element); 
                    //should i be doing this?
                });
            });
        };

And the last part

<div ng-model="input" fb-form="form2" fb-default="defaultValue"></div>

What is the ng-model for? What name should be in fb-form?

<div ng-model="input" fb-form="myObject.elements"></div> <!--this doesn't renders anything-->

This repo lacks of documentation, although i find it useful plugin

is-bart commented 8 years ago

Yeah the documentation is pretty basic but between that and the examples you can work it out.

ng-model is to retrieve the data. If you have a form, you probably want to store the user input somewhere. Input will contain an array with some data for each component inside your form. In this case just one object with the id of the component, the label and the value that was selected by the user.

As far as I know the name in fb-form can be anything you want. However, in your case you named your form "form2" so when you add a component to a form with addFormObject you have to add it to "form2" not to element.name (which doesn't even exist in your example).

So simply do $builder.addFormObject('form2', element);