Using Angular Forms with ag-Grid

Wouldn’t it be great if we could combine Angular forms and ag-Grid? This article documents how.

Sean Landsman
Jul 23, 2018 · 8 min read

The Use Case

ag-Grid is a feature rich grid with a huge amount of functionality — documenting what can be done with it would be a series of articles in it’s own right.

Angular Form Example # 1 — The Grid Is The Form

The Grid Is the Form
Parent Grid to Child Cell
<div *ngIf="formGroup"

Angular Form Example #2 — The Grid Is Part Of The Form

The Grid is part of the Form
The Grid FormControls are now part of a larger FormGroup

Angular Form Example # 3— The Grid Is Part Of The Form: As A FormArray

const formArray: FormArray = new FormArray([]);
const key = this.createKey(this.columnApi, column); 
formArray.setControl(<any>key, new FormControl());
stockGroup.addControl(<any>rowNode.id, formArray);

Caveats

All of the above implementations assume that all the grid data is present on the screen. If you have a large set of data and have row (or column) virtualisation enabled (which would be the default) then rows/columns will be removed/added to the DOM as the user scrolls.

  • Manually handle rows/columns being added/removed to the parent Form

Conclusion

So there you have it — 3 options for using ag-Grid as part of a wider Angular Form.


Learn more about ag-Grid and Angular

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Sean Landsman

Written by

Lead Developer — Frameworks. Responsible for integrating all of ag-Grid’s supported frameworks (Angular, Vue, React etc)

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world