Angular what is the best method generating big reactive forms?

Question

For example I have a page with 35 inputs and 1 save button, also I can add more input fields by clicking on a button, so probably 35+ input fields. The problem is that it is hard to handle all form and its logic in one page in the other hand it is harder to divide it in to components (For example divide it in 4-5 components).

1. Render all form and it's logic to one component
2. Divide form to components - but I think this will make a big mess because I don't have a button to save in each component so this will lead to a bigger mess ,so there should be a lot of EventEmitters, Input, Outputs.

Maybe You know a better way to handle angular reactive forms ? I will accept any information that will help me ease my code. Examples would be fine

Error :

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

   Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

Answer 1

Future Web, I imagine an aproach can be divided your form in formGroup,e.g.

form=new FormGroup({
   personalData:new FormGroup({
        ...
   }),
   address:new FormGroup({
        ...
   })
   jobs:new FormArray([...])
})

And create different components app-form-personal-data, app-form-adress, app-form-jobs

Your main.app become like

<app-form-personal-data [formGroup]="form.get('personalData')"></app-form-personal-data>
<app-form-address [formGroup]="form.get('address')"></app-form-address>
<app-form-jobs [formGroup]="form.get('jobs')"></app-form-jobs>
<button (click)="submit(form)">

Or use a material stepper where becomes like

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="form.get('personalData')">
    <ng-template matStepLabel>Personal data</ng-template>
      <app-form-personal-data [formGroup]="form.get('personalData')"></app-form-personal-data>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
  </mat-step>
  <mat-step [stepControl]="form.get('address')">
    <ng-template matStepLabel>Adress</ng-template>
      <app-form-address [formGroup]="form.get('address')"></app-form-address>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
  </mat-step>
  <mat-step [stepControl]="form.get('jobs')">
    <ng-template matStepLabel>Adress</ng-template>
      <app-form-jobs [formGroup]="form.get('jobs')"></app-form-jobs>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <pre>{{form?.value|json}}</pre>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="submit()">Submit</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

(I left in stackblitz a little example with material-stepper)

your forms components becomes like

@Component({
  selector: 'app-form1',
  template:`
  <div [formGroup]="formGroup">
  <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      </div>
  `,
  styleUrls: ['stepper-overview-example.css'],
})
export class Form1 {
  @Input()formGroup:FormGroup
}