angular-redux / store

Angular 2+ bindings for Redux
MIT License
1.34k stars 205 forks source link

ngModel is changing store values #540

Open rs200x opened 5 years ago

rs200x commented 5 years ago

This is a...

What toolchain are you using for transpilation/bundling?

Environment

NodeJS Version: Typescript Version: 2.7.2 Angular Version: 6 @angular-redux/store version: 9.0.0 @angular/cli version: (if applicable) 6.1.2 OS: Win10

Link to repo showing the issus

(optional, but helps a lot)

Expected Behaviour:

Value binding with ngModel should not change object value in store.

Actual Behaviour:

I have a selection which is getting me an array from store

export class Feature {
    public type: number;
    public value: number;
}

nodeFeatures$: Observable<Feature[]>;
this.nodeFeatures$ = this.store.select<Feature[]>(['nodes', 'id', 'features']);

This is bound to a mat-table where the value cell is defined as input to allow the user to directly change the value.

    <table #table mat-table [dataSource]="nodeFeatures$" class="table-hover">

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element">
            <input class="form-control" type="number" [(ngModel)]="element.value">
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

Right now the view containing the table is not defined as form. There will be a save/submit button where I want to get all the feature items with changed values. While implementing the logic for comparing the items ob the observable against the items in the store I realized that values already got updated without any change notification.

Is this by design and the usage of ngModel or am I doing something wrong? I would have expected that the store.select always returns me a copy.