R
Refine

ask-any-question

Custom Component with FormItem

Llike-gold1/25/2023
❓ Issue I met I try to custom a component with Select & useSelect But it only works fine with origin Select , doesn't work at all with mine component ℹ️ info 1. import { Select, useSelect } from "@pankod/refine-antd"; 2. please check the pics
No description
No description
No description
Pplain-purple1/25/2023
Hey @劉哲宇, You can check out custom form controls components on Ant Design documentation: https://ant.design/components/form#components-form-demo-customized-form-controls
Llike-gold1/25/2023
@salihozdemir appreciate Umm..., I read it I've used ant design Form, and I know how to use them. . Just wondering, do Refine do some magic things on Form component in @pankod/refine-antd In past, I have to use Form.getFieldValues then set the defaultValue by myself But I found Refine doesn't do so.
Pplain-purple1/25/2023
refine just export the Form component without any magic. However, useForm provides some useful props to Form component. When i review your custom component, I didin't see value and onChange props. Form.Items pass these props to its child component. If you want to change your form values, you should handle these values on your custom component.
Llike-gold1/25/2023
I've resolved this these are what I did: 1. get form form formProps 2. pass form to mine component, 3. use form.setFieldValue onChange etc... by doing this, I can update form data correctly
Pplain-purple1/25/2023
Good solution, thank you for the share 🤙🏻 By the way, something caught my attention. You created custom component to format Select options. Good news, useSelect hook already support this so, you don't need to create a custom component for this. You can checkout this: https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#optionlabel-and-optionvalue All you have to do is as follows:
const { options } = useSelect({
resource: "your-resource",
optionLabel: "name",
optionValue: "id",
});
const { options } = useSelect({
resource: "your-resource",
optionLabel: "name",
optionValue: "id",
});
Llike-gold1/25/2023
OMG, really I did not notice Refine has optionLabel & optionValue There's no need to reinvent component Appreciate for kindly help 😀 -- BTW options is inside selectProps (as pic) so the example on website might be wrong
No description
Pplain-purple1/25/2023
Oops, you're right. We have decided to re-write all documents, we will fix them as soon as possible 🚀 Thanks for your feedback 🎉

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Mocking useTable with JestHey there - I'm trying to mock the output of useTable to check the behavior of a custom hook. Here idisplaying field level validation errors from the backendHi, My backend returns validation structured validation errors on post or put, with field level errCustom ID in tableHi, I have a table that have a unique ID column that isn't "id", as DatGrid expects. I'm getting an Load category data one by oneHi, My post object has a category id, and on the table, I want to display the category name. I havCreate projects with javascriptHello everyone, I wanted to know how I can create a project in JavaScript with this command: `npm crcreate-refine-app with yarn v3just going through the getting started tutorial, and finding that the install using `npm` is workingResource Primary KeyIs there a way to define the row which is used as primary key on any given resource? In some cases, How to deal with nested resources?Hi! What is the best practice to have nested resources? For exmaple: There is a Organization which hUpdate related objectsHi there, I’m looking for a way to update nested objects using Refine. Did not yet settle on a dataupdate switch on api responseHello !! I'm currently using refine to make an app and i have a from in which i set every field witCatch 401 errorHi, how can i catch a 401 error and redirect to a specific page, by default it goes to the login pagrefetch useTable dataHi guys! can we use any method to refetch data in useTable hook?DataGrid sorting not workHi! I would like to implement the sorting in my DataGrid and I did that : ```ts const {dataGridProHow can we designate the application port?This project will be running in a monorepo with a bunch of applications and 3000 is already taken. IMy components not showingI have made some components but they are not visible on home page. The only output I am seeing is(imCan't use other locale on DateFields from InferencerFor example, I'm building an app with Mantine. The docs says this: https://refine.dev/docs/api-referI need to add certificate to useCustomI have a refine application. The url of backend include 443 port. Error: ERR_CERT_AUTHORITY_INVALIDAntd table expandable component doesn't stop network request although it's not on the view.I have created an antd table expandable component and when I expand it works as expected, but when IDynamic ErrorsHow to handle dynamic errors in useForm in onMutationError(error){ } the error conatins lot of daTesting Table ComponentHi everyone - I feel like I've scrubbed the internet to figure out this issues; apologies if this is