In the react 3.0 whether to support async validation?It did not use redux-form.so ,can async validation of server be realized?

Viewed 357

Will react-admin3.0 support to perform validation from server? It seem to have removed redux-form in the form . So, how to perform async validation?. I do not have any idea. Can someone provide some solution for it? If I want to do async validate some field in the <SimpleForm>. Thanks.

2 Answers

Yesterday I was looking for a solution because since few days I'm using the newest version of react-admin with my new incoming projects.

After seeing zero responses to your question I spent last hours looking for a solution. I've built a simple plugin, called ra-remote-validator, that can help you with this requirement.

You can find more details here: https://www.npmjs.com/package/ra-remote-validator

I hope this can help or, if you have news about this topic, I will appreciate any information!

 const availableValidate = resource => (
  property,
  filterId
) => async value => {
  if (!value) {
    return 'Required';
  }
  const result = await fetch.query({// i use graphQl ,you can use rest-api 
    variables: {
      filter: [{ property, operation: 'EQUAL', value }],
      page: { page: 0, size: 1 },
      sort: [{ property: 'id', direction: 'ASC' }],
    },
    query: gql`
        query ${resource}($filter: [SearchCriteria], $page: SearchPage, $sort: [SearchOrder]) {
          lists: ${resource}(filter: $filter, page: $page, sort: $sort) {
            content {
              id
              code
              name
            }
          }
        }
      `,
  });
  if (result.data.lists.content.length > 0) {
    const finalData = filterId
      ? result.data.lists.content.filter(ele => ele.id !== filterId)
      : result.data.lists.content;
    if (finalData.length > 0) {
      return `Unavailable ${property}`;
    }
  }
};
const validateField = availableValidate('deliveryTypes');// write a function for validate

  <Create {...props} title="Create">
      <SimpleForm redirect="list" toolbar={<CreateToolbar />}>
          <TextInput
            source="code"
            resettable
            validate={[required(), validateField('code')]}
         />
       </SimpleForm>
    </Create>
Related