Are nested model keys supported? #28
Description
I'm trying to bind fields to nested properties of the model using s simple example which you can reproduce by following these steps
- Create an empty app with
vue init webpack vue-formly-example. When prompted, don't install eslint - Install the dependencies
npm install vue-formly && npm install vue-formly-bootstrap - Replace the content of
App.vuewith 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> - Run the app with
npm run devand 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?