【Ant-design】Form表单如何实现某个属性根据接口code显示对应的表单校验效果

hzxOnlineOk

已于 2024-07-11 17:49:14 修改

阅读量238

点赞数 2

文章标签： javascript react.js 前端

于 2024-07-11 10:10:52 首次发布

本文链接：https://blog.csdn.net/hzxonlineok/article/details/140343967

版权

在这里插入图片描述

`PS: validateStatus和help，这两者是配套使用的，并且它们和rules里的validator函数是不兼容的。`

import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import {
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Mentions,
  Select,
  TimePicker,
  TreeSelect,
} from 'antd';

const { Option } = Select;
// validateStatus="error"，校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating'
const App: React.FC = () => (
  <Form style={{ maxWidth: 600 }}>
    <Form.Item
      label="Fail"
      validateStatus="error"
      help="Should be combination of numbers & alphabets"
    >
      <Input placeholder="unavailable choice" />
    </Form.Item>
  </Form>
);

export default App;