understanding the intended usage scenario

I’ve read the tutorial and most of the documentation. I’m still having a little trouble understanding how mobx-react-form integrates into an application.

I have an object model and store that I’ve built with mobx. I’d like to create a form for editing instances of the objects in the mobx store. My current understanding is that I would need to 1) create a form that has all of the fields of my model, 2) pass in a copy of the the object to initialize all of the form field values, and 3) on submit update all the fields in the original source instance.

Since mobx is in the name of this project, I figure I have this wrong and there is a smoother path towards integration. I also looked at the demo but it is a bit complicated. Is there any other simpler examples?

[foxhound87]

Hi @noahdesu

There’s no opinionated way to implement the form into your app, it mostly depends on your app structure, and it’s up to you on how implement it, as it is very flexible.

In your case you need to define fields based on your models.

If you are using flat fields, just pass the values you want to display into the form constructor (using fields or values object).

If your models have complex data and you need nested fields look how to deal with Separated Properties on docs.

Generally I think you need to pass the fields struct (a fields object as an array of strings) and the values of your model (using the values object) into the form constructor.

Then you can retrieve the field’s values with the form.values() method and re-inject it into the store. (look the Form Helpers and how to Extend the Form with the onSuccess() and onError() event handlers)

For more examples take a look at these issues: #43 - What is the best way to call external library and update some stores in the app? #116 - Defining and array field?

[foxhound87]

Hello @nareshbhatia

You can pass the type needed for your input component, right now only date, checkbox, number, file are handled to activate particular behavior in this package.

For converting the values you can read this: https://foxhound87.github.io/mobx-react-form/docs/extra/converters/input-output.html

A better converter system will be implemented in future versions.