How to bind an Angular 2 data grid to an Angular 4 FormArray

Question

I'm trying to set up an Angular Dynamic Form that can be bound to some simple editors like text editors but also expose a list of items that can be bound to a grid. An example would be an Order and it's Items.

As far as I understand Angular Dynamic Forms creates a change tracking model that gets populated from the "real" object - in the example of order items, each item would be created as a FormGroup and then added to a FormArray.

This all makes sense and its easy to get it up and running when binding to simple controls but now I need to bind the order items to a data grid. This seems like a very common scenario but I see no mention of this just about anywhere? I suspect that I may not be following recommended patterns?

Can I bind a data grid (in this case Clarity VMWare) to FormGroup items?

Tx

Answer 1

To answer my own question I figured out that I can bind to each of the form groups that represent an item by getting the value of the abstract controls within the form group:

<clr-dg-row *ngFor="let item of orderItems" [clrDgItem]="item">
<clr-dg-cell>{{ item.get('code').value }}</clr-dg-cell>
<clr-dg-cell>{{ item.get('value').value }}</clr-dg-cell>
</clr-dg-row>

In case you wondering item.get('controlName') gets the control in the control group and .value retrieves its current value. The list of items is exposed on the component as follows:

get orderItems(): AbstractControl[] {

    return (this.orderForm.get('items') as FormArray)
      .controls;
}