How to manage large numbers of similar Reactive Forms in Angular

Question

I'm developing an Angular 6 project which has tons of forms. One FormGroup can contain more than 10 fields and could be reused across one app multiple times.

So, I'm asking how can I better organize my app? Currently one form.component.ts has more than 200 lines of code where about 70% the form create is going.

Is there a way to split this into reusable parts? I've tried to create a class with static method which returns a FormGroup made by FormBuilder but this doesn't seem to be working.

It was about

export class myClass {
  constructor(private fb: FormBuilder) {}

  static createFormGroup(): FormGroup {
    this.fb.group({
      // some stuff goes here
    });
  }
}

I don't know how to deal with this since the instance isn't going to be created since it's static.

You can pass your FormGroup to other components and dynamically add FormControls. — Julien, Dec 25 '18 at 16:04
Could you please explain how? (I have a set of FormControls that should be present in that group) — Sergey, Dec 25 '18 at 16:05
https://stackoverflow.com/questions/53588169/how-to-use-formgroupname-inside-child-components/53588596#53588596 — Chellappan வ, Dec 25 '18 at 16:10
Your FormGroup can be accessible in children component via @Input() or with any component via an injected service but that service would be a singleton, meaning the same instance will be shared. — Julien, Dec 25 '18 at 16:13
Why do you think that I need pass that formGroup somewhere? I have many places where it should be used as a part of a bigger form and it should added to there in a formArray — Sergey, Dec 25 '18 at 18:14
I need to spread out my formGroup creation so that it's divided and easy to reuse — Sergey, Dec 25 '18 at 18:15

score 0 · Answer 1 · answered Dec 25 '18 at 19:00

I think using Dynamic Forms would be a clear winner here. Here's what the docs say:

Building handcrafted forms can be costly and time-consuming, especially if you need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.

It may be more economical to create the forms dynamically, based on metadata that describes the business object model.

Your case appears to me as the exact same scenario. Also, I've lined the Guide above so you should get a Working Example for that right there.

However, your other options are:

Using a static service that would return FormGroups which you can then assign directly in your current form. That's something that you've already tried but without much success, as it seems from your question. You'd need to furnish more information on that to let people out here help you.
As Julien suggested, you can break your FormGroup down into smaller components and then pass your original/parent FormGroup as an @Input to them. They, can then further add FormControls or FormGroups to those original/parent FormGroup. Refer this StackBlitz eg. I created that demonstrates something similar. This could become messier as the size of your form grows. So in that case, I'd suggest either using Dynamic Forms or Option 1.

How to manage large numbers of similar Reactive Forms in Angular

1 Answers1