【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;
相关推荐
小陈工1 分钟前
2026年4月1日技术资讯洞察:AI芯片革命、数据库智能化与云原生演进
前端·数据库·人工智能·git·python·云原生·开源
酉鬼女又兒3 分钟前
零基础快速入门前端深入掌握箭头函数、Promise 与 Fetch API —— 蓝桥杯 Web 考点全解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·css·职场和发展·蓝桥杯·es6·js
木斯佳3 分钟前
前端八股文面经大全:字节广告交易前端一面(2026-03-31)·面经深度解析
前端·markdown·虚拟列表·流式数据
Cache技术分享7 分钟前
370. Java IO API - POSIX 文件权限
前端·后端
程序员小寒9 分钟前
JavaScript设计模式(七):迭代器模式实现与应用
前端·javascript·设计模式·迭代器模式
晓131310 分钟前
React篇——第七章 React 19 编译器深度解析
前端·javascript·react.js
Csvn10 分钟前
错误边界处理
前端·react.js
Jacob000010 分钟前
【Vue | initial】 创建初始化项目
前端
im_AMBER15 分钟前
手撕代码之事件委托
前端·javascript·面试
用户81135818812018 分钟前
React全家桶笔记(三):React进阶 — 事件处理、表单与生命周期
前端