How can I create dynamic forms using Angular Reactive Forms?

How can I create dynamic forms using Angular Reactive Forms?

You can create dynamic forms in Angular Reactive Forms by using FormArray to manage a collection of FormGroups.

Can you show me a code example of how to implement this?

Sure! Here's a simple example:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      items: this.fb.array([])
    });
  }

  get items() {
    return this.form.get('items') as FormArray;
  }

  addItem() {
    const item = this.fb.group({
      name: [''],
      age: ['']
    });
    this.items.push(item);
  }
}

This code initializes a form with a FormArray to hold dynamic items.

What if I want to remove an item from the dynamic form?

You can remove an item by using the removeAt method of FormArray. For example:

removeItem(index: number) {
  this.items.removeAt(index);
}