TabbedForm 未突出显示哪个选项卡有错误

Question

我有一个带有 2 个选项卡的

TabbedForm

，每个选项卡都有一个

required()

字段。当我提交此表单并且验证失败时，我希望未聚焦的选项卡指示选项卡内的字段存在错误（例如，带有红色下划线或红色文本）。

这似乎在react-admin演示中工作正常（https://marmelab.com/react-admin-demo/#/products/126），但是即使在查看了这个示例的源代码之后（https ://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx），我似乎无法在我的项目中复制相同的功能。

我有以下代码：

const App = () => {
  const dataProvider = jsonServerProvider(
    "https://jsonplaceholder.typicode.com"
  );

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="users" list={ListGuesser} edit={EditForm} />
    </Admin>
  );
};

export const EditForm = (props: EditProps) => {
  return (
    <Edit {...props}>
      <TabbedForm>
        <FormTab label="Tab 1">
          <TextInput source="name" validate={required()} />
        </FormTab>
        <FormTab label="Tab 2">
          <TextInput source="username" validate={required()} />
        </FormTab>
      </TabbedForm>
    </Edit>
  );
};

这里提出了类似的问题（Show Tab Form Validation For Inputs Not Direct Children Of ），但该解决方案不适用于我的问题。

我在这里缺少什么吗？

Answer 1

请检查演示源代码：https://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx，它使用了验证功能：

<RichTextInput source="description" label="" validate={req} />

“req”在第 86 行定义：

const req = [required()];

我也遇到了同样的问题，通过demo源码的方式（验证功能）解决了。 HTH

Answer 2

TextInput 需要

validate={required()}

来调用框架的错误消息。只有

required

调用浏览器的字段验证。