I am making a web app in which I have a section which has an input field. Anything that is submitted through the input field gets posted to an API. So when you land on that screen you see all the previous inputs made. What I am not able to figure out is and the thing I want to achieve is that when someone submits a new input it doesn't reflect in UI until and unless you go back and come back to the screen. I want that as soon as you send an input the input string should be reflected in the UI. How can this be done using AngularJS?
You have two options, at a very basic level they are:
1) The first is to re-query all the list when the item is saved:
api.save(newPost).then(() => getAllPosts());
2) You can return the recently saved post and add it to the list:
api.save(newPost).then((saved) => $scope.posts.push(saved));
You'll need to handle all the unwrapping (etc) based on how you're making the calls.
Related
I want to be able to validate the entire form and get the validation result, but I want to do it 'silently'(i.e without making my fields go red). I know that formContext.trigger exists, but that doesn't seem to have a softer setting. I don't want to show errors to the user, I just want to check if what they have got so far is valid. Is this possible with react hook form?
Context:
I'm using 'onChange' mode for my form
I need to do this because as a user fills my form in, which is for a pricing page, I want to send requests to get the pricing information which changes based on the form data. I don't want to send a pricing request if the form isn't valid, but I don't want to trigger full validation and make the fields go red when the user hasn't done anything wrong, they're just filling the form out in order.
We have a web app composed of several pages containing links of data retrieved from database. Upon clicking one link[data], the user should be directed to another page. For navigation between pages, we have used breadcrumb. The breadcrumb is stored in redux store. Currently, when the user tries to ctrl+click or open link in new tab, we managed to use single store across multiple tabs. Hence, if the user opens 3 separate links [data] in new tabs, the updates made on the breadcrumb affect previously opened tabs when these tabs/pages are refreshed. For example:
In homepage, I have these links:
Data_1
Data_2
Data_3
Current breadcrumb in the homepage is like this:
HomePage/
Once the user opens Data_1 in new tab, the expected breadcrumb in the new tab is:
HomePage/Data_1/
Similarly, if the user tries to open Data_2 and Data_3, in new tabs, the breadcrumbs should appear as follows for tab 1 and tab 2, respectively:
HomePage/Data_2/
HomePage/Data_3/
In the current implementation, I managed to update the state of breadcrumb whenever new links are opened such that breadcrumb[0] would be equivalent to HomePage while breadcrumb[1] was initially Data_1, then became Data_2, and lastly Data_3. Hence, the last value of breadcrumb[1] is Data_3 since that's the last opened link. My problem is that whenever the user refreshes previously opened tabs/pages corresponding to Data_1 and Data_2, since they are all using a single store and breadcrumb[1] has been changed to Data_3, the breadcrumbs in Data_1 and Data_2 pages also become Data_3.
In this case, I can just think of using multiple stores since I perceive that it could be the only solution given my use case. Meanwhile, I can't find any sufficient documentation online regarding using multiple stores in redux. Maybe I can pass the store to the next page in params...? something like that
Can someone please help. Thanks in advance.
To emulate per-tab same site persistency, I would, right before the page is about to be refreshed (window.beforeunload or similar)
1 - Write to localStorage about my breadcrumb
2 - Refresh
3 - Read from localStorage about my breadcrumb to initialize myself properly (so the data here SHOULD be mine because i just wrote it)
4 - remove breadcrumb information from localStorage (to prevent other tabs from reading it)
Now, you still have the case where the user just closes the tab, so you would have stale data about the breadcrumb in your localStorage. You can add a little expiration mechanism (you might consider that data in the localStorage older than 10 seconds is stale and just pretend it isn't here and delete it at step 3.) Cookies would work pretty much the same, with a built-in expiration mechanism.
In my form if i enter numbers rather than text and it will give an error then after clicking on next button it should not be redirected to next page.
how to prevent this.
The clicking on the next button will execute a validation function, and based on the result, you will decide whether to navigate to the other page or display an error and stay on the same page.
Even better (and assuming that you have multiple fields in the form): check the value of every field when the user leaves the field (onBlur) and notify the user about the error immediately then. This is not instead of running validation on 'Next' or on 'Submit', since the user may click on the button without visiting that field.
Long time ago (as a test for me, during my study of react), I created a small project that implements a form. It is far from perfect, but you might find it useful: https://github.com/rahamin1/reactstrap-form
I was asked to develop a multi-step form in React. The form contains 30 fields to be filled and it should be displayed in 3 steps of 10 fields each.
The first 2 steps have "Save" and "Next step" options to save the current work or continue with the next step.
The final step has "Save" and "Finish form" options, both of them will save the form in the database (through a web service).
Something like this:
The project is made on React, using Mobx for the state management, and I'm new to react. My question here is... how should i manage the states and the stores?
Should i have a single Store (FormStore) with the 30 fields and pass it to each component through the props and they will fill each field?
Is there any way i can have a single store (like a singleton) and each component fills its fields there?
I have to manage the fields information in memory untill the Save button is hit. And if when the Save button is hit, i need to save just the filled fields.
Any kind of guide will be appreciated.
If this form data is not changed anywhere else in your application, you can use a single store for all. I cannot think of any disadvantage given that it is relatively small.
You would want to split it if the answers could be put in different categories and different categories would be mutated by different functionalities of your app.
Here's what I am trying to accomplish:
A user fills out a form, saves a record. At some later date they wish to "clone" this record, but may want to make a few tweaks. This "clone" functionality should direct them to a form that is pre-filled with the previous record's data so that they can review it, edit as needed, and submit it as a new record.
What I'm trying:
I've modified my add() function to accept a parameters:
function add($cloneid = NULL)
Then created a Clone link that sends them to siteurl/model/add/id_to_clone
Then, I get the data from that model:
$clone_source = $this->Model->findById($cloneid);
$this->data['Model']['field1'] = $clone_source['Model']['field1'];
and so on. Based on Google searching and other posts, this should work. But what actually happens is that upon clicking the 'Clone' link, the user is directed and the form submits itself immediately (failing to save the record, since it fails validation) and the user never actually sees the form.
What am I doing wrong? (Also I should note, there are relational models present, but I don't think this should be the cause of any problems...I hope).
Forms are pre-populated using the $this->request->data array.
In order for your form to be populated you will need to set some data to the request.
So you'll be better off with the following.
$this->request->data = $this->Model->findById($id);