Bind form fields values to actual objects

If I understand correctly, the current implementation of mobx-react-form is one-way binding - we can pass some initial values to the fields, but after that, the state is maintained internally within the form object and loses completely it’s connection to initial object. This is less than ideal. In true object-oriented manner, that mobx is encouraging to use, one would bind directly to an @observable value. This means, I could do something like this:

@observable formData = {
        firstName: 'hai'
};

this.form = new MobxReactForm(
        {
            fields: {
                firstName: {
                    label: 'First Name',
                    placeholder: 'Type Firstname',
                    rules: 'required|string|between:5,25',
                    value: this.formData.firstName
                }
        },
        {
            plugins: { dvr: validatorjs }
        }
);

and when interacting directly with input (typing in new value), that value would automatically land back in this.formData.firstName, effectively giving us the two-way databinding.

The current solution of asking for form.values() upon submitting/validating and then copying them back to the appropriate objects seems needlessly cumbersome. Am I missing something here? Is there an easy way to achieve this? And by easy I mean other than multiple declarations of form.$('field').observe(({ form, field, change }) => { ... }); ?

[rdiazv]

I have a MyForm component that is bound to a model (mobx-rest) and a form (mobx-react-form):

• When MyForm is going to mount the model assigns all its values to the form.
• A reaction watches the form values so that whenever there is a change it sets the new form values on the model.
• The reaction gets disposed when MyForm unmounts.

The point is that you can easily set a reaction to watch form.values() and do whatever your app needs, this way you don’t have to define a per-field observer.

[sebastian-zarzycki-apzumi]

Ah, I see. Yeah, it’s the same approach as I’ve described few posts above. Yes, fortunately, there are ways to get events upon form changing and then react to these events and write back the form values to the model.

I just wanted to go a step further and make the most common case embedded directly into the framework, so that it can update the model values itself.