Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use combo of Shallow and Normal types? #7

Open
NicolasMaas opened this issue Nov 5, 2024 · 1 comment
Open

How to use combo of Shallow and Normal types? #7

NicolasMaas opened this issue Nov 5, 2024 · 1 comment

Comments

@NicolasMaas
Copy link

I have the following type in my code:

export type ParentZone = {
  readonly id: string;
  readonly name: string;
}

export type ChildrenZone = {
  readonly id: string;
  readonly name: string;
}

export type Zone = {
  readonly parent = ParentZone[];
  readonly children = ChildrenZone[];
}

export type ZoneForm = AngularForm<Zone>;

Sorry for the poor creativity but in my code the two types are obviously different from each other. In this example, I want my form to be as this:

  • parent should be just a form control that is an array of parents (so the object is just in the control).
  • children should be a FormArray with a FormGroup with all FormControls for each property

Currently it's one way or the other. Is there a workaround for this or do you have a suggestion on how I could get the result I want?

@zjkipping
Copy link
Collaborator

Hmm this is an interesting scenario. This will probably require you to make your own type making use of the package's more granular types. Something like the below might work as a quick fix:

// raw types
export type ParentZone = {
  readonly id: string;
  readonly name: string;
}

export type ChildrenZone = {
  readonly id: string;
  readonly name: string;
}

export type Zone = {
  readonly parent: ParentZone[];
  readonly children: ChildrenZone[];
}
// form type(s)
export type ZoneForm = FormGroup<{
  parent: AngularFormArrayShallow<ParentZone[]>;
  children: AngularFormArray<ChildrenZone[]>;
}>;

You could also do something like the below example where you still use our types, but override/modify one of the properties that differs from the norm of the package type you use (shallow versus deep). This could be nice if your type/object you are recreating (like above) is rather large in terms of number of properties.

// form type(s)
type Modify<T, R> = Omit<T, keyof R> & R;

export type ZoneForm = Modify<AngularForm<Zone>, { parent: AngularFormArrayShallow<ParentZone[]> }>

Let me know if this doesn't help, happy to try and figure out additional paths if need be. I don't think the package types themselves need to change in this regard, but I am open to it if need be.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants