angular material table sort with formControl

Question

Currently having an issue that when sort is clicked the column that has formControls in an array by row the data & controls are not updated correctly. All other columns are updating as expected. Below is the code that has the formControls:

<form [formGroup]="rackAverageForms[i]">
          <md-input-container>
            <input [formControl]="rackAverageForms[i].controls.rackAverage" #rackAverage
                   formControlName="rackAverage"
                   (keydown.tab)="validateRackAverage(rackAverage,i)" class="numeric-field" [numberOnly]="true"
                   mdInput value="{{row.chosenDateRackAverage | currency:'USD':true:'1.4-4'}}">
            <md-error><strong>{{formErrors[i].rackAverage}}</strong></md-error>
          </md-input-container>
</form>

Here is a screenshot of before sort: md-table view before trying to sort

This is after sorting and the data is gone: md-table view after sorting with missing data

Sometimes there is one value that will hang around, but most of the time all of the values in this column are gone and controls gone as well. Please help.

reutbp · Accepted Answer · 2017-08-31 16:04:26Z

1

After trying a few different things, switching to using the row.id unique value to look up the formcontrol it is now working. See fixed html below:

       <form [formGroup]="rackAverageForms[row.id]">
          <ng-container *ngIf="row.chosenDateRackAverage > 0">
            <md-input-container>
              <input [formControl]="rackAverageForms[row.id].controls.rackAverage" #rackAverage
                     formControlName="rackAverage"
                     (keydown.tab)="validateRackAverage(rackAverage,row.id)" class="numeric-field" [numberOnly]="true"
                     mdInput value="{{row.chosenDateRackAverage | currency:'USD':true:'1.4-4'}}" >
              <md-error><strong>{{formErrors[row.id].rackAverage}}</strong></md-error>
            </md-input-container>
          </ng-container>
        </form>

answered Aug 31, 2017 at 16:04

reutbp

217 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular material table sort with formControl

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related