fix(controlsOf): allow using optional fields

Optional fields will only work with top-level values, and will not work with `FormGroup`:

```ts
interface User {
  name?: string;
  foo?: string[];
  // 👇🏻 will not work
  nested?: {
    id: string;
  };
}
```

Fixes #111

README.md

@@ -118,8 +118,9 @@ const profileForm = new FormGroup<ControlsOf<Profile>>({
  })
 });
 ```
+#### Gotchas
 
-Note that when using `array` types, it'll automatically infer it as `FormArray`. If you need a `FormControl`, you must set it within your interface explicitly:
+- When using `array` types, it'll automatically infer it as `FormArray`. If you need a `FormControl`, you must set it within your interface explicitly:
 
 ```ts
 interface User {
@@ -129,6 +130,19 @@ interface User {
 }
 ```
 
+- Optional fields will only work with top-level values, and will not work with `FormGroup`:
+
+```ts
+interface User {
+ name?: string;
+ foo?: string[]; 
+ // 👇🏻 will not work 
+ nested?: {
+ id: string;
+ };
+}
+```
+
 ## Control Queries
 
 ### `value$`

libs/reactive-forms/src/lib/form-group.spec.ts

@@ -560,4 +560,37 @@ describe('ControlsOf', () => {
 
  })
 
+
+ it('should work with optional fields', () => {
+ type Foo = {
+ name?: string;
+ foo: string;
+ baz: null | string;
+ arr?: string[];
+ nested: {
+ id: string
+ }
+ }
+
+ const group = new FormGroup<ControlsOf<Foo>>({
+ foo: new FormControl(''),
+ name: new FormControl(''),
+ baz: new FormControl(null),
+ arr: new FormArray([]),
+ nested: new FormGroup({
+ id: new FormControl('')
+ })
+ })
+
+ // @ts-expect-error - should be a string
+ group.get('name')?.patchValue(1);
+
+ expectTypeOf(group.get('name')).toEqualTypeOf<FormControl<string | undefined> | undefined>();
+
+ expectTypeOf(group.value.name).toEqualTypeOf<string | undefined>();
+ expectTypeOf(group.value.arr).toEqualTypeOf<string[] | undefined>();
+ expectTypeOf(group.value.baz).toEqualTypeOf<string | null>();
+ expectTypeOf(group.value.nested).toEqualTypeOf<{ id: string }>();
+ })
+
 });

libs/reactive-forms/src/lib/types.ts

@@ -3,21 +3,23 @@ import { FormControl } from './form-control';
 import { FormArray } from './form-array';
 import { AbstractControl } from '@angular/forms';
 
+type NonUndefined<T> = T extends undefined ? never : T;
+
 // This type is **Experimental** 
 export type ControlsOf<T extends Record<string, any>> = {
- [K in keyof T]: T[K] extends AbstractControl ? T[K] : T[K] extends (infer R)[]
+ [K in keyof T]: NonUndefined<T[K]> extends AbstractControl ? T[K] : NonUndefined<T[K]> extends (infer R)[]
  ? FormArray<R>
- : T[K] extends Record<any, any>
+ : NonUndefined<T[K]> extends Record<any, any>
  ? FormGroup<ControlsOf<T[K]>>
  : FormControl<T[K]>;
 };
 
 export type ValuesOf<T extends ControlsOf<any>> = {
- [K in keyof T]: T[K] extends FormControl<infer R>
+ [K in keyof T]: NonUndefined<T[K]> extends FormControl<infer R>
  ? R
- : T[K] extends FormGroup<infer R>
+ : NonUndefined<T[K]> extends FormGroup<infer R>
  ? ValuesOf<R>
- : T[K] extends FormArray<infer R> ? R[] : T[K];
+ : NonUndefined<T[K]> extends FormArray<infer R> ? R[] : NonUndefined<T[K]>;
 };
 
 export type DeepPartial<T> = {