Skip to content
Advertisement

how to implement angular table with reactive form

based on my html below , as you can see I have a table and then looped through mat cell using *matCellDef="let model" , inside the cell there are input fields which are reactive forms (it has mat error checking ,formcontrolname etc).

Each cell or row should have its own reactive form since each row has its own mat form fields input fields and validations.

How do we address this in angular?. I have provided some code snippets below that might help. highly appreciated. Thanks.

#html code

JavaScript

#ts code

modelForm: FormGroup;

JavaScript

#code that pulls data from api to be populated on table

JavaScript

Advertisement

Answer

We have a ngx-multi-sort-table. The tecnica is similar

If we see in github the source

We see that we can override the function “_sortData” that belong to the class “MatMultiSortTableDataSource”, so we can do some like this in initData

JavaScript

And when create the data we use some like

JavaScript

Another option is create a class that extends from “MatMultiSortTableDataSource”

JavaScript

And use

JavaScript

See a stackblitz

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement