ArrayInput 在 react-admin 中验证

Question

好吧，我是 React 新手，但我正在尝试验证两个日期（我使用 dayjs 作为日期）。

我想检查字段“to”中的日期是否在字段“from”中的另一个日期之前。

我在名为 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
    }

（我知道它并不完美，因为我必须循环，但现在只是让它工作）

我在 test.js 文件中有以下内容

    <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>

我的问题是，如果我 console.log 结果，当我更改日期时，它会正确打印，但不会在表格中显示错误。我做错了什么？

Answer 1

我认为 ArrayInput 不处理自身的错误，而是处理其子项的错误。但是您可以使用 FormDataConsumer 进行更好的通用验证，例如此示例，为了更清楚起见，使用数字而不是日期：

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;

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

ArrayInput 在 react-admin 中验证

ArrayInput validate in react-admin

javascript

reactjs

react-admin