angularngx-datatablengx-formly

How add new rows to model when using NGX-DataTable with NGX-Formly


Using Formly I've implemented a solution similiar to the one found here: https://formly.dev/examples/advanced/datatable-integration

This works for displaying existing data, the issue occurs when trying to add new rows. I need a way to update the FormGroup list, I've spoofed this currently by adding the first row again. Visually it looks right, but it would always be binding to the wrong row.

     var newRow = this.fields[1].fieldGroup[0];
     this.fields[1].fieldGroup.push(newRow);

I have an example here (modified version of above example): https://stackblitz.com/edit/formly-add-ngxdatatablerow?file=src%2Fapp%2Fapp.component.ts


Solution

  • I was pointed to this link by Abdellatif Ait boudad which resolved my issue: https://github.com/ngx-formly/ngx-formly/issues/2250#issuecomment-630577383

    Instead of just pushing to the array, I also had set the model in order for Formly to detect the change.

          this.model.investments.push({});
          this.model = { ...this.model, investments: this.model.investments };
    

    This will add a new row to my table, and bind it correctly.