Angular 2 - large scale application forms' handling

Question

At the company I’m working for, we’re developing a large scale application with multiple forms, that the user needs to fill in in order to register for our program. When all

Answer 1

I did a similar application. The problem is that you are creating all your inputs at the same time, which is not likely scalable.

In my case, I did a FormManagerService who manages an array of FormGroup. Each step has a FormGroup that is initialized once in the execution on the ngOnInit of the step component by sending his FormGroup config to the FormManagerService. Something like that:

stepsForm: Array = [];
getFormGroup(id:number, config: Object): FormGroup {
    let formGroup: FormGroup;
    if(this.stepsForm[id]){
        formGroup = this.stepsForm[id];
    } else {
        formGroup = this.createForm(config); // call function to create FormGroup
        this.stepsForm[id] = formGroup;
    }
    return formGroup;
}

You'll need an id to know which FormGroup corresponds to the step. But after that, you'll be able to split your Forms config in each step (so small config files that are easier for maintenance than a huge file). It will minimize the initial load time since the FormGroups are only create when needed.

Finally before submitting, you just need to map your FormGroup array and validate if they're all valid. Just make sure all the steps has been visited (otherwise some FormGroup won't be created).

This may not be the best solution but it was a good fit in my project since I'm forcing the user to follow my steps. Give me your feedback. :)