Advanced Form Layouts

For the most part a basic layout is going to suffice. You want your form fields to be more or less linear. But there may be times that you want some really gnarly layout and trying to lay this out with a schema is going to be a complete pain in the ass. So to remedy this Vue Formly allows you to just drop in the fields wherever you want. For example:

let vm = new Vue({
  el: '#app',
  data: {
    form: {
       fname: {
          type: 'text'
       },
       lname: {
          type: 'text'
       }
    }
  }
});
<formly-form :form="form" :custom-layout="true">
  <table>
    <tr>
      <td>
        <formly-field :form.sync="form" :key="'fname'"></formly-field>
      </td>
      <td>
        <formly-field :form.sync="form" :key="'lname'"></formly-field>
      </td>
    </tr>
  </table>
</formly-form>

There are a couple of things worth noting here:

  1. The <formly-form> component is still being used and all the layout is inside that component. This is very important as there is heaps of work that goes on inside the formly-form component to make things run smoothly, such as validation.
  2. The :custom-layout property has been set to true. This tells Vue Formly to not auto-generate all the fields based on your schema, but to rather let you do it yourself.
  3. Make sure to use a literal string or a variable in the :key property. Don't get caught doing :key="title" when title is supposed to be a key

results matching ""

    No results matching ""