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
Add a FormlyFieldConfig builder that supports type safe creation of configs #2571
Comments
Similar concept requested in #1850 but issue was self closed after author worked out how to enforce keyOf for a given model. Suggests there may be other devs trying to create their own types for FormlyFieldConfigs already. |
Thanks, @aitboudad, for the label. Do you have any further thoughts on this issue or know anyone who would like to weigh in? Otherwise should I start work on the PR? |
Hi @StephenCooper, I'm aware of that issue and it'll be part of |
I put together an example of how type safe formly builder might work: Formly Builder |
I think its time to give this issue what it deserves :), the first step I think is to improve our JSON format: Step 11- {
key: 'name',
type: 'input',
ui: { label: 'Name' },
expressionProperties: {
'ui.disabled': 'model.disabled'
}
} 2- {
key: 'name',
type: 'input',
expressions: {
hide: 'model.disabled',
}
} 3- {
key: 'address',
group: [ ... ]
} 4- {
key: 'addresses',
array: { ... }
} let me know if there is more parts to improve! Step 2define helpers for each type, that supports type-safe. Step 3provide a builder as a sub-package |
@aitboudad I actually follow something like this In our internal wrapper.
I am on vacation atm but if you'd like when I get back I can show you what
I've done.
I also created a json-schema that tells options and I'm modifying it based
on type given in the config. From this we can generate TS typings.
…On Tue, May 18, 2021, 4:45 PM Abdellatif Ait boudad < ***@***.***> wrote:
I think its time to give this issue what it deserves :), the first step I
think is to improve our JSON format:
Step 1
1- templateOptions => ui (or props 🤔):
{
key: 'name',
type: 'input',
ui: { label: 'Name' },
expressionProperties: {
'ui.disabled': 'model.disabled'
}
}
2- expressionProperties|hideExpression => expressions:
{
key: 'name',
type: 'input',
expressions: {
hide: 'model.disabled',
}
}
3- fieldGroup => group:
{
key: 'address',
group: [ ... ]
}
4- fieldArray => array:
{
key: 'addresses',
array: { ... }
}
Step 2
define helpers for each type, that supports type-safe.
Step 3
provide a builder as a sub-package
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#2571 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADB4XNJSXW3D5V7EHIS5GWTTOLUY3ANCNFSM4TC5RLKA>
.
|
@aitboudad I agree with improving the JSON format as sometimes I get confused as the format is trying to support Field, Group and Array formats. This is part of the reason why I wrote a builder that I've been using in my own application to help with this. Example can be found here: Formly Builder Example Would be happy to help on this. |
Probably similar to what @kenisteward described I have been linking the For example a DatePicker control supports minDate and maxDate. export interface FormlyDateTemplateOptions extends FormlyTemplateOptions {
minDate?: Date;
maxDate?: Date;
} So being able to provide a custom type to represent the templateOptions / ui properties would be great. |
Moved the Step 1 to #2853 @kenisteward Sure @StephenCooper we'll reach that in Step 2, I've done a similar approach recently I'll share my work once done with step1 :) @nthonymiller the builder you've created is close to what I've in mind, I'll let you know once reached that part. |
I am creating Type safe builder also, my idea is similar with @StephenCooper. But the builder is not
Do we have any ideas to make the builder support Injectable and type safe together without factory? |
Type safe config
I am working in Typescript with Formly and after setting up many forms I have created custom FormlyFieldConfig builder methods for the common input types. For, example an input, a number input, a date picker and so on.
As we often have a Typescript interface or class representing our form model I looked to see if it was possible to achieve type safety with my config builders. I found that this is possible and it makes for a fantastic developer experience. Retrofitting this type safety highlighted some typos in
key
values during development.I have a live example of the type safe FormlyFieldConfig builder on stackblitz here.
https://stackblitz.com/edit/type-safe-formly-builder-interface?file=src/app/formly-builder.ts
Typing
key
property of FormlyFieldConfigThe code in
formly-builder
is what I am proposing to be added into formly to help others easily take advantage of type safe config builders.The core part is the following type definitions.
Creating a FormlyConfigBuilder class
Using these we can then define the
FormlyConfigBuilder
class for a given Model. This can have a build method with two potential overloads. The first takes aFieldType
parameter which then enforces that the type checking for the key against the given model. We could also provide an overload that does not provide aFieldType
but this would only check that the key is a property of theModel
but would not check the type of that property.Alternative standalone builder function
Example use of FormlyConfigBuilder
Given the following interface we could then use our form builder as follows.
Using this builder we get smart auto complete of only the valid property from the FormModel when we set the type.
Expected use via extending FormlyConfigBuilder
With the
FormlyConfigBuilder
in place it is very easy to then create your own custom config builder as an extension of it. This can then be used to hide the explicit typing.This can then be used as follows
Benefits
Type checking of
key
values to avoid typos and copy and paste errors. Enables auto complete while setting up the form in IDEs which is a huge time saver.The base class and the type give developers a basis to build their own custom config builders in a type safe manner.
Current limitations
Does not currently support dot chained key values such as
address.house
for example.Happy to create a PR for this feature if you think it is worth while.
The text was updated successfully, but these errors were encountered: