Implement FormArray with Signals

Angular Signal Forms (v21) : How to Implement FormArray with Signals (Step-by-Step)

H ey devs 👋

I’m a big fan of Angular reactive forms but still get bored while implementing formArray because of the boilerplate codes. Don’t take it in the wrong way; I mentioned boilerplate codes because the new Angular signal forms are way cooler and easier than formArray. Let’s implement the signal form to handle the formArray.

Not a Medium member? You can read the full article for free by clicking here. 🔗

In this example we are going to create a user input grid to capture the collection of vehicles he has.

Step 1:

Create a component to implement an input grid. I named it as an input-grid component.

File structure

Step 2:

Let’s define the structure of the collections (input-grid data).

export interface ICollection {
  slNo: number;
  bikeName: string;
  engineType: string;
  price: number;
  model: string;
  year: number;
  color : string
}

Step 3:

Implement the signal form in the ts file.

  collectionList = signal<ICollection[]>([]);
  collectionForm = form(this.collectionList);

It’s simple, right? Yeah, no need to inject formBuilder or define the form control. Just create an interface of the input grid. Define a variable using signal and pass the variable to the form import from the @angular/forms/signals.

Note: Make sure FormField will be imported from @angular/forms/signals.

Step 4:

Implement the table layout in the HTML.

<form class="input-grid-form">
    <div class="table-container">
        <div class="flex justify-end">
            <button type="button" class=" border w-20 h-[10] bg-blue-500 text-white border-radius-2xl rounded"
                (click)="addRow()">Add</button>
        </div>
        <table class="modern-table">
            <thead>
                <tr>
                    @for (header of tableHeaders(); track $index) {
                    <th scope="col">{{ header }}</th>
                    }
                </tr>
            </thead>
            <tbody>
                @for (collection of collectionForm; track $index) {
                <tr>
                    <td>
                        <div class="form-field">
                            <input type="number" aria-label="Sl No" placeholder="Sl No" [formField]="collection.slNo">
                        </div>
                    </td>
                    <td>
                        <div class="form-field">
                            <input type="text" aria-label="Bike Name" placeholder="Bike Name"
                                [formField]="collection.bikeName">
                        </div>
                    </td>
                    <td>
                        <div class="form-field">
                            <input type="text" aria-label="Engine Type" placeholder="Engine Type"
                                [formField]="collection.engineType">
                        </div>
                    </td>
                    <td>
                        <div class="form-field">
                            <input type="number" aria-label="Price" placeholder="Price" [formField]="collection.price">
                        </div>
                    </td>
                    <td>
                        <div class="form-field">
                            <input type="text" aria-label="Model" placeholder="Model" [formField]="collection.model">
                        </div>
                    </td>
                    <td>
                        <div class="form-field">
                            <input type="number" aria-label="Year" placeholder="Year" [formField]="collection.year">
                        </div>
                    </td>
                    <td>
                        <div class="form-field color-field">
                            <input type="color" aria-label="Color" placeholder="Color" [formField]="collection.color">
                        </div>
                    </td>
                    <td>
                        <button type="button" class="border w-20 h-[10] bg-red-500 text-white border-radius-2xl "
                            (click)="removeRow($index)">Delete</button>
                    </td>
                </tr>
                }
            </tbody>
        </table>
    </div>
</form>

collectionForm—will be responsible for the iteration, and whenever the signal form is updated, the DOM will be updated accordingly.

Implementing the add and remove row in the signal form is even easy.

  addRow() {
    this.collectionList.update(collection => [...collection, { slNo: collection.length+1, bikeName: '', engineType: '', price: 0, model: '', year: 0, color: '' }]);
  }

  removeRow(index: number) {
    this.collectionList.update(collection => collection.filter((_, i) => i !== index));
  }

Add Row—update the collectionList using the JS spread operator.

RemoveRow—update the collectionList using the JS array.filter method.

Form Array Implementation using signal forms

Want to explore the code in detail or try it out locally? Check out the full working example on GitHub: 👉 Source Code: **signal-forms**

Thanks for reading! If this was helpful, consider clapping 👏 and following for more full-stack tips. Got questions or suggestions? Drop them in the comments below!

✍️ Author: **Vetriselvan Panneerselvam**

👨‍💻 Full Stack Developer | 💡 Code Enthusiast | 📚 Lifelong Learner | ✍️ Tech Blogger | 🌍 Freelance Developer