[Form] StaticInjectorError(AppModule)[ConnectArray -> ConnectBase]

[greymind]

Error:

StaticInjectorError(AppModule)[ConnectArray -> ConnectBase]: 
  StaticInjectorError(Platform: core)[ConnectArray -> ConnectBase]: 
    NullInjectorError: No provider for ConnectBase!

Source:

  <ng-template connectArray
               let-index
               connectArrayOf="formTables">
    <div [ngModelGroup]="index">
      <input name="name"
             type="text"
             ngControl
             ngModel />
    </div>
  </ng-template>

The error occurred after I added the above code to map an array in redux to the form here. Started the project 2 days ago with latest versions of things. Angular 6, et. al. Please advise!

Related issues:

• StaticInjectorError(AppModule)[ConnectArray -> ConnectBase] form#54
• Angular 5 - StaticInjectorError[ActionsSubject]: Function/Class not supported ngrx/platform#549

Environment:

    "@angular-redux/form": "^9.0.1",
    "@angular-redux/router": "^9.0.0",
    "@angular-redux/store": "^9.0.0",
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "flux-standard-action": "^2.0.3",
    "ramda": "^0.25.0",
    "redux": "^4.0.0",
    "redux-localstorage": "^0.4.1",
    "redux-observable": "^1.0.0",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"

Thanks!

[willwolfram18]

Any updates on this?? It's rather disappointing that over 6 months after this was reported it's still happening with no suggested work around, ETA on a fix, or even acknowledgment from the team running the angular-redux project.

[smithad15]

Unfortunately ConnectArray in its current state does need some love. I would be happy to help if someone can create a reproduction on StackBlitz or similar.

[willwolfram18]

Easiest repro is honestly the sample in the angular-redux/form README.md (which coincidentally has a syntax error itself specifically it should have ng-template as opposed to template).

Repro is available here: https://stackblitz.com/edit/angular-redux-connectarray-repro

[ama-joel-kravets]

We found a solution to this issue but it requires overriding how the ConnectArray directive works. Here is a fork of your example with the working changes: https://stackblitz.com/edit/angular-redux-connectarray-repro-r1qftj.

Here is what I did to fix the issue.

1. Created a subclass of the ConnectArray directive, also added it to app.module.ts directives.

   @Directive({
     selector: '[connectArrayFix]',
     providers: [{
   	provide: ControlContainer,
   	useExisting: forwardRef(() => ConnectArrayFix)
     }]
   })
   export class ConnectArrayFix extends ConnectArray {

2. Replaced how the ConnectBase instance is injected in the constructor.

   constructor(
   	//...
   	@Optional() @Host() @SkipSelf() parentConnect: Connect,
   	//...
     )

3. Modified the ngOnInit() to resolve some ngForm issues.

    ngOnInit(){    
   	//this.formDirective.addControl(<any> this);		
   	this.formDirective.form.registerControl(this.name, this.control);
   }  

4. Finally modify the app.component.html template.

   <ng-template connectArrayFix let-index connectArrayOf="dependents">
   	<ng-container [ngModelGroup]="'dependents'">
   	  <div [ngModelGroup]="index">
   		<input ngControl ngModel name="fullname" type="text" />
   		<select ngControl ngModel name="relationship">
   		  <option value="adopted">Adopted</option>
   		  <option value="biological">Biological child</option>
   		</select>
   	  </div>
   	</ng-container>
     </ng-template>

   Notice that I needed to add an additional [ngModelGroup]="'dependents'" for the fix to work.