Does not work with reactive forms. Only works with template forms

[GenZodd]

This is a...

• feature request
• bug report
• usage question

What toolchain are you using for transpilation/bundling?

• @angular/cli
• Custom @ngTools/webpack
• Raw ngc
• SystemJS
• Rollup
• webpack

Environment

NodeJS Version: 6
Typescript Version: 2.2
Angular Version: 4
@angular-redux/store version: 6.2.0

Expected Behaviour:

I thought this would work with both reactive and template driven forms. When I set it up via a template driven forms it works. But when I try and add a reactive form to the page I get an error about "no provider for ngForms".

Is this going to/should support reactive forms?

<form [formGroup]="loginForm" connect="loginForm">
            <div class="form-group">
              <label class="center-block">Email</label>
              <input class="form-control" formControlName="email" />
            </div>
            <div class="form-group">
            <label for="password">Password</label>
            <input show-password class="form-control" id="password" type="password" formControlName="password">
          </div>
          </form>

private createForm() {
        this.loginForm = this.fb.group({ 
            email: ['', Validators.required],
            password: ['', Validators.required]
        });

Instead of the template approach found in the sample app (feedback form).

Actual Behaviour:

Returns ERROR Error: Uncaught (in promise): Error: No provider for NgForm!

[frederikaalund]

The problem occurs because NgForm is not declared on <form> components that use either the ngNoForm or formGroup attributes. The latter is the case here. See the CSS selectors for the ngForm directive for reference.

It can be trivially fixed by splitting the connect attribute into two:

// For template forms (with implicit NgForm)
@Directive({ selector: 'form[connect]:not([formGroup])' })
class ConnectTemplateDirective {
    constructor(protected form: NgForm, ...) { ... }
    ...
}

// For reactive forms (without implicit NgForm)
@Directive({ selector: 'form[connect][formGroup]' })
class ConnectReactiveDirective {
    @Input('formGroup') form;
    ...
}

I recommend using a base class to implement the common logic.

[JohannesHoppe]

Is a fix planned? Thanks for the hard work on angular-redux! 👍

[neilrussell6]

Can you provide an example of this selector (form[connect][formGroup]) being used in the html?

[JohannesHoppe]

In template driven world that's easy: <form [connect]="['personalInfo', 'myForm']">.
This issue is about reactive forms!

[neilrussell6]

Have you managed to implement the "For reactive forms " solution posted above by @frederikaalund ?
If so can you post your usage?

[JohannesHoppe]

Nope, I haven't tried. We switched to template-driven for the moment.

[frederikaalund]

I'd like to add that my fix is not a work-around. Is is one possible way to fix angular-redux/form itself.

[neilrussell6]

Ok cool, thanks for the clarification. Will wait for the fix.

[JohannesHoppe]

@frederikaalund Why don't you send a PR!? 👍

[frederikaalund]

@JohannesHoppe I would normally but I don't actually use @angular-redux/forms. I don't have a setup where I can quickly test my fix. Was a Plunker of the issue ever posted? That would make it a lot easier.

I actually use my own simple store directive that is bi-directional (changes from the store also goes into the form).

I ran into exactly the same issue as posted here while implementing my own directive. I just noticed that my fix also could be applied to @angular-redux/forms.

[GenZodd]

I took a shot at this but in trying to run the tests I now get this error.

ERROR in ./source/tests.entry.ts Module build failed: TypeError: Cannot set property 'babelOptions' of undefined at Object.ngcLoader (D:\GitHub\angular-redux\form\node_modules\@ngtools\webpack\src\loader.js:395:34) 12 06 2017 17:55:08.461:ERROR [karma]: { Error: no such file or directory at MemoryFileSystem.readFileSync (D:\GitHub\angular-redux\form\node_modules\memory-fs\lib\MemoryFileSystem.js:107:10) at MemoryFileSystem.(anonymous function) [as readFile] (D:\GitHub\angular-redux\form\node_modules\memory-fs\lib\MemoryFileSystem.js:300:34) at doRead (D:\GitHub\angular-redux\form\node_modules\karma-webpack\lib\karma-webpack.js:201:29) at Plugin.readFile (D:\GitHub\angular-redux\form\node_modules\karma-webpack\lib\karma-webpack.js:205:5) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9) code: 'ENOENT', errno: 34, message: 'no such file or directory', path: '/_karma_webpack_/source/tests.entry.ts' }

Not sure how to resolve.

Update....I get this same error with the based forked repo as well.

[GenZodd]

Ok have this working locally (minus the test still for some reason). Have it broken apart and template approach is all working. However, I can't get reactive to work still as I get this error.
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'constructor' of undefined TypeError: Cannot read property 'constructor' of undefined

Pretty sure this has to do with it not finding the form to get it set up. My HTML looks like this.
<form connect="loginForm" [formGroup]="heroForm" novalidate>

I have tried this:
<form connect="loginForm" formGroup="heroForm" novalidate>

That gets me past the constructor error but then, of course, angular errors because it can't bind its validators. Can anyone point out what I am missing?

Update:
Actually, I think have this solved and I am close. The resetState method needs a bit of an update for differences between ngForm and FormGroup controls.

[GenZodd]

PR has been submitted. Hopefully the group can review soon.