Coder Social home page Coder Social logo

Comments (7)

NetanelBasal avatar NetanelBasal commented on June 11, 2024 1

Can you please try it locally in the repo playground/spec?

from reactive-forms.

NetanelBasal avatar NetanelBasal commented on June 11, 2024 1

I mean after your fix :)

from reactive-forms.

NetanelBasal avatar NetanelBasal commented on June 11, 2024

I'm not sure I follow.

from reactive-forms.

jogelin avatar jogelin commented on June 11, 2024

Sorry I encoded it a bit fast. Below are some details

First, you can find an example here: https://stackblitz.com/edit/angular-ivy-ktpmpb

The issue is that when we specify a Control type in a FormArray generic type (FormArray<T, Control>), the FormBuilder.array return a wrong type because it decides what will be the Control type based on

array<T, Control extends AbstractControl = T extends Record<any, any> ? FormGroup<ControlsOf<T>> : FormControl<T>>(controlsConfig: Control[], validatorOrOpts?: ConstructorParameters<typeof FormArray>[1], asyncValidator?: ConstructorParameters<typeof FormArray>[2]): FormArray<T, T extends Record<any, any> ? FormGroup<ControlsOf<T>> : FormControl<T>>;

In my use case, I decided to specify a FormControl as the Control type of my FormArray: FormArray<UserAddress, FormControl<UserAddress>> but the return value will not take into account my control type and use the dynamic type which is FormArray<UserAddress, FormGroup<ControlsOf<UserAddress>>>.

To fix this, I think we should put the Control type in the FormArray in the FormBuild like:

  array<T, Control extends AbstractControl = T extends Record<any, any> ? FormGroup<ControlsOf<T>> : FormControl<T>>(
 ...
    // CURRENT
    return new FormArray<T>(controls, validatorOrOpts, asyncValidator); // <-- here the Control should be provided
    
    // FIX
    return new FormArray<T, Control>(controls, validatorOrOpts, asyncValidator); // <-- here the Control should be provided
  }

from reactive-forms.

jogelin avatar jogelin commented on June 11, 2024

Issue related:

ValuesOf does not work when we specify a Control type in a FormArray.

here is an example based on the previous comment: https://stackblitz.com/edit/angular-ivy-w1eyiv?file=src%2Fapp%2Fapp.component.ts

So to solve my previous issue, instead of using a FormBuilder I can use new FormArray([]).

However, the ValuesOf<UserForm> doesn't match my FormArray type because I specified the Control generic type.

So NonUndefined<T[K]> extends FormArray<infer R> doesn't not match FormArray<UserAddress, FormControl<UserAdress>

But it works if I just put FormArray<UserAddress>. But Then I come back to the first issue where a FormGroup is used instead of a FormControl

from reactive-forms.

jogelin avatar jogelin commented on June 11, 2024

Can you please try it locally in the repo playground/spec?

As requested, same issue in your repo playground: https://github.com/jogelin/reactive-forms/tree/issue-137

from reactive-forms.

jogelin avatar jogelin commented on June 11, 2024

I created a PR with both fixes + some playground improvements to validate my fixes.

#138

from reactive-forms.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.