Nesting forms, complex data structures

I was wondering if there is a possibility of nesting forms to create complex data structures or if there is an easy way to implement that?

If the Form itself would implement the same interface as the Form element, we could nest them indefinitely and create complex hierarchical data structures with validation. Or maybe creating a special Input field is the way to go…

I tried around a little bit with creating my own Input element with sub elements, but that does not work because I don’t have access to the validation rules in an external component. For now I created a mapping function which can handle names like entity[property] and returns the value correctly, but that is not as nice, because all the nodes have to be inside the main form component. Also I cannot add validation rules and a sub form, like when I want to make a complete address required. When trying to create reusable form partials I get the error: Uncaught Error: Form Mixin requires component to be nested in a Form

I was thinking about something like that (simplified draft):

First create reusable form:

var AddressForm = React.createClass({
[...]
render: function(){
    return (
        <Formsy.Form {...this.props}>
             <input name="street"/>
             <input name="zip"/>
             <input name="city"/>
        </Formsy.Form>
    ); 
}
});

And then reuse that form as a field:

 <Formsy.Form>
   <input name="name"/>
   <input name="otherProperty"/>
   <AddressForm name="address"/>
</Formsy.Form>

Basically what I am trying to get from the form as a value is a complex data structure like that:

{
    name: 'Someclient',
    otherProperty: 123,
    address: {
        street: 'xyz',
        zip: 'xyz',
        city: 'xyz'
    }
}

Any thoughts on what’s the best way to approach that? I think it would be a really great feature, I’d be happy to help implementing.

[Semigradsky]

@dsteinbach you can not nesting forms: http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-form-element

Content model: Flow content, but with no form element descendants.

[klis87]

@Semigradsky Nested form could be displayed as div, then we could check whether part of a form is valid or not - this functionality is present in many form libraries, including Angular and Redux Form and it is implemented without any violation of HTML5 spec.