Unable to set a Date type

[Hypenate]

Is this a regression?

No

Description

I'm unable to create a FormGroup with a type that contains a Date.

export type Person = {
  id: string,
  birthday: Date
}

  private createForm() {
    // Type 'Date' is not assignable to type 'ControlsOf<Date>'.
    const form1 = new FormGroup<ControlsOf<Person>>({
      id: new FormControl<Person["id"]>(),
      birthday: new FormGroup<Person["birthday"]>(new Date)
    })

    // Type 'FormGroup<Date>' is not assignable to type 'FormGroup<ControlsOf<Date>>'. 
    const form2 = new FormGroup<ControlsOf<Person>>({
      id: new FormControl<Person["id"]>(),
      birthday: new FormGroup<Date>(new Date)
    })

    // Argument of type 'Date' is not assignable to parameter of type 'ControlsOf '.
    const form3 = new FormGroup<ControlsOf<Person>>({
      id: new FormControl<Person["id"]>(),
      birthday: new FormGroup<ControlsOf<Person["birthday"]>>(new Date)
    })

    // Argument of type 'Date' is not assignable to parameter of type 'ControlsOf '.
    const form4 = new FormGroup<ControlsOf<Person>>({
      id: new FormControl<Person["id"]>(),
      birthday: new FormGroup<ControlsOf<Date>>(new Date)
    })

    // Conversion of type 'Date' to type 'ControlsOf<Date>' may be a mistake.
    const form5 = new FormGroup<ControlsOf<Person>>({
      id: new FormControl<Person["id"]>(),
      birthday: new FormGroup<ControlsOf<Date>>(new Date as ControlsOf<Date>)
    })
  }
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular: 13.2.4
"@ngneat/reactive-forms": "4.0.4",

Anything else?

No response

Do you want to create a pull request?

No

[NetanelBasal]

https://github.com/ngneat/reactive-forms/issues/109#issuecomment-944007300

[Hypenate]

This indeed seems to work:

  export type Person = {
    id: string,
    birthday: FormControl<Date>;
  }

  const form3 = this.fb.group<Person>({
    id: 'id',
    birthday: this.fb.control(new Date)
  })

But it doesn't feel intuative. I need to update my type to something that doesn't reflect the 'reallity'.

If I update my type to:

  export type Person = {
    id: string,
    birthday: Date | string;
  }

Then this becomes valid again:

  const form1 = this.fb.group<ControlsOf<Person>>({
    id: new FormControl('id'),
    birthday: new FormControl(new Date())
  })

Which makes a lot more sense, but it's stange that the compiler does not complain about this 🤔