diff --git a/.changeset/scaffolder-form-context.md b/.changeset/scaffolder-form-context.md index 08295c6b85..9b0e19ebd0 100644 --- a/.changeset/scaffolder-form-context.md +++ b/.changeset/scaffolder-form-context.md @@ -6,8 +6,8 @@ Get data of other fields in Form from a custom field in template Scaffolder. following: ```tsx -const CustomFieldExtensionComponent(props: FieldExtensionComponentProps) => { - const { formContext } = props; +const CustomFieldExtensionComponent = (props: FieldExtensionComponentProps) => { + const { formData } = props.formContext; ... }; diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index 5fe3349285..afef2c3372 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -162,11 +162,15 @@ spec: ui:field: MyCustomExtension ``` -## Get data of other fields in Form from a Custom Field Extension +## Access Data from other Fields + +Custom fields extensions can read data from other fields in the form via the form context. This +is something that we discourage due to the coupling that it creates, but is sometimes still +the most sensible solution. ```tsx -const CustomFieldExtensionComponent(props: FieldExtensionComponentProps) => { - const { formContext } = props; +const CustomFieldExtensionComponent = (props: FieldExtensionComponentProps) => { + const { formData } = props.formContext; ... }; diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx index 8db409ed38..fb1de5f46d 100644 --- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx @@ -198,7 +198,7 @@ export const MultistepJsonForm = (props: Props) => { widgets={widgets} noHtml5Validate formData={formData} - formContext={formData} + formContext={{ formData }} onChange={onChange} onSubmit={e => { if (e.errors.length === 0) handleNext();