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


typescript 复制代码
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;
相关推荐
爱吃甜品的糯米团子10 小时前
详解 JavaScript 内置对象与包装类型:方法、案例与实战
java·开发语言·javascript
知花实央l10 小时前
【Web应用实战】 文件上传漏洞实战:Low/Medium/High三级绕过(一句话木马拿webshell全流程)
前端·学习·网络安全·安全架构
华仔啊10 小时前
JavaScript + Web Audio API 打造炫酷音乐可视化效果,让你的网页跟随音乐跳起来
前端·javascript
鸡吃丸子10 小时前
SEO入门
前端
檀越剑指大厂10 小时前
【Nginx系列】Tengine:基于 Nginx 的高性能 Web 服务器与反向代理服务器
服务器·前端·nginx
是你的小橘呀10 小时前
深入理解 JavaScript 预编译:从原理到实践
前端·javascript
uhakadotcom10 小时前
在使用cloudflare workers时,假如有几十个请求,如何去控制并发?
前端·面试·架构
风止何安啊10 小时前
栈与堆的精妙舞剧:JavaScript 数据类型深度解析
前端·javascript
用户479492835691511 小时前
Chrome DevTools MCP:让 AI 助手直接操作浏览器开发工具
前端·javascript·chrome
Rysxt_11 小时前
Vuex 教程 从入门到实践
前端·javascript·vue.js