3

I'm trying to simplify how I generate my forms with AngularJS.

My ultimate goal is to be able to write something like:

<form>
  <field-div label="Name">
    <field which="form.name"></field>
  </field-div>

  <field-div label="Language">
    <field which="form.language"></field>
  </field-div>
</form>

For this, I'm working with two directives (fieldDiv and field) and two JavaScript objects: one that represents the data being edited in the form, and another that represents the form definition (field type, field options...).

See this JSFIDDLE for the code: http://jsfiddle.net/vincedo/9Uf6C/

After banging my head against the wall a few times, I think I got it working. The main difficulty was to get Angular to treat a string -- that I got from my form definition object (e.g. "entity.name") -- as a scope property with two-way data binding.

I still have two questions:

  • Is it the right way to do it? More specifically, my code uses two scope.$watch per field, and I'm afraid it might affect performance.
  • In my form, why isn't "English" selected in the "Language" field? It must be a stupid mistake: the HTML source uses 0, 1, 2... as <option> values whereas my code uses string keys such as en, fr... But after trying to wrap my head around $wrap and $parse for so many hours, I don't see it. :-)

Thanks!

Improve this question
7
  • You need to update your fiddle correctly, your link opens an empty Angular fiddle template. Commented Apr 4, 2013 at 10:17
  • @supermasher: thanks for pointing this out!! It's my first jsFiddle and I thought they auto-updated. It should work now. Commented Apr 4, 2013 at 15:16
  • I have a solution that I think is better but i'm not able to make it work right now since your model reference contain the "entity.". Can you edit this form definition to return only (for example) "name"? Commented Apr 5, 2013 at 2:38
  • @Galdo: Sorry, I don't understand what you mean. You want me to edit the $scope.form object so that only the "name" key remains? Commented Apr 5, 2013 at 5:26
  • In your model you have a form definition that will come from somewhere else. Can you edit this schema or you have to adapt to it? For my solution to work, the line model: 'entity.name', would have to change to model: 'name', Commented Apr 5, 2013 at 12:30

4 Answers 4

Reset to default
3

You can do this with an ng-switch tag (http://docs.angularjs.org/api/ng.directive:ngSwitch). Something like this.

<div class="control-group" ng-repeat="element in form">
  <label class="control-label">{{element.label}}</label>
  <div class="controls" ng-switch="element.widget">
    <input ng-switch-when="text" type="text" ng-model="entity[element.model]" ng-required="element.required" />
    <select ng-switch-when="select" ng-model="entity[element.model]" ng-required="element.required" ng-options="o.key as o.name for o in element.options"></select>
  </div>
</div>

Here is a working example of my solution :

http://jsfiddle.net/Galdo/Sqsc7/17/

Please note that I changed entity.name to name in your schema.

With this solution, you will avoid any use of a directive. Pure angular!

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

2 Comments

Galdo, thanks for taking the time. It's nice that you're using ngRepeat to iterate over the fields; in my case, that doesn't work cause I need strict control over the form layout (e.g. two fields in the same <div>, ability to manually pass some attrs from the template to a given field)... As for the ngSwitch directive, I was aware of it but decided against it as it feels like "logic in the template". Besides I need some JS code anyway to implement the form behavior (e.g. dynamically add/remove fields), so I can't do without a directive or a controller.
Noteworthy is the entity[key] trick that you used. It'd have avoided me to manually implement two-way data-binding with $watch(). Thanks again for your help!
0

For your second question (why the 0, 1, 2, ... instead of 'en', 'fr', etc.), you'll need to use an object instead of an array to bind to the <select> element. I found the answer in another question, but in short, your model becomes { 'en': 'English', 'fr': 'French', 'und':'Undefined'}, and your template's ng-options becomes ng-options="k as v for (k,v) in options"

I updated your Fiddle here: http://jsfiddle.net/StevenLJackson1/9Uf6C/7/

I'm also interested in performance with the multiple watches (i.e., the answer to your first question), since I am doing something similar on my current project.

Improve this answer

Comments

0

I created a simple form builder application, source code: https://github.com/Selmanh/angularjs-form-builder

You can see it online here: http://selmanh.github.io/angularjs-form-builder/

My solution was similar to yours, but didn't use watch.

Improve this answer

1 Comment

properly means only sharing the link is not the answer..you have to expalain them too..
0

You might also consider looking at this, which creates dynamic angular forms based on simple json definitions:

https://github.com/danhunsaker/angular-dynamic-forms

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.