ControlsOf doesn't work with optional fields
muuvmuuv opened this issue · comments
Is this a regression?
Yes
Description
I am migrating our current form service to the latest version of this lib and encounter an issue with strictNullChecks.
When I use new FormGroup({} as ControlsOf<T>) where T is a Model defined in a Component, it seems it cannot recognize it properly.
I bet I am just missing something but since it is experimental, I thought it could also be a bug in ControlOf, I tried some different things without it, but nothing works 100%.
I am willed to contribute, but atm I have no clue where to start really. Everything seems right, expect the part where it tries to type to an Observable (see error below).
Please provide a link to a minimal reproduction of the bug
https://codesandbox.io/s/form-ngneat-1v2hy?file=/src/app/app.component.ts
Please provide the exception or error you saw
No overload matches this call.
Overload 1 of 2, '(valueOrObservable: Observable<ValuesOf<ControlsOf<FormModel>>>, options?: Object | undefined): Subscription', gave the following error.
Argument of type '{ firstname: string | undefined; lastname: string | undefined; username: string; gender: Gender | undefined; }' is not assignable to parameter of type 'Observable<ValuesOf<ControlsOf<FormModel>>>'.
Object literal may only specify known properties, and 'firstname' does not exist in type 'Observable<ValuesOf<ControlsOf<FormModel>>>'.ts(2769)
Please provide the environment you discovered this bug in
No response
Anything else?
No response
Do you want to create a pull request?
Yes
I don't see any error in codesandbox
I see one right here: https://codesandbox.io/s/form-ngneat-1v2hy?file=/src/app/app.component.ts:1003-1035 🤔
I see the error, but I don't know what's wrong with your sandbox. Would you please reproduce it in this repo? You can use the playground or in a plain spec file. Would you please keep it minimal?
As you can see it works fine if we use it directly:
Moreover this code works fine:
So I think it's something else in your code.
I think I found it. Someone told me that ? is not equal to undefined (didn't know that before) and because it tries to look for undefined, every ? does never seem to be a choice in the selection. I have updated my Sandbox to the most minimal REPL. Including your Class example including ?. Removing the ? solved it.
Another strange thing happens after I "fix" everything. I added a helper function "setDisabled" which can disable or enable a control, but keyof T does not seem to be a choice for group.get(0) either or do I miss something here? I have seen there is a ValuesOf helper, but I couldn't get it working with it.
Furthermore, I really hope this is a simple mistake of mine, but I struggle with it a few days now and really want it to work. Thanks for your time, Netanel!
No problem. I'm closing this issue for now.
Oh, I still think it's a bug because FormGroup does not seem to recognize an interface value with ? or allow(?) it. I just modified the main.ts file, so you can see it better: https://codesandbox.io/s/form-ngneat-1v2hy?file=/src/main.ts
Created an even smaller example: https://codesandbox.io/s/quirky-feistel-oq9g7?file=/src/index.ts
@muuvmuuv you can try the latest version. See the docs for the gotchas.
@NetanelBasal that works, thanks :)