ArrayInput validate in react-admin

Question

Well, I'm new with react, but I'm trying to validate two dates (im using dayjs for the dates).

I want to check that a date in a field "to" doesnt come before another date in field "from".

I have the following in a file called regex.js:

    export const validateFromBeforeTo = (values) => { 
    const message = "error: date in field 'to' cant be before date in field 'from'";
    console.log((dayjs(values[0].from).diff(dayjs(values[0].to)) < 0 )? "false" : "true");
    return (dayjs(values[0].from).diff(dayjs(values[0].to)) < 0 )? undefined : message
    }

(I know it's not perfect since i have to loop, but for now is just to make it work)

And I have the following in the test.js file

    <FormTab label="MyForm">
   
    <CustomTitleField title="Disponibilità" />
    <ArrayInput source="availability" label="avail" validate={validateFromBeforeTo}>
        <SimpleFormIterator>
            <DateTimeInput label="Da" source="from" showTime validate={validateFifteenMin()} />
            <DateTimeInput label="A" source="to" showTime  />
        </SimpleFormIterator>
    </ArrayInput>

    </FormTab>

My problem is that if I console.log the result, when i change the dates it prints correctly, but it does NOT shows errors in the form. What I'm doing wrong?

Maybe you coould provide us with the source of the whole form to be sure something is not wrong on root level — Kia Kaha
– Kia Kaha, Commented Dec 3, 2020 at 13:05
@KiaKaha well there's only a form tag but anyway I updated the block — Don Diego
– Don Diego, Commented Dec 3, 2020 at 14:47

Striped · Accepted Answer · 2020-12-05 02:09:58Z

I think that the ArrayInput does not handle error on itself but on its childs. But you could made a better generic validate using FormDataConsumer like this example with numbers instead of dates for more clarity:

import React from "react";
import {
  ArrayInput,
  Edit,
  FormTab,
  FormDataConsumer,
  NumberInput,
  SimpleFormIterator,
  TabbedForm
} from "react-admin";

const validateFromBeforeTo = (scopedFormData) => {
  return (value, allValues) => {
    console.log({ value, allValues, scopedFormData });
    const { to } = scopedFormData;
    const message =
      "error: date in field 'to' cant be before date in field 'from'";

    if (value - to > 0) {
      return message;
    }

    return undefined;
  };
};

const validateFifteenMin = () => {
  // anything
  return undefined;
};

const composeValidate = (scopedFormData) => [
  validateFifteenMin,
  validateFromBeforeTo(scopedFormData)
];

const PostEdit = (props) => {
  return (
    <Edit {...props}>
      <TabbedForm initialValues={{ availability: [{ from: 0, to: 0 }] }}>
        <FormTab>
          <ArrayInput source="availability">
            <SimpleFormIterator>
              <FormDataConsumer>
                {({ scopedFormData, getSource }) => (
                  <>
                    <NumberInput
                      label="Da"
                      source={getSource("from")}
                      validate={composeValidate(
                        scopedFormData
                      )}
                    />
                    <NumberInput label="A" source={getSource("to")} />
                  </>
                )}
              </FormDataConsumer>
            </SimpleFormIterator>
          </ArrayInput>
        </FormTab>
      </TabbedForm>
    </Edit>
  );
};

export default PostEdit;

Sandbox: https://codesandbox.io/s/festive-kapitsa-20mgq?file=/src/posts/PostEdit.js:0-1579

Collectives™ on Stack Overflow

ArrayInput validate in react-admin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related