Binding an Object SubArray to an Angular Material mat-table

0
votes

I have an Angular 9 Material Form that is bound to a formGroup, which has two controls. One a mat-form-field, the other a mat-table. I have a data model that has a the schema of a single string and an array of objects.

With this, I am able to bind to the single string but I am having an issue with the table. I use formControlName and formArrayName but it does not bind. I have tried a variety of different things but can't find a good way to bind the array data to the mat-table. I am sure I am missing something but it is not clear.

Here is a stackblitz to show you an example of my problem

https://stackblitz.com/edit/angular-fkr8w7

2
angularangular-material

2 Answers

0
votes

I think you are implementing it in the wrong way. You want to use two different formGroup's. One for the filed outside table and other for the table. You cannot apply the formControl to a table directly. You need to apply formControl to other fields (input, select, checkbox, radio..etc;) Which are housed inside the table (if it has any editable rows).

For example please refer this: https://medium.com/@vap1231/inline-editable-table-using-dynamic-form-controls-in-angular-87eb24c0e5a5

0
votes

I think you are missing the attribute dataSource: "data.names" in your <mat-table> opening tag

<mat-table #namesTable multiTemplateDataRows formControlName="names" [dataSource]="data.names" >

dataSource: "your_Array_of_data" populate your array to the table.