I have a long entity, and we splitted the properties in a tab control, in different tabs. But I need that when clicking the submit button (one on the form under all tabs) all the reactive forms validates.
What is the good way to get it? Must I put all the forms in a formArray? Define one form with subforms? And if so, can I put the forms in different tabs?
Thanks for your help.
You can add to some shared service for holding data, and update data in each tab component. And when you will submit form, you get data from this service.
But it for very simple applications.
If you want a powerful service for storing immutable data and update data from each tab then you need use Redux technology.
See for general information about Redux http://redux.js.org/
And implementation Redux for Angular 4 https://github.com/ngrx/store
Related
I'm trying to create a form builder that is based on XForms 2.0 standards.
I need to support the feature of creating multiple forms/surveys and connecting them. Allowing the end user developer to control the flow of the travel... Both sequentially and conditionally. Conditionally meaning to make the survey/forms (Some form would not be shown to the user depending on the user input) I'm struggling to find a logical solution to use while creating the XForm 2.0 model. Anyone have some ideas i can use or anything i missed ?
How forms are sequenced isn't covered by the XForms specification. In Orbeon Forms specifically, there are 2 ways to handle the sequencing of distinct forms:
Implement those forms in a single form in Form Builder, and rely on the wizard view to have only one part of the large form shown at any given point in time.
Create separate forms in Form Builder, and write logic that runs when users submit every single form to determine what the "next form" is. This is done in a process tied to a button.
We have highly complex form in Angular 4 and we want to be able to save form data as an object to be able to send to our DB and also to external APis in json.
Form has tabbed form wizard format and each tab had lot of form controls and each tab itself is very complex.
So we plan to create a data service where at each step, we plan to put data in an object, and keep updating as we nagivate till the end. If user clicks save drafts at any time in form wizard, current state of form data object will go in DB.
Form next, previous work same way, retrieve or updating form data object.
When saving form or submitting form, we will have post http call to backend.
Is there any better approach to achieve this? or we are following right direction. Any examples will be great.
No better approach. You put your complete model in the service. Than create sub-models inside that model that correspond to your individual tabs. In each component, get the model from the service, and keep updating the appropriate model for the tab you are on.
I'm developing an Angular2 workflow app that collects data on multiple tabs, customizing the fields on each tab based on prior tabs' values, and then validating that all tabs are filled out correctly along the way. I'm using the Angular2 router to control which tab component displays, and each tab uses FormGroup to handle form validation. (See below for a visual idea of component hierarchy and how the app works.) I need an elegant way to compute the validity of data across all tabs in the workflow, without having to open each tab to activate its controller and FormGroup validators. Ideally, the workflow validation for a tab will use the same logic as the tab's FormGroup validation, to keep things DRY and consistent.
As users touch fields I log the tab's "dirty" state in the DB, so I don't have a problem knowing when a tab is pristine/dirty. The challenge is, when a user returns to a previously-saved workflow, how do I compute the valid/invalid state for all tabs' data, when the user hasn't yet touched the FormGroups on those tabs?
Thanks for any suggestions for design patterns that can accomplish this!
A few design details:
One route component handles each step of the workflow.
Each route component uses a FormGroup to handle form validation.
Form validation on all tabs need to drive the valid/invalid indicators for all workflow steps, shown in the header's .
A tab can be in one of three possible states: Pristine (gray check: the user hasn't touched any field on the tab yet), Incomplete (red exclamation: the tab has been touched and one or more fields on the tab are invalid), Valid (green check: all required fields contain valid values.
In working on this problem, I am finding that the solution requires higher-level architectural choices about state management and how to handle & display the app's data. Unfortunately for me, there wasn't a single technical solution, like "Use this Angular2 library design specifically to validate fields across multiple FormGroups in different components!" :(
I hope our research is helpful for somebody else, my team is taking a Redux approach using the npm modules ngrx-store & ngrx-effects for Angular2. All of the app's data & state processing logic (including validation across multiple tabs-- my initial challenge) will be handled by Redux actions & reducers. A beneficial side effect is that our view controllers become super simple, and just display the data ngrx gives them. This eliminates complex, conditional logic that depends on state of data entered in other areas of the app.
Egghead.io has a useful 10 minute video that introduces the ngrx library & design patterns.
I hope this gives you a leg up. Good luck!
Four years later, I have a better answer to the initial question:
There's a module for that! https://www.npmjs.com/package/#ngneat/forms-manager
For state management in general, I now use Akita, https://datorama.github.io/akita/. I hope I never have to use redux again. I imagine there are legitimate use cases that need redux, but having now used ngrx in a few projects, I can say with confidence: It is very complex to implement and maintain, and painful for each new team member that has to come up to speed.
Both tools are created by (or at least heavily contributed by) Netanel Basal (https://netbasal.com/), so it's also nice that they share the same mindset about state management.
In a JSP/Servlet webapp, I have to implement a functionality that allows a user to save or restore a form state, that latter containing for instance some search criteria.
In other words, the user must be able to save or restore field values of a form, at any time. On the same page that contains that form, there's also another little form that allows him to name his form state before saving it. Then, later he'll be able to recall that state, via a combobox, and refill dynamically the form with the state he selected.
I know how to implement that by hand but I would prefer not to reinvent the wheel then I'd like to know if there are some frameworks managing that kind of functionality ? A mix between JSP taglib, filter class, jQuery or other JavaScript frameworks...
My research has not give anything yet.
Thank you in advance.
I'm an absolute beginner with ASP.NET MVC and I'm trying to build a pretty simple application, but I'm having a hard time getting out of the webforms thinking.
I need to register users so they can download my application. I need to capture their information in three screens. Rather than write the database from each view, I want to aggregate all of the data they enter and let them confirm it before they submit their information.
I've been playing with various models and such but if I make one big model, the scaffolding wants to put all the fields on one view.
Can anyone point me in the right direction?
Sounds like you need a Wizard. Here's a few samples:
http://highoncoding.com/Articles/647_Creating_Wizard_Using_ASP_NET_MVC_Part_1.aspx & a youtube video
http://shouldersofgiants.co.uk/Blog/post/2009/09/18/A-RESTful-Wizard-Using-ASPNet-MVC-2e280a6-using-Data-Annotations.aspx
ASP.NET MVC is stateless, which means it doesn't save state between views like Webforms does.
You should save the information from each view into the database, and then set a flag in the user's database record at the end, indicating that the user confirmed their information.
If you need three separate views, you can always copy parts of the code created by the scaffolding to each of the three new views, using only those fields you want the user to see in each view.
If you need validation in each view, use a ViewModel object for each view that pertains only to those fields in the associated view.