what if model has conditional properties?

[smorandi]

assume the following:

interface Model {
 validFrom: string,
  validTo?: string
}

so i tried to do the following and ran into multiple issues i am not sure how to deal with, or rather what could be done about it for a proper solution?

interface Model {
  validFrom: string,
  validTo?: string
}

const factory = (initialModel: Model) => typedFormGroup<Model>({
  validFrom: typedFormControl(initialModel.validFrom),


  // does not work...?
  // validTo: typedFormControl(initialModel.validTo),

  // this works...
  validTo: typedFormControl<string | undefined>(initialModel.validTo),

});

const mfg = factory({validFrom: 'foo', validTo: 'bar'});

// getting error on controls.validTo, since it can be undefined???
combineLatest([mfg.controls.validFrom.valueChanges, mfg.controls.validTo.valueChanges]).pipe(
  //something...
).subscribe();

can you tell me if i am doing something wrong?

[gparlakov]

I guess it can be created with a form control instance for Id without a value (undefined).

…

On Thu, Oct 28, 2021, 14:36 Stefano Morandi ***@***.***> wrote: assume the following: interface Model { id? : string name: string } i am building it using a a typedFormGroup(), but i struggle when i try to use the typedFormControl() method on the id. can you give me a hint? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#64>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2SEV3PHJZF2WCWCCLLWDTUJE7T5ANCNFSM5G4U6Y6Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[smorandi]

well yes, but the point is that a validTo controller is always available, it should never be undefined. maybe when creating the types they should omit any conditionals first.

like this maybe https://www.typescriptlang.org/docs/handbook/2/mapped-types.html

removing the optional types for when you create a type of the model mapped to the individual controllers…

// Removes 'optional' attributes from a type's properties
type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property];
};

just an idea though…

[gparlakov]

Hey, @smorandi it seems I've misunderstood your initial concern.

If I understand, the validTo property of the form.controls should not be undefined if we've defined it in the typedFormGroup function call - right? The following should not break:

It seems there is a utility type coming from TS itself that can help: Required:

interface ModelWithPartial {
  validFrom: string;
  validTo?: string;
}

// const factory = (initialModel: ModelWithPartial) => typedFormGroup<ModelWithPartial>({
const factory = (initialModel: ModelWithPartial) => typedFormGroup<Required<ModelWithPartial>>({
  validFrom: typedFormControl(initialModel.validFrom),


  // does not work...?
  // validTo: typedFormControl(initialModel.validTo),

  // this works...
  validTo: typedFormControl(initialModel.validTo),

});

const mfg = factory({validFrom: 'foo', validTo: 'bar'});

// getting error on controls.validTo, since it can be undefined???
// not getting an error any more
mfg.controls.validTo.valueChanges.subscribe(v => v?.includes('t'));

---

old, misunderstood-question answer:

Hey, @smorandi that looks like it might remove the optional properties in general. So when you try to actually use them in the form (or another form) you'll not get the strong-type.

Edit: I looked into that type and it does not remove the properties, it removes the optionality:

Still this -? trick was new to me so - thanks 👍🏻

My understanding is that the idea is to have the typedFormGroup function's parameter skip some of the formControl-s in its initializer, like so:

That would cause the issue I mentioned above - wherever one uses the optional props (like names and age in the above case) they'd have to check for null/undefined, which might be awkward - especially in a template.

[gparlakov]

@smorandi closing this issue. Let me know if there's more I can do to help.

[smorandi]

oh wow, thx, did not expect anything 😂 but great!

well never mind, i guess with Angular 14 theres a new approach coming for more strongly typed forms it anyway. guess i will have a look once its out.