Angular 4 - Saving form data of highly complex form - forms

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.

Related

I am looking for a a form builder

I am searching for a form builder that completes the following requirement.
It should have API to handle form submission. Meaning I can submit data from an API as well, mainly for bulk entries as selecting multiple values and pressing submit button takes a lot of time. So a way through which we can either import some csv/xlsx file into the database directly. Let me explain this situation, suppose I am a manager and I have to evaluate 5 staff members on 15 skill levels. This means that I will have to click on submit button and wait for page refresh for 5 * 15 = 75 times and not just that, I will have to select the same values multiple times. This is a huge interface problem. In short a tabular form in which if I have to create a new entry I will press a button "Add New Row" or Delete the current row and once I am done with this tabular form, I will press the submit button once and my time & data will be saved.
Also API's for getting the stored data so I can use this data for other purposes as well like Visualizing with Microsoft Power BI.
It should also be able to create some reports from that data or have Microsoft Power BI connectors so I can generate reports from that myself. Jotforms creates reports based on the submitted form data. Form.io provides API for accessing the submitted data
It should have a feature for creating resources. Example:- As a form creator I don't want to be manually entering all my staff member names or skills into the dropdown, instead this should come dynamically. Form.io does that.
Also the forms and reports must be protected from SSO.
What I have done so far?
Tried form.io which gives me the ability to create resources and forms. The ability to access and store data through API. But the problem is I cannot submit multiple records with one POST request and it also has no feature of creating reports
Tried JotForms which can create promising reports but there is no
functionality to create resources and access those into other forms.
Tried Custom Tool but this will take a lot of time in development, testing, reviews so I want to opt for an already crafted and maintained by an enterprise tool.
Every Suggestion is Appreciated.

angular 4 multiples reactive forms in tabs with one submit

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

Best way to manage the persistence of a form state, to and from a database

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.

Knockout viewmodel concept

I was not able to find an answer for the following... please gimme an advice.
I have a form that is built dinamically basing on metadata being obtained from server via ajax request. It gets about 20 values for display data and also about 10 fields for user input. Thus, the presentation view model and post view model are different. Filled fields are posted back via ajax as well.
How do i apply Knockout view models concept correctly?
1. I make a single viewmodel for displaying and posting data. In this case AJAX call will post back a lot of redundant data to server. Option: i can send a new object that will contain only input fields, but it doesnt look OK in KO concept.
2. I make a single viewmodel containing only fields for user input. Read-only fields to display stay out of KO view model and populated using common jQuery methods (so we're out of pure KO style again)
3. Or?
I appreciate your ideas.
Knockout provides the ability to apply MVVM pattern to a client-side (HTML5/Javascript) app. Your JavaScript view model should provide all the data and properties necessary to operate the view or views that it is responsible for, both for user input fields and display-only fields.
Once you post something back to the server, you're leaving the MVVM world and reaching into another layer to perform some operation. As a result, I think it's best to formulate JSON that contains only the data that the server needs to complete the request. On the server side, you may have a C# model with validation attributes or whatever, but, again - you're not trying to adhere to MVVM pattern there.
Hopefully this helps. I'm happy to elaborate if needed.

How do I implement a "registration confirmation" in ASP.NET MVC?

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.