Seeing "Form Mixin requires component to be nested in a Form"

[binarykitchen]

but no idea why. This with the latest version. Any clues?

[christianalfoni]

You have to wrap all your form elements in a Formsy.Form:

<Formsy.Form>
  <MyInputElement/>
</Formsy.Form>

[christianalfoni]

I can improve that error message to be more explicit :-)

[binarykitchen]

Well, I already do, sort of, but nested:

<Formsy.Form>
  <Row>
    <MyInputElement/>
  </Row>
</Formsy.Form>

is this supported?

[christianalfoni]

This is supported yes, but not when the Form is located in a different component... a different render method

[drawveloper]

@binarykitchen I had the same problem. I needed to have a form with different inputs depending on country:

<Formsy.Form>
  {countryInputs}
</Formsy.Form>

Instead of making countryInputs a component, I simply defined a function that returns arbitrary elements. Formsy is happy with that because the Formsy and the Inputs are still on the same render.

https://github.com/vtex/react-address-book/blob/f0eb8f1e111e3e286c7ef5378ad12c191f53b6c6/src/components/input-groups/InputGroupBRA.js

https://github.com/vtex/react-address-book/blob/f0eb8f1e111e3e286c7ef5378ad12c191f53b6c6/src/components/AddressForm.js#L57

BTW, thanks for this awesome lib, @christianalfoni :)

[christianalfoni]

@firstdoit ,

You are perfectly right :-) Looking forward to React 0.14 with parent-child context though, then this will not be an issue anymore!

Thanks for the feedback, much appreciated ;-)

[drawveloper]

Nice! Looking forward indeed.