kelp404 / angular-form-builder

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

How to retrieve the form with saved values and edit it? #84

Open Priyalakshmi-Laxmanan opened 9 years ago

Priyalakshmi-Laxmanan commented 9 years ago

Hi,

First of all Thank you for this project. Its very nice and I am now using this form builder in an application.

I have build a form for user to input the values.

I get the values in the ng-model="input". I need to edit the form with pre-saved values.

Can anyone please tell me how to load the values in the form.

is-bart commented 8 years ago

In the template notice the fb-default property, it takes an object with the default values for each component of your form. It's not documented really but it's in the example provided.

demo.js:

      $scope.defaultValue[textbox.id] = 'default value';
      $scope.defaultValue[checkbox.id] = [true, true];

Notice that the default value for a textbox is a string, for a checkbox it's an array of booleans. For a radio it's also a string (the selected value) and it should be easy to test for a select or a text area.

What works for me is my stored component has a "value" property and when I build the form I chekc if that value is set and if it is I add it to the defaultValue object.

Example:

scope.defaultValue = {};

angular.forEach(scope.form.template, function(item){
    $builder.addFormObject('default', item);
    if (item.hasOwnProperty('value')) {
        scope.defaultValue[item.id] = item.value;
    }
});

and the template looks like this

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

Hope this helps.

breezewish commented 8 years ago

I'm trying to directly transform values from $scope.input to defaultValue, however it doesn't work. The data format of the two feature is not the same. In $scope.input its value is a string and in defaultValue its value is an object, which needs to be transformed by programmers.

breezewish commented 8 years ago

BTW, it just joins options with ", " for checkbox values, which means, if there are ", " in checkbox options, you can't simply split strings to get structural data required by defaultValue.

jagadeeshpalaniappan commented 8 years ago

@is-bart , @SummerWish

For some reason, My id is coming null when i drag and drop. So i couldn't populate the Form & Form Data properly. Could you please help me

It will be really, if you can give some example with populating Form Elements & Form Data --from JSON objects / strings.

adisajohnson7 commented 8 years ago

@jagadeeshthegeek , i was able to set this id myself. $builder.addFormObject will return the added formobject back to u. So u can do formobject.id = something (e.g. the current index i in the loop that @is-bart gave above)