CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
Al Ex Tsm
Al Ex Tsm

Reputation: 2102

AngularJS : dynamic form generation

I need a way of generating dynamic forms based on a document structure in order to update existing values of its attributes or add values to attributes that are multivalued.

I have a controller in angular that receives a document class name and id and pulls a specific document of that class.

The controller reads the document and saves data like number of attributes, attribute type, if the attribute is multivalued or not and the values.

Each class is different in number of attributes, attribute types.

Here is an example of the data generated by my controller for a specific document of a specific class:

 CLASS/id {cid: "Disease/54d49a8c3b70f6cce63dc475"}
 N° ATTRIBUTES:3(without counting multivalues of the same attribute)


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:displayName
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:0(not multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value displayName #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:identifier
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value identifier #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:r
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:date
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:3(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITIONS:0 ---> value r #1
 ATRIBUTE ARRAY POSITIONS:1 ---> value r #2
 ATRIBUTE ARRAY POSITIONS:2 ---> value r #3

Depending on the processed class and document these value change.

All this works fine but I am new to angular and not sure how to render things on the view side based on the former generated data.

Based on the data example shown above I would want the generated form to be something like:

enter image description here

Can anyone help me showing me the right approach for this?

Upvotes: 3

Views: 5801

Answers (1)

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

1) Convert that document data to a JSON list of objects, each object being a field:

fields = [
{"name": "displayName", dataType: "text", isMultiValue: false, numberOfValues: 1},
...
]

This is probably the most complicated part.

2) Somewhere in the controller:

$scope.documentData = {};
$scope.getFieldTemplateUrl = function(field) {
    return '/url/to/field/templates/' + field.dataType + '.html';
};

3) 

<div ng-repeat="field in fields">
    <div ng-include="getFieldTemplateUrl(field)"></div>
</div>

4) Define those field templates for each dataType. For "text" it's quite simple:

<label for="{{field.name}}">{{field.name}}</label>
<input id="{{field.name}}" type="text" ng-model="documentData[field.name]" />

Building on this you'll need to add support for isMultiValue and probably populate documentData with the existing data.

Also there are a lot of libraries doing exactly this:

Upvotes: 9

Related Questions