Comments (7)
Can you please try it locally in the repo playground/spec?
from reactive-forms.
I mean after your fix :)
from reactive-forms.
I'm not sure I follow.
from reactive-forms.
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.
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.
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.
I created a PR with both fixes + some playground improvements to validate my fixes.
from reactive-forms.
Related Issues (20)
- Upgrade is hard and refactoring too big HOT 1
- Failed to load plugin: Cannot find module 'requireIndex' HOT 8
- Support RxJS v7 HOT 1
- Support Angular 13.0.3
- Consider using something like `fast-deep-equal` to check if errors are equal in `controlErrorChanges$`
- markAllAsDirty not doing anything HOT 3
- Dealing with subscriptions from disabledWhile() HOT 1
- Broken link in documentation
- valueChanges - emit values only when form gets updated by new values HOT 1
- Unable to set a Date type HOT 2
- Angualr 14
- Incorrect get method typings
- Missing get method model typings
- FormArray of array element does not work properly HOT 1
- Integrate with Angular 14 typed forms HOT 5
- Support for Angular 14 HOT 1
- FormArray value types incorrect for complex models and few smaller fixes in other method typing HOT 2
- Feature Request: Only emit values if status is valid
- New function getValidator
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactive-forms.