Pushing FormGroup to a strongly typed FormArray throws a compilation error

[Jobu08]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Following compilation error appears when pushing to typed FormArray

Argument of type 'FormGroup<Element, any>' is not assignable to parameter of type 'AbstractControl<Element>'.
  Types of property 'get' are incompatible.
    Type '{ <K1 extends "minimum" | "maximum">(path?: [K1] | undefined): AbstractControl<Element[K1]>; <K1 extends "minimum" | "maximum", K2 extends keyof Element[K1]>(path?: [...] | undefined): AbstractControl<...>; <K1 extends "minimum" | "maximum", K2 extends keyof Element[K1], K3 extends keyof Element[K1][K2]>(path?: [......' is not assignable to type '(path: string | (string | number)[]) => AbstractControl | null'.
      Types of parameters 'path' and 'path' are incompatible.
        Type 'string | (string | number)[]' is not assignable to type '[any] | undefined'.
          Type 'string' is not assignable to type '[any] | undefined'.ts(2345)

Expected behavior

Minimal reproduction of the problem with instructions

Consider following example:

import { Component } from "@angular/core";
import {
  AbstractControl,
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup
} from "@ngneat/reactive-forms";

interface Element {
  minimum: string;
  maximum: string;
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  elementsForm: FormArray<Element>;
  constructor(private formBuilder: FormBuilder) {
    this.elementsForm = formBuilder.array([]);
  }

  addElement() {
    const element = this.formBuilder.group<Element>({
      minimum: '',
      maximum: ''
    });
    this.elementsForm.push(element);
  }
}

this.elementsForm.push(element) causes described error.
I applied following fix:
this.elementsForm.push(element as AbstractControl<Element>) since push method accepts AbstractControl, but FormGroup extends NgFormGroup which doesn't accept generic types.

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[NetanelBasal]

Can you try this:

this.elementsForm = formBuilder.array<Element>([]);

[Jobu08]

That works, but doesn't change anything about the error.

[NetanelBasal]

So what do you mean by saying "works"?

[Jobu08]

Doesn't throw error and assigns empty array to FormArray. I assumed that you wanted to check some other similar scenario

[NetanelBasal]

So it's OK now with my solution?

[Jobu08]

No. I meant that your solution doesn't throw an error by itself, but the error I described is still there. Sry for confusion

[NetanelBasal]

@danzrou when you can, please check the FormBuilder.

[danzrou]

When providing the generic type on the array method the error is gone.

elementsForm: FormArray<Element>;

  constructor(private formBuilder: FormBuilder) {
    this.elementsForm = formBuilder.array<Element>([]);
  }

  addElement() {
    const element = this.formBuilder.group<Element>({
      minimum: '',
      maximum: ''
    });

    this.elementsForm.push(element);
  }

Please check in latest version.

[Jobu08]

Works with latest package. Thx guys