typed-c-13.ts

interface Profile {
  firstName: string;
  lastName: string;
  address: {
    street: string;
    city: string
  }
}

const profileForm = new FormGroup<ControlsOf<Profile>>({
  firstName: new FormControl('', { nonNullable: true }),
  lastName: new FormControl('', { nonNullable: true }),
  address: new FormGroup({
    street: new FormControl('', { nonNullable: true }),
    city: new FormControl('', { nonNullable: true })
  })
});

export type ControlsOf<T extends Record<string, any>> = {
  [K in keyof T]: T[K] extends Record<any, any>
  ? FormGroup<ControlsOf<T[K]>>
  : FormControl<T[K]>;
};

Thanks for sharing this ControlsOf type.
Do you know a way to make it work if the Profile interface had an additional optional control state?

So like this:

interface Profile {
  firstName: string;
  lastName: string;
  address: {
    street: string;
    city: string;
    state?: string | null
  }
}

Thanks for the contribution. I do very well with most forms

but if I need one of the fields to be a FormArray? how would it be?

Thanks for sharing this ControlsOf type. Do you know a way to make it work if the Profile interface had an additional optional control state?

So like this:

interface Profile {
  firstName: string;
  lastName: string;
  address: {
    street: string;
    city: string;
    state?: string | null
  }
}

Has anyone found a solution? How to use ControlsOf(...) with optional controls?