Search code examples
angularjsangular-formly

Unorthodox form structure in angular-formly

I am trying to use angular-formly to construct my forms and the only one I can't figure out is the form that has a little strange structure. So the form structure is like so:

[checkbox]
[radio]
[text-input]

[checkbox]
[radio]
[text-input]

[checkbox]
[radio]
[text-input]

An example result HTML structure (very crude) would be this: http://jsbin.com/bebinivaba/edit?html,output

...

The problem is that the radio buttons need to be from the same radio group. And the only way I saw to do that is by specifying the options in a "options" object, in the templateOptions property. So there seems to be no way of inserting anything between the radio buttons...

I am using the Bootstrap Template for the fields rendering.

Solution

  • I think this is what you're looking for: http://kentcdodds.jsbin.com/pemalec/edit?html,js,output

    Basically, you simply must specify a name on each field definition that is the same for all of them. In my example, I generate it like this:

    var radioName = new Date().getTime() + 'radios';

    Just to make sure it's unique, but you could use a uuid or something. I recommend generating it like this otherwise you could wind up with other radios having the same name that you don't want to have the same name :-)