How to share react-final-form between pages/screens - react-final-form

react-native
react-final-form
rect-navigation
I need to split up my form into subforms. The subforms will be rendered on separate screens in React-Native, but I need them to be part of the same form handling object. From each sub form I need access to the complete form state (for all fields), but each subform will only render some fields.
Is there a way to pass the form object to another screen/component and continue to use the state handling/validation from the main form?
Example:
MainForm
FieldX
FieldY
Button to open subform A
SubFormA
FieldA1
FieldA2
FieldX <- reused from main form, might be readonly in subform A
Button to go back to main form
Button to open subform B
SubFormB
FieldB1
Button to go back to main form
The actual submit of the form can only be preformed from the MainForm. I have this setup with an older form library, but I'm using Modals to show the subforms, which are inlined in the main form. But I'd like to stop using modals and instead push a separate screen (using react-navigation) with subform capabilities by somehow passing the form object.

You can use React Redux to have a Store to be able to share all the information.
Create your store and dispatch your actions, then you can get all the variables (fields) for the form from there.

I fiddled around some more and found a way. Thought I'd answer this for others to find.
The render property of the Form component actually gets the form instance as an argument.
The Form component also takes a form instance as a prop
These two features makes it possible to simply pass the form instance to another Form component. I tried this within the same screen and it works like a charm. I hope I won't get into trouble with the main Form getting unmounted when I push the next screen with react-navigation.
edit: It works perfectly between screens as well. I send the form instance to the subform via react-navigations params object.

Related

how to know which form called the fonction in delphi

I have a lot of Forms, and in one Form I use printing. All other Forms can call this printing Form.
In addition, every Form has different objects, some of them have TDBGrid and Filtered option, and some of them don't. I tried to check before printing if there's a Filter. I did some code and I get a result, but this didn't work with all Forms because every Form have a different name, as everyone knows.
My question is, how to know which Form clicked the printing button and use it?
//on form is 1
form1.dbgrid.somecode
for second form
form2.stringgrid.somecode
How can I know which Form, and can I save the object's name in a table in the database?

How should I preserve and repopulate form data when opening a sub-form?

In an MVC4 project, I have a form that contains a partial view which is an index view of languages studied at school. It is a default type view template index, with Add, Delete, Edit links per row etc. When you Add or Edit, it opens an Add or Edit view for a Language. After e.g. adding a language, the updated partial view is returned.
My problem is that if the user opens the Language form, edits and captures on the main form will be lost. I can't just do an Ajax save before opening the Language form, as the main form may only be partially complete and fail validation. What I am thinking of doing though is using an AjaxPreserve action that takes a FormCollection, and stores it in session (o on disk, or anywhere) and therefore no model binding and server validation is performed.
I then have two problems: I will need to disable client validation before calling the AJAX action, and I will need to repopulate the main form using the FormCollection I saved earlier. I think there should surly be some jQuery voodoo to disable client validation, but I am completely stumped on repopulating the form.
ALTERNATE SOLUTION: Instead of using 'sub-forms', I can use editor templates, in pop-ip forms, where the FK IDs are not required, but that us only in certain cases, so my question still stands.
Could you use something like Knockout where you create javascript model and bind it to a grid/dialog edit/template view. I would transform the whole data to a JS model, bind it to a table/grid and then track all changes on the client side. When all is done, just serialize the whole model back to the server and update the data store.
If this is an acceptable scenario, it will save you a lot of trouble.
Familiarity with Knockout is required, but if you've used it before, you will be able to solve this in a very clean and efficient way.
This example on the Knockout website gives an idea of what I'm trying to suggest. Editing, deleting, adding is done on the client side until you send all of the data back to the server. You will need to track flags for each object to know if it's added, edited or deleted.
http://knockoutjs.com/examples/contactsEditor.html
Simple make the sub request for adding language using Ajax and repopulate the dropdown or what ever way you are accepting language on the main form on sucessfully save.
*This will save a lot of effort. *
Why don't you just use javascript?
E.g. You have main form, that stores some data. And when you need to add something specific like languages you open popup using partial view, allow user to fill form, but when user press submit you intercept action with js, save stuff to javascript array/object or whatever else and maybe store it in a hidden field of main form - for final submit
var newData = new Object();
newData.Field1 = $("#yourField1");
...
lanuageData.push(newData);
$("#languageContainer").val(JSON.stringify(languageData));
...
DataAnnotation validation works here as well like:
$.validator.unobtrusive.parse("your_partial_view_container");
When you need to edit some object that was already added to js array - open popup and fill it up with element of you js array. So basically you do all CRUD on client-side, saving changes only on final submit.
To make your code in a conrolller more clear you can use custom model binder which deserialize some string field from JSon to List or any other kind of object -> so it can be validated on server side.
Would saving your values to local storage be acceptable? What about using TempData?

How to get the last inserted id of embed form and store it in parent form : symfony

I have to parent form called EventForm and embed form called as RegisterForm. If your is not logged in means i want to show register form. Registration working fine with embed form. But after registration i want to store user id to parent table event.
I guess saveEmbeddedFroms() function called after parent form saved. So which function is suitable to update parent form. Can any one give me idea. How to do this.
When you call $form->save() on a form it saves the embedded forms as well but the embedded forms are saved after the main object.
I think what you could do is to write a preSave() function for your main form in which yu can get the embedded form, perform a save() o it (which will give you in return the saved object) and manually set the userid in the main form (remember to unset the embedded form so it is not saved twice).
You could also rethink the whole model because it looks a bit complicated ;) Do you reaaly have to use embedded forms here?

How to create/handle jQuery UI dialog that updates model

I have a requirement to ask a question when a certain scenario happens on my MVC 4 view.
When that scenario is true, I simply want to have a jQuery UI dialog pop up modally. That dialog will simply have two radio buttons for "WidgetType" (Purple or Blue).
The viewModel has a property for SelectedWidgetType (that has a default value).
I simple am looking for the best way to handle updating the underlying model with the selection a user picks in the dialog.
Thanks in advance for any replies.
NOTE: I am using this overly simple example as the basis for other dialogs that will have more fields on them that also update the underlying model.
Creating the dialog isn't the hard part, but I am struggling with getting the values.
User jQuery's AJAX post method.
Create a view model JavaScript object on the front end that maps to the parameters of your data model. This view model object can be triggered to get updated each time the user changes his selected options by calling an update method via the change event handles of each form element.
Pass it back to the server controller by packing it into a JSON object using json2.js
If you want a full framework/elegant solution look at using knockout.js which simulates most of this for you... !

multi action rails view

I have an Controller X which which has an action new.
As part of the creation process, I would like to handle multiple things before the form is submitted.
Three operations I would like to do is Search, Evaluate and Create.
So when the view is first loaded, it will have the form to input some fields. Based on the input, I need to call some ruby utils to build the "data" object and then display those results back to the page. I think I have this part figured out, I have a form_for('/x/new') tag in my view and I check in my controller if request.post? then calculate data object.
But when the search is done and the data is rendered back to the page, user can evaluate it which is another operation call that can grab some additional data. When the user clicks on evaluate/search or create button, how do I figure out which button was clicked?
It's best practise (because its more RESTfull) if you split up your action in different action/views!

Resources