Advanced Form Layouts

In previous versions is was rather convoluted to create advanced layouts. You needed to manually hard code the whole form if you wanted to do something fancy with just one input. With V2.1 comes a new way of building advanced forms. The wrapper field has been added to the field schema and expects an element string. It will then wrap the field within that element. E.g:

let data = {
   form: {},
   model: {
      test: ''
   },
   fields: [
      {
         key: 'test',
         type: 'input',
         wrapper: '<div class="col-12"></div>'
      }
   ]
};

This will then create the formly field and wrap it within a div with the class of 'col-12'. This way you can customise single elements easily.

If you still really need to have manual control of the forms you can use the custom-layout directive on your formly-form component. Here's an example of how you could do this:

let data = {
    form: {},
    model: {
        foo: '',
        bar: ''
    },
    fields: [
        {
            key: 'foo',
            type: 'input'
        },
        {
            key: 'bar',
            type: 'input'
        }
    ]
};

<!-- your component template -->
<div>
    <formly-form :model="model" :form="form" :fields="fields" custom-layout="true">
        <template scope="f">
            <table>
                <tr>
                    <td>
                        <formly-field :form.sync="form" :model.sync="model" :field="f.keys.foo"></formly-field>
                    </td>
                    <td>
                        <formly-field :form.sync="form" :model.sync="model" :field="f.keys.bar"></formly-field>
                    </td>

                </tr>
            </table>
        </template>
    </formly-form>
</div>