# Form generator. How to do this?

**URL:** <https://forums.bitovi.com/t/form-generator-how-to-do-this/498>\
**Category:** CanJS\
**Created:** [December 9, 2016, 1:10pm UTC](https://forums.bitovi.com/t/form-generator-how-to-do-this/498 "2016-12-09T13:10:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [December 9, 2016, 1:10pm UTC](https://forums.bitovi.com/t/form-generator-how-to-do-this/498/1 "2016-12-09T13:10:54Z")

</div>

I can’t figure this out. I want to create some kind of form generator. I’ve got these class definitions: (abbreviated)

```
class Config {
    constructor( appName, components ) {
         this.components = components;
    }
    form( root ) {
         $(root).append( configStache ); // set through require
    }
}

```

config.stache:

> ```
> <form>
> <ul>
> {{#components}}
> <li {{data 'component'}}>{{>template}}</li>
> {{/components}}
> <li><input type="submit" value="Save"/></li>
> </ul>
> </form>
> 
> ```

The Config has a list of Components, each of which is a derived class of Component, e.g. Component.Input or Component.Dropdown of Component.File, etc… Each have their own stache template and I want them to have their own Controller.

In config.stache the templates are rendered fine, but I don’t know how to install the class-specific controllers.

Should I just render the form and after this is done install the Controls? Something like:

```
    form(root) {
         $(root).append( configStache ); // set through require
         $('.component', root).each( function( elem ) {
              var component = $(elem).data('component')
              component.createControl( elem );
         });
    }

```

I looks like the old instance() is gone though? At least I cannot find how to use it anymore.

---

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 11, 2016, 5:38pm UTC](https://forums.bitovi.com/t/form-generator-how-to-do-this/498/2 "2016-12-11T17:38:46Z")

</div>

Yes, you could do that. I would make each one of the input components it’s own can.Component rather than a can.Control.

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [December 12, 2016, 11:24am UTC](https://forums.bitovi.com/t/form-generator-how-to-do-this/498/3 "2016-12-12T11:24:58Z")

</div>

If I’d use Components I would have to specify the components in main template like so:

```
 &lt;form>
     &lt;component-text />
     &lt;component-dropdown />
 &lt;/form>

```

But I don’t know which subcomponents will be inserted, that’s dependent on the configuration. Or could I call

```
&lt;form>
    &lt;component />
    &lt;component />
   ...
&lt;/form>

```

and let the derived classes do their magic?

(BTW: it’s pretty hard/impossible to enter HTML into this form :-()

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [December 12, 2016, 1:43pm UTC](https://forums.bitovi.com/t/form-generator-how-to-do-this/498/4 "2016-12-12T13:43:03Z")

</div>

We did something like this for our dynamic form.  
Each input type is a seperate component and all it’s properties come from the back-end

Form component stache looks like this:

```
{{#switch type}}
{{#case 'text'}}
 	< formitem-text {(item)}="." {(user)}="user"></formitem-text>
{{/case}}
{{#case 'checkbox'}}
	< formitem-checkbox {(item)}="." {(user)}="user"></formitem-checkbox>
{{/case}}
...

```

And component formitem-text looks like this:

```
{{#if user}}
	{{#with item}}
		< div class="form-item">
			<label for="{{formitemId}}">{{label}}:</label>
			<input id="{{formitemId}}" type="text" 
				class="userfield {{#if hasError}}error{{/if}}"
				{{#if required}}required{{/if}} 
				{{#if disabled}}disabled="true"{{/if}} 
				{{#if focus}}autofocus{{/if}} 
				{{#if maxlength}}maxlength="{{maxlength}}"{{/if}} 
				data-userfield="{{field}}"
				{($value)}="itemValue"
				($input)="update(@element.val)"
			/>
		< /div>
	{{/with}}
{{/if}}
```