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

Question

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

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.

angularjs

Answer 1

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]" />