ArrayInput 在 react-admin 中验证答案

【问题标题】：ArrayInput validate in react-adminArrayInput 在 react-admin 中验证
【发布时间】：2020-12-03 09:36:21
【问题描述】：

好吧，我是 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 结果，当我更改日期时，它会正确打印，但不会在表单中显示错误。我做错了什么？

【问题讨论】：

也许您可以向我们提供整个表单的来源，以确保根级别没有问题
@KiaKaha 好吧，只有一个表单标签，但无论如何我更新了块

标签： javascript reactjs react-admin

【解决方案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

【讨论】：