Schema form using Aurelia

Viewed 817

I am using Aurelia to build a dynamic form based on a json. The form is generating from a json like the following:

Schema = [{
    'key': 'Name',
    'display': 'Name',
    'type': 'text',
    'placeholder': 'Name',
    'required': true
},
{
    'key': 'IsSubscribed',
    'display': 'Subscribed to newsletter?',
    'type': 'checkbox',
    'placeholder': null,
    'required': false
}];

The model to fill the form is available via a Web API service. So, far I succeeded using the following template.

    <template>

    <section class="au-animate">
    <h2>Edit Form</h2>
    <form class="form-group">
        <div repeat.for="item of Schema" class="form-group">
            <label if.bind="item.type === 'text' || item.type === 'checkbox'" class="control-label" for.bind="item.key">${item.display}
                <input class="form-control" id.bind="item.key" placeholder.bind="item.placeholder" type.bind="item.type" value.bind="Model[item.key]" />    
            </label>
            <label if.bind="item.type === 'textarea'">${item.display}
                <textarea placeholder.bind="item.placeholder" value.bind="Model[item.key]></textarea>
            </label>
            ...
        </div>
    </form>
    </section>

    </template>

Now I am facing difficulties, when the Model contains another object as property. E.g., for the property Address I would like a input box for City.

Hence, item.key = "Address.City".

I can bind with (1) Model.Address.City or (2) Model['Address']['City'] which are not possible as the form is generating at runtime. I would like to use something like (3) Model['Address.City'], so that I can use Model[item.key] for the binding. Is there any easy syntax to achieve this?

Example of similar application in Angular Js is Angular Schema Form

Thanks in advance.

1 Answers
Related