What's a good practice when building forms dynamically in AngularJS?

Question

I've got some JSON data- an Array of Fields containing Input Type (input, dropdown, radio, checkbox, etc.), Label and whether they are required or not.

I'm doing an ng-repeat through the array to build the form. I'm trying to understand what's the best way to build different kinds of inputs based on the Input Type value.

In normal programming, I would do a

foreach (var field in FormData){
  if (field.inputType == "dropdown"){
    //logic to build dropdown using jQuery, etc..
    }
}

In AngularJS, I can't really do if thens within an ng-repeat="field in FormData". What's the proper way to dynamically build out these different kinds of elements while looping through an array?

This question is very similar: How can I use Angular to output dynamic form fields?

Many thanks for any suggestions.

Galdo · Accepted Answer · 2013-03-22 01:28:42Z

2

In my application, I did use an ng-switch (see the answer from the very similar question) in my ng-repeat to achieve something similar to this. The only problem with this is to link to the model. If you want to bind to a property name that is stored in a variable (if you json contains an id for the field), you won't be able to something like this :

<input type="text" ng-model="formdata.{{elem.id}}" />

I found that you can do this instead :

<input type="text" ng-model="formdata[elem.id]" />

answered Mar 22, 2013 at 1:28

Galdo

9451 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hairgami_Master Over a year ago

Thanks for the tip- I was wondering how I was going to accomplish that!

Collectives™ on Stack Overflow

What's a good practice when building forms dynamically in AngularJS?

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related