ngx-formly
ngx-formly copied to clipboard
ngx-formly
Formly 6 Preset with multiple fields
Hi, is possible to have other example of Formly 6 Presets with multiple fields? The example from the guide explain to configure only one select like this:
getConfiguration(): FormlyFieldConfig {
return {
key: 'salutation',
type: 'select',
props: {
label: 'Salutation',
placeholder: 'Please Select',
options: this.salutationOptions.map((salutation) => ({ label: salutation, value: salutation })),
},
};
}
I would configure an array of FormlyFieldConfig and not in the AppModule. Is this possible now ? Thank you so much for the incredible framework!
Hi @cagi23, If I understand you correctly, you want to define a preset with multiple fields? We thought about it but decided against it in #3208. Let me know if that answers your question :)
Hi @MaxKless, I'm using https://formly.dev/docs/guide/formly-field-presets/ but I'm not able to configure an array of fields only one single field because the getConfiguration() function return "FormlyFieldConfig" instead I need FormlyFieldConfig[]. Also I need more example of Formly 6's presets in order to better understand the feature. Thank you!
Yes that's not supported at the moment because it would add another layer of complexity to the API that we wanted to avoid. You can define a single field with a field group property to group fields if you'd like!
If I'm not wrong I think its possible, we decide to let users do the merge by themselves for a such case. So in order to add render multi-fields just use fieldGroup.
@cagi23 did you check our example https://formly.dev/docs/examples/other/presets?
Sure, I check your example but I'm a little confused for how implement my reusable set of components. Specifically, I want to implement something like this :
export class AdressPresetProvider {
constructor(@Inject(ADDRESS_OPTIONS) private adressOptions: string[]) {}
getConfiguration(): FieldGroup {
return [
{
key: 'province',
type: 'select',
props: {
label: 'Province',
placeholder: 'Please Select',
options: this.adressOptions.map((adress) => ({ label: address, value: address})),
},
},
{
key: 'city',
type: 'select',
props: {
label: 'City',
placeholder: 'Please Select',
options: this.adressOptions.map((city) => ({ label: city, value: city})),
},
}
}
}
}
If is not possible I need to merge myself with fieldGroup.
Just return a regular field and it should work:
export class AdressPresetProvider {
constructor(@Inject(ADDRESS_OPTIONS) private adressOptions: string[]) {}
getConfiguration(): FormlyFieldConfig {
return {
fieldGroup: [
{ key: 'province', ... },
{ key: 'city', ... },
]
}
}
}
Thank you for the response @aitboudad , but seems that does not works:
import { Inject, Injectable, InjectionToken } from '@angular/core';
import { ConfigOption, FormlyFieldConfig } from '@ngx-formly/core';
export const SALUTATION_OPTIONS = new InjectionToken<string[]>('SALUTATION_OPTIONS');
@Injectable()
export class SalutationPresetProvider {
constructor(@Inject(SALUTATION_OPTIONS) private salutationOptions: string[]) {}
getConfiguration(): FormlyFieldConfig {
return {
fieldGroup:
[
{
key: 'salutation',
type: 'select',
props: {
label: 'Salutation Test',
placeholder: 'Please Select',
options: this.salutationOptions.map((salutation) => ({ label: salutation, value: salutation })),
}
}
]
,
};
}
}
export function registerSalutationPreset(salutationOptions: string[]): ConfigOption {
return {
presets: [
{
name: 'salutation',
config: new SalutationPresetProvider(salutationOptions),
},
],
};
}
if I insert a fieldGroup in the configuration the select is not showed anymore.
By default when fieldGroup is present, the default value is replaced but anyway I see the needs. We'll try provide a fix in 6.1.
@MaxKless we need to pass the original field to getConfiguration() function, in order to let users do the merge, here is an example:
export class AdressPresetProvider {
constructor(@Inject(ADDRESS_OPTIONS) private adressOptions: string[]) {}
getConfiguration(f: FormlyFieldConfig): FormlyFieldConfig {
return {
fieldGroup: [
{ key: 'province', ... },
{ key: 'city', ... },
...f.fieldGroup,
]
}
}
}
I've made a PR that should address your needs. You can now use fields in getConfiguration to do whatever you want, for example merging a fieldGroup. Also wrote an example illustrating it.
@aitboudad @MaxKless do we have some update on this when will be merged? In upcoming major beta release maybe or?
