A typed form array of typed from groups

[jmclagniez]

I'm trying to create a typed form array of typed form groups. I have not found any related example. Is it possible to do so ?

My test :

form = typedFormGroup<PartyForm, TypedArraysIn<PartyForm, 'invitees'>>({
    event: typedFormControl(eventDefault()),
    invitees: typedFormArray<PersonContact[]>([
      typedFormGroup<PersonContact>({
        name: typedFormControl(),
        email: typedFormControl()
      })
    ])
  })
...

this.form.controls.invitees.at(0) // Return type is TypedFormControl<PersonContact>  and not TypedFromGroup<PersonContact> 

[gparlakov]

Hi, @jmclagniez. Thanks for the feedback.

It looks like you found a limitation of the library. Let me experiment a bit and get back to you.

As I understand you'd expect to get a Array<TypedFormGroup> in controls property - yes?

[jmclagniez]

Hi, thanks for this library!

Exactly, I would like to have a typedFormGroup and have access to my class attributes of type typedFromControl.

The context is that my form is instantiated in an upper level

[gparlakov]

@jmclagniez

Hi, thanks for this library!

I'm glad you liked it :)

As I understand, you can not afford to create a Component for the top-level form and a Component for the invitee, which is what I would recommend. Yes?

If so read on:

So it turns out it is possible - I've created a branch - see these lines

Impractical

It also turns out to be a royal pain, because

• the type information needs to be carried from the top TypedArraysIn -> TypedControlsIn -> TypedFormArray i.e. top-down i.e. can't be inferred from the used values
• this change only solves this particular case of nesting specifically a (1)Group in an Array and not a (2) Group in a Group or (3)Array in Array or worse yet (4)Array in Group in Array and all permutations of 3 level nesting and then 4 level deep - you get the picture.

Looks like I'm not able (or Typescript is not) to make a recursive type pattern. :( ? Which means I need to do the types manually and it's a lot of work. It occurred to me that there is another way, which keeps the library simpler and sticks to a more tiered approach of handling nested forms.

Workaround (kinda*)

This is what I would suggest:

1. We can use TypedFormGroup in methods where TypedFormControl is wanted (since one extends the other).
2. We can create the groups and control them and let the TypedFormArray push/insert/setControl

function createEmptyGroup() {
  return typedFormGroup<PersonContact>({
    name: typedFormControl(),
    email: typedFormControl(),
  });
}

const invitee1 = createEmptyGroup();
const invitee2 = createEmptyGroup();
const invitee3 = createEmptyGroup();

const formDN = typedFormGroup<PartyForm, TypedArraysIn<PartyForm, 'invitees', 'invitees'>>({
  event: typedFormControl(eventDefault()),
  invitees: typedFormArray<PersonContact[], PersonContact, 'group'>([invitee1, invitee2]),
});
formDN.push(invitee3)

OR

function createEmptyGroup() {
  return typedFormGroup<PersonContact>({
    name: typedFormControl(),
    email: typedFormControl(),
  });
}

const invitees: TypedFormGroup<PersonContact>[] = [];
invitees.push(createEmptyGroup());
invitees.push(createEmptyGroup());

const formDN = typedFormGroup<PartyForm, TypedArraysIn<PartyForm, 'invitees', 'invitees'>>({
  event: typedFormControl(eventDefault()),
  invitees: typedFormArray<PersonContact[], PersonContact, 'group'>(invitees),
});

formDN.push(createEmptyGroup())

---

*kinda not a workaround, rather segregating the tiers of your form cake