ControlsOf doesn't work with optional fields

[muuvmuuv]

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

[NetanelBasal]

I don't see any error in codesandbox

[muuvmuuv]

I see one right here: https://codesandbox.io/s/form-ngneat-1v2hy?file=/src/app/app.component.ts:1003-1035 🤔

[NetanelBasal]

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?

[NetanelBasal]

As you can see it works fine if we use it directly:

[NetanelBasal]

Moreover this code works fine:

So I think it's something else in your code.

[muuvmuuv]

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!

[NetanelBasal]

No problem. I'm closing this issue for now.

[muuvmuuv]

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

[NetanelBasal]

@muuvmuuv you can try the latest version. See the docs for the gotchas.

[muuvmuuv]

@NetanelBasal that works, thanks :)