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

Feature: Creating form based on model utilities #513

Open
Harpush opened this issue Oct 4, 2024 · 0 comments
Open

Feature: Creating form based on model utilities #513

Harpush opened this issue Oct 4, 2024 · 0 comments

Comments

@Harpush
Copy link

Harpush commented Oct 4, 2024

The suggestion is built from two parts:

Part 1 - Model to FormModel type:

So after some experiments with creating such type I had a nice idea I even posted on an angular issue (angular/angular#46864 (comment)) concerning model to form model.
The idea allows to do:

interface Test {
  group: { name: 'a' | 'b'; aliases: string[] };
  startDate: Date;
  extra: Record<string, { abc: boolean }>;
}

const testFormSchema = {
  group: { name: 'control', aliases: ['control'] },
  startDate: 'control',
  extra: { [formRecordSchema]: { abc: 'control' } }
} satisfies FormSchema<Test>;

type TestFormControls = ToFormGroupControls<Test, typeof testFormSchema>;

this.formBuilder.group<TestFormControls>(...);

This is not perfect but the best I could think of and gives in most cases (excluding discriminated union groups) a fully typed and scalable solution.

Part 2 - NoInferFormBuilder

Once I had the type from above and started working with it I encountered multiple issues with the form builder types and generally with typescript and forms. The solution I came up with is a new alternative to form builder using the NoInfer typescript type. I also posted a suggestion in the angular repo for it (angular/angular#58001).
The main idea is to be a drop in replacement for form builder when you are building a form with an already known form type. In that case you want typescript to infer only from the return type.
There are of course caveats like missing discriminate union case inference - but those are better than the shortcomings of not having the NoInfer builder.

Conclusion

As I don't know if it will be accepted by the angular team - I think here is a good place to add it for anyone that wants it as it makes building forms much much easier in cases you have an interface already.
Even in cases you don't have an interface - I find it easier to build my form type using regular typescript interfaces and then build the form from it as the auto inference of form types isn't always easy to use.

The implementation isn't complete but here is a stackblitz showing usage of both parts and a comparison between FormBuilder and NoInferFormBuilder: https://stackblitz.com/edit/stackblitz-starters-me8z6o?file=src%2Fmain.ts

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

No branches or pull requests

1 participant