Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pushing FormGroup to a strongly typed FormArray throws a compilation error #50

Closed
Jobu08 opened this issue Oct 9, 2020 · 9 comments
Closed

Comments

@Jobu08
Copy link

Jobu08 commented Oct 9, 2020

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
Copy link
Member

Can you try this:

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

@Jobu08
Copy link
Author

Jobu08 commented Oct 9, 2020

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

@NetanelBasal
Copy link
Member

So what do you mean by saying "works"?

@Jobu08
Copy link
Author

Jobu08 commented Oct 9, 2020

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

@NetanelBasal
Copy link
Member

So it's OK now with my solution?

@Jobu08
Copy link
Author

Jobu08 commented Oct 9, 2020

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
Copy link
Member

@danzrou when you can, please check the FormBuilder.

@danzrou
Copy link
Collaborator

danzrou commented Oct 22, 2020

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
Copy link
Author

Jobu08 commented Oct 22, 2020

Works with latest package. Thx guys

@Jobu08 Jobu08 closed this as completed Oct 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants