Platform: turning on runtimeChecks strictStateImmutability or strictActionImmutability throws errors input parameters

Created on 10 Jul 2019 · 5Comments · Source: ngrx/platform

I tried to turn on state and action immutability since it will be opt out in NGRX 9. The problem is that it is throwing errors on input parameters in my components. We are passing form groups around and we would like them to stay mutable so the parent holds all eventing control.

Minimal reproduction of the bug/regression with instructions:

I tried to re-produce with the StackBlitz, but I failed :(. Maybe it's my configuration.

Error produced:

_There are many of these. One for each control in the component._

These errors only show up with either strictStateImmutability or strictActionImmutability is turned on. I am not using validators on any of the controls.

Parent Component:

_This component is used on many components that figure out what the form groups mean to them and pass them down_

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'names-protected-parent',
  template: `<names-protected-child [formGroup]="formGroup1"></names-protected-child>
  <names-protected-child [formGroup]="formGroup2"></names-protected-child>
  <names-protected-child [formGroup]="formGroup3"></names-protected-child>`
})
export class NamesProtectedParentComponent {
  @Input() formGroup1: FormGroup;
  @Input() formGroup2: FormGroup;
  @Input() formGroup3: FormGroup;

  constructor() {}
}

Child Component:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

import { ICustomControlGroup } from './models/custom-control-group';

@Component({
  selector: 'names-protected-child',
  templateUrl: './names-protected-child.component.html'
})
export class NamesProtectedChildComponent implements OnInit {
  @Input() formGroup: FormGroup;
  public controls: INamesProtectedControlGroup | any;

  constructor() {}

  ngOnInit() {
    this.controls = this.formGroup.controls;
  }
}

```html

{{ controls.customTextbox.primitiveAttributes.extendedProperties.label }}

### app.module.ts
```typescript
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppStoreModule,
    AppRoutingModule
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-store.module.ts

const appReducers = {
  user: userReducer,
  ...
};
@NgModule({
  declarations: [],
  imports: [
    ...
    UserStoreModule,
    StoreModule.forRoot(appReducers, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true
      },
    }),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({
      name: 'my-app'
    }),
  ]
})
export class AppStoreModule { }

Expected behavior:

Turning on state and action immutability should not throw errors on Input parameters in components.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

 "dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@ng-bootstrap/ng-bootstrap": "^4.1.0",
    "@ngrx/effects": "^8.0.1",
    "@ngrx/store": "^8.0.1",
    "core-js": "^2.5.4",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.0.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "^8.0.3",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@babel/core": "^7.3.4",
    "@ngrx/schematics": "^8.0.1",
    "@ngrx/store-devtools": "^8.0.1",
    "@types/jest": "^24.0.11",
    "@types/node": "~8.9.4",
    "babel-loader": "^8.0.5",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "24.5.0",
    "jest-marbles": "^2.3.1",
    "jest-preset-angular": "7.0.1",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typemoq": "^2.1.0",
    "typescript": "~3.4.5"
  }

Other information:

I would be willing to submit a PR to fix this issue

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[ x ] No

Source

lslocum

All 5 comments

You will probably have to make a clone of your store state before binding it to the form.
Feel free to join the gitter channel and ping me if you need guidance.

timdeschryver on 10 Jul 2019

👎2

@timdeschryver It is not using the store. It is just the inputs in my component. That is the problem I tried cloning the form group input variable but that had it's own problems. and as I stated above, I don't want to create a new memory reference. I want the form group to be mutable.

lslocum on 10 Jul 2019

It would seem we are experiencing the same issue. We are not touching state.

@timdeschryver This feel prematurely closed instead of having a conversation when someone has obviously put the time in to provide detail and start a dialogue.

For the moment, our dev team has actually had to disable runtimeChecks because of this issue.

Interestingly enough, our timeframe is the same as @lslocum -- this is a recent introduction within the last few weeks. Prior to that everything was fine.

We are creating a new FormGroup via FormBuilder. Part of this form has a datepicker from @angular/material and uses the MatMomentDateModule.

When we call patchValue() and add _any_ object (from state or not), we get a similar extensibility exception for dates. Switching off runtime checks removes the error.

Our only change was updating NgRx.