Dynamic Forms Blog Posts

Using Angular material MatTableDataSource in combination with FormArray

Expected Behaviour: When user clicks on add data, table with empty column need to be displayed and want form control for newly added data.
For this behaviour, I used MatTableDataSource class and FormArray class and MatTable.
MatDataSource is a material class which accepts client side data array and includes native support of filtering, pagination
and sorting.  Data source provides stream, it bears the responsibility of triggering table updates.
FormArray is an alternative to FormGroup for managing any number of unnamed controls.
The mat-table provides a Material Design styled data-table that can be used to display rows of data.
I defined passengerData Array as type of PassengerDetails and used this array as data source for mat table.

2 Likes 24367 Views