Form will not update FormGroup after Redux state jump

This is a...

[x] bug report

What toolchain are you using for transpilation/bundling?

[x] @angular/cli

Environment

NodeJS Version: v6.11.1 Typescript Version: 2.4.2 Angular Version: 4.3.2 @angular-redux/store version 6.5.7: @angular/cli version: 1.4.0-rc.1 OS: Ubuntu 16.04

Link to repo `component` showing the issue

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

@Component({
  selector: 'app',
  template: `
    <form connect="forms" [formGroup]="myFormGroup">
      <input
        type="text"
        name="email"

        formControlName="email"
      />
    </form>
  `,
})
export class FormGenComponent {
  public myFormGroup: FormGroup;

  constructor() {
    this.myFormGroup = new FormGroup({
      email: new FormControl(),
    });
  }
}

Expected Behaviour:

I am using redux-devtools-extension to debug my actual store. There it is possible to go to a previous state at any time.

I want that this form updates when I change the state with the devtools (it works without the FormGroup though)

Actual Behaviour:

The input field does not change the value according to the store.

Stack Trace/Error Message:

None.

Additional Notes:

As soon as I am using the FormGroup I can't go back to a previous state. The paths in formControlName should be valid. I don't really get the documentation here. I am not sure if that is a bug, since it could be that my implementation is wrong.

I am now binding everything with ngModel by storing my form into my component:

this._storeSubscription = this._ngRedux
  .select()
  .subscribe(state => this.form = state.myForm);

So my new components look like this:

import { Component } from '@angular/core'
import { FormGroup, FormControl } from '@angular/forms';
import { NgRedux } from '@angular-redux/store';

@Component({
  selector: 'app',
  template: `
    <form connect="forms" [formGroup]="myFormGroup">
      <input
        type="text"
        name="email"
        [ngModel]="form['email']"
        ngControl

        formControlName="email"
      />
    </form>
  `,
})
export class FormGenComponent {
  public form = {};
  public myFormGroup: FormGroup;

  constructor(private _ngRedux: NgRedux) {
    this._storeSubscription = this._ngRedux
      .select()
      .subscribe(state => this.form = state.forms);

    this.myFormGroup = new FormGroup({
      email: new FormControl(),
    });
  }
}

I hope something like this will get a bit easier in version 7.0.0, would like to help though :+1:

angular-redux / form