Dynamic Forms with Reactive Forms

 Form Group vs Form Builder

• Both belong to Angular's Reactive Forms module, 
• but they serve slightly different purposes.

Form Group 

• FormGroup is a class used to explicitly create and manage a collection of form controls (fields).
• You manually create the FormControl objects and group them using FormGroup.

     When to use?

• When you want to explicitly define and control the form structure.
• Useful for small forms or cases where the structure doesn't change dynamically.

import { FormGroup, FormControl, Validators } from '@angular/forms';

loginForm = new FormGroup({

  name: new FormControl('', Validators.required),

  password: new FormControl('', [Validators.required, Validators.minLength(3)])

});

onSubmit() {

  console.log(this.loginForm.value);

}

Form Builder

• FormBuilder is a service provided by Angular to simplify the creation of FormGroup and FormControl objects.
  
• It reduces boilerplate code, making form creation cleaner and more concise.
  

When to use?

• For large forms or forms with complex validations.
• It reduces boilerplate code, making form creation cleaner and more concise.
• It provided (group, array, control)

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

loginForm = this.fb.group({

  name: ['', Validators.required],

  password: ['', [Validators.required, Validators.minLength(3)]]

});

onSubmit() {

  console.log(this.loginForm.value);

}

Form Array using a Dynamic form

Ex.html:

<form [formGroup]="skillForm">

  <div class="container mt-5">

    Skills:&nbsp;

    <button class="btn btn-success btn-sm" (click)="addSkill()">+</button><br><br>

    <div formArrayName="skills">

      <div *ngFor="let skill of skills().controls; let i = index" [formGroupName]="i">

        <input type="text" placeholder="Technical skill" formControlName="technicalSkill">&nbsp;

        <input type="number" placeholder="Experience (years)" formControlName="experienceYears">&nbsp;

        <button class="btn btn-danger btn-sm remove-skill" (click)="removeSkill(i)">-</button> <br><br>

      </div>

    </div>

    <button class="btn btn-success" (click)="onSave()">Submit</button>

  </div>

</form>

Data is: {{objs|json}}

Ex.ts:

  objs: any;

  skillForm: FormGroup;

  constructor(private fb:FormBuilder){

     // Initialize the FormGroup with a FormArray named 'skills'

    this.skillForm = this.fb.group({

      skills: this.fb.array([]) // Initialize the FormArray

    });

  }

 // Getter for the 'skills' FormArray

 skills(): FormArray {

  return this.skillForm.get('skills') as FormArray;

}

 // Method to add a new skill group to the FormArray

  addSkill(): void {

    const skillGroup = this.fb.group({

      technicalSkill: ['', [Validators.required, Validators.minLength(3)]],

      experienceYears: ['']

    });

    this.skills().push(skillGroup);

  }

  // Method to handle form submission

  onSave(): void {

    this.objs = this.skillForm.value; // Capture form values

    console.log()

  }

  // Method to remove a skill group from the FormArray

  removeSkill(index: number): void {

    this.skills().removeAt(index);

  }

}

Differences Between Form Group and Form Builder:

Feature	FormGroup	FormBuilder
Class vs Service	A class used directly to define form controls.	A service that simplifies form creation.
Boilerplate Code	Requires manual creation of FormControl.	Reduces boilerplate code significantly.
Ease of Use	Slightly more verbose.	Cleaner and more concise syntax.
Best Use Case	Small or static forms.	Large or dynamic forms.
Dynamic Form Creation	Less convenient for dynamic forms.	Better suited for dynamic forms.

More details GithubRepo