Are nested model keys supported?

[donalmurtagh]

I'm trying to bind fields to nested properties of the model using s simple example which you can reproduce by following these steps

1. Create an empty app with vue init webpack vue-formly-example. When prompted, don't install eslint
2. Install the dependencies npm install vue-formly && npm install vue-formly-bootstrap
3. Replace the content of App.vue with the following

<template>
  <div id="app">
    <form>
      <formly-form :form="form" :model="model" :fields="fields"></formly-form>
      <button type="submit">Submit</button>
    </form>

    <div>
      <h3>Model</h3>
      <div> {{ model }}</div>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VueFormlyBootstrap from 'vue-formly-bootstrap';
  import VueFormly from 'vue-formly'

  Vue.use(VueFormly);
  Vue.use(VueFormlyBootstrap);

  export default {
    name: 'app',
    data () {
      return {
        form: {},
        model: {
          foo: {
            first: '',
            last: ''
          }
        },
        fields: [
          {key: 'foo.first', type: 'input'},
          {key: 'foo.last', type: 'input'}
        ]
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

4. Run the app with npm run dev and enter some data in the fields, you should then see something like this

As you can see the model keys are incorrect. Is it the case the field values can only be bound to the root of the model, or have I made a mistake?

[matt-sanders]

No, you haven't made a mistake. Currently I haven't got that supported, but it's on the list of things to do! I'll try and get that released as soon as possible. In the meantime, something you can do, which isn't totally ideal, but does work, is something like:

model: {
   'foo.first': '',
   'foo.last': ''
}

and then use something like flat to expand it. It's not ideal, but that's the temporary fix.

[donalmurtagh]

@matt-sanders thanks a lot for your swift response