@aliretail/react-materials-components/demo/FormComponents/errorModal.md

B 端物料组件库

---
title: ErrorModal
order: 0
---

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Printer from '@formily/printer';
import { FormComponents } from '@aliretail/react-materials-components';
const {
  ErrorModal,
  Input,
  setup,
  SchemaForm,
  SchemaMarkupField: Field,
  FormButtonGroup,
  Submit,
} = FormComponents;

setup();

const App = () => {
  const formId = 'test-form'; // 如太多form，建议直接使用 uuid
  const formId2 = 'test-form2'; // 如太多form，建议直接使用 uuid
  return (
    <React.Fragment>
      <SchemaForm
        onChange={console.log}
        onSubmit={console.log}
        id={formId} // 用于设定 form 的 id
      >
        <Field
          type="object"
          x-component="Card"
          x-component-props={{
            title: '表单分组',
            contentHeight: 400,
          }}
        >
          <Field
            name="label1"
            title="label1"
            x-component="Input"
            required
            explanation="这里是提示文案"
          />
          <Field name="label2" title="label1" x-component="Input" maxLength={10} />
          <Field name="label3" title="label1" x-component="Input" required />
          <Field name="label4" title="label5" x-component="Input" colSpan="full" required />
        </Field>
        <ErrorModal id={formId} onJump={console.log} />
        <FormButtonGroup>
          <Submit />
        </FormButtonGroup>
      </SchemaForm>
      <SchemaForm
        onChange={console.log}
        onSubmit={console.log}
        id={formId2} // 用于设定 form 的 id
      >
        <Field
          type="object"
          x-component="Card"
          x-component-props={{
            title: '表单分组',
            contentHeight: 400,
          }}
        >
          <Field
            name="label6"
            title="label6"
            x-component="Input"
            required
            explanation="这里是提示文案"
          />
          <Field name="label7" title="label7" x-component="Input" maxLength={10} />
          <Field name="label8" title="label8" x-component="Input" required />
          <Field name="label9" title="label9" x-component="Input" colSpan="full" required />
        </Field>
        <ErrorModal id={formId2} onJump={console.log} />
        <FormButtonGroup>
          <Submit />
        </FormButtonGroup>
      </SchemaForm>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, mountNode);
```