mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 14:56:27 +10:00
1464 lines
403 KiB
HTML
1464 lines
403 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
|
||
<meta name="description" content="A set of high-quality React components">
|
||
<meta name="description" content="One of best React UI library for enterprise background">
|
||
<title>Ant Design - A UI Design Language</title>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
function isZhCN(pathname) {
|
||
return /-cn\/?$/.test(pathname);
|
||
}
|
||
function getLocalizedPathname(path, zhCN) {
|
||
var pathname = path.startsWith('/') ? path : '/' + path;
|
||
if (!zhCN) { // to enUS
|
||
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||
} else if (pathname === '/') {
|
||
return '/index-cn';
|
||
} else if (pathname.endsWith('/')) {
|
||
return pathname.replace(/\/$/, '-cn/');
|
||
}
|
||
return pathname + '-cn';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
||
<style id="nprogress-style">
|
||
#nprogress { display: none }
|
||
</style>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="704642449"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started" data-reactid="54">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects" data-reactid="56">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app" data-reactid="58">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n Solution<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="155"><a href="/components/form/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/select/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/table/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/tree/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="Horizontal Login Form" data-reactid="301"><a href="#components-form-demo-horizontal-login" data-reactid="302">Horizontal Login Form</a></li><li title="Login Form" data-reactid="303"><a href="#components-form-demo-normal-login" data-reactid="304">Login Form</a></li><li title="Registration" data-reactid="305"><a href="#components-form-demo-register" data-reactid="306">Registration</a></li><li title="Advanced search" data-reactid="307"><a href="#components-form-demo-advanced-search" data-reactid="308">Advanced search</a></li><li title="Form in Modal to Create" data-reactid="309"><a href="#components-form-demo-form-in-modal" data-reactid="310">Form in Modal to Create</a></li><li title="Dynamic Form Item" data-reactid="311"><a href="#components-form-demo-dynamic-form-item" data-reactid="312">Dynamic Form Item</a></li><li title="Time-related Controls" data-reactid="313"><a href="#components-form-demo-time-related-controls" data-reactid="314">Time-related Controls</a></li><li title="Customized Form Controls" data-reactid="315"><a href="#components-form-demo-customized-form-controls" data-reactid="316">Customized Form Controls</a></li><li title="Store Form Data into Upper Component" data-reactid="317"><a href="#components-form-demo-global-state" data-reactid="318">Store Form Data into Upper Component</a></li><li title="Handle Form Data Manually" data-reactid="319"><a href="#components-form-demo-without-form-create" data-reactid="320">Handle Form Data Manually</a></li><li title="Customized Validation" data-reactid="321"><a href="#components-form-demo-validate-static" data-reactid="322">Customized Validation</a></li><li title="Other Form Controls" data-reactid="323"><a href="#components-form-demo-validate-other" data-reactid="324">Other Form Controls</a></li><li title="Coordinated Controls" data-reactid="325"><a href="#components-form-demo-coordinated" data-reactid="326">Coordinated Controls</a></li><li title="Form Layout" data-reactid="327"><a href="#components-form-demo-layout" data-reactid="328">Form Layout</a></li></ul></div></div><section class="markdown" data-reactid="329"><h1 data-reactid="330"><!-- react-text: 331 -->Form<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/index.en-US.md" data-reactid="332"><i class="anticon anticon-edit" data-reactid="333"></i></a></h1><section class="markdown" data-reactid="334"><p data-reactid="335"><!-- react-text: 336 -->Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.<!-- /react-text --></p><h2 id="Form" data-reactid="337"><span data-reactid="338"><!-- react-text: 339 -->Form<!-- /react-text --></span><a href="#Form" class="anchor" data-reactid="340">#</a></h2><p data-reactid="341"><!-- react-text: 342 -->You can align the controls of a <!-- /react-text --><code data-reactid="343"><!-- react-text: 344 -->form<!-- /react-text --></code><!-- react-text: 345 --> using one of the following attributes：<!-- /react-text --></p><ul data-reactid="346"><li data-reactid="347"><p data-reactid="348"><code data-reactid="349"><!-- react-text: 350 -->horizontal<!-- /react-text --></code><!-- react-text: 351 -->：to horizontally align the <!-- /react-text --><code data-reactid="352"><!-- react-text: 353 -->label<!-- /react-text --></code><!-- react-text: 354 -->s and controls of the fields. (Default)<!-- /react-text --></p></li><li data-reactid="355"><p data-reactid="356"><code data-reactid="357"><!-- react-text: 358 -->vertical<!-- /react-text --></code><!-- react-text: 359 -->：to vertically align the <!-- /react-text --><code data-reactid="360"><!-- react-text: 361 -->label<!-- /react-text --></code><!-- react-text: 362 -->s and controls of the fields.<!-- /react-text --></p></li><li data-reactid="363"><p data-reactid="364"><code data-reactid="365"><!-- react-text: 366 -->inline<!-- /react-text --></code><!-- react-text: 367 -->：to render form fields in one line.<!-- /react-text --></p></li></ul><h2 id="Form-fields" data-reactid="368"><span data-reactid="369"><!-- react-text: 370 -->Form fields<!-- /react-text --></span><a href="#Form-fields" class="anchor" data-reactid="371">#</a></h2><p data-reactid="372"><!-- react-text: 373 -->A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
|
||
A form field is defined using <!-- /react-text --><code data-reactid="374"><!-- react-text: 375 --><Form.Item /><!-- /react-text --></code><!-- react-text: 376 -->.<!-- /react-text --></p><pre class="language-jsx" data-reactid="377"><code data-reactid="378"><span class="token operator"><</span>Form<span class="token punctuation">.</span>Item <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token punctuation">{</span>children<span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form.Item</span><span class="token punctuation">></span></span></code></pre><blockquote data-reactid="379"><p data-reactid="380"><!-- react-text: 381 -->PS：By default, large size controls are used within a form.<!-- /react-text --></p></blockquote></section><h2 data-reactid="382"><span data-reactid="383">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="384"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="385"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="386"><section class="code-box" id="components-form-demo-horizontal-login" data-reactid="387"><section class="code-box-demo" data-reactid="388"><form class="ant-form ant-form-inline" data-reactid="389"><div class="ant-row ant-form-item" data-reactid="390"><div class="ant-form-item-control-wrapper" data-reactid="391"><div class="ant-form-item-control " data-reactid="392"><span class="ant-input-preSuffix-wrapper" data-reactid="393"><span class="ant-input-prefix" data-reactid="394"><i style="font-size:13px;" class="anticon anticon-user" data-reactid="395"></i></span><input type="text" placeholder="Username" value="" id="userName" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="396"/></span></div></div></div><div class="ant-row ant-form-item" data-reactid="397"><div class="ant-form-item-control-wrapper" data-reactid="398"><div class="ant-form-item-control " data-reactid="399"><span class="ant-input-preSuffix-wrapper" data-reactid="400"><span class="ant-input-prefix" data-reactid="401"><i style="font-size:13px;" class="anticon anticon-lock" data-reactid="402"></i></span><input type="password" placeholder="Password" value="" id="password" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="403"/></span></div></div></div><div class="ant-row ant-form-item" data-reactid="404"><div class="ant-form-item-control-wrapper" data-reactid="405"><div class="ant-form-item-control " data-reactid="406"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="407"><span data-reactid="408">Log in</span></button></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="409"><div class="code-box-title" data-reactid="410"><a href="#components-form-demo-horizontal-login" data-reactid="411">Horizontal Login Form</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/horizontal-login.md" data-reactid="412"><i class="anticon anticon-edit" data-reactid="413"></i></a></div><div data-reactid="414"><p data-reactid="415"><!-- react-text: 416 -->Horizontal login form is often used in navigation bar.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="417"></i></section><section class="highlight-wrapper" data-reactid="418"><div class="highlight" data-reactid="419"><i class="anticon anticon-copy code-box-code-copy" data-reactid="420"></i><pre class="language-jsx" data-reactid="421"><code data-reactid="422"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">hasErrors</span><span class="token punctuation">(</span>fieldsError<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>fieldsError<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>field <span class="token operator">=</span><span class="token operator">></span> fieldsError<span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">HorizontalLoginForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment" spellcheck="true">// To disabled submit button at the beginning.</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator<span class="token punctuation">,</span> getFieldsError<span class="token punctuation">,</span> getFieldError<span class="token punctuation">,</span> isFieldTouched <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment" spellcheck="true">// Only show error after a field is touched.</span>
|
||
<span class="token keyword">const</span> userNameError <span class="token operator">=</span> <span class="token function">isFieldTouched</span><span class="token punctuation">(</span><span class="token string">'userName'</span><span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token function">getFieldError</span><span class="token punctuation">(</span><span class="token string">'userName'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> passwordError <span class="token operator">=</span> <span class="token function">isFieldTouched</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token function">getFieldError</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">validateStatus</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>userNameError <span class="token operator">?</span> <span class="token string">'error'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">help</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>userNameError <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'userName'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your username!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">prefix</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token punctuation">:</span> <span class="token number">13</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> placeholder<span class="token operator">=</span><span class="token string">"Username"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">validateStatus</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>passwordError <span class="token operator">?</span> <span class="token string">'error'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">help</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>passwordError <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your Password!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">prefix</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"lock"</span> style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token punctuation">:</span> <span class="token number">13</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> type<span class="token operator">=</span><span class="token string">"password"</span> placeholder<span class="token operator">=</span><span class="token string">"Password"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span>
|
||
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token function">hasErrors</span><span class="token punctuation">(</span><span class="token function">getFieldsError</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
Log <span class="token keyword">in</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedHorizontalLoginForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>HorizontalLoginForm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedHorizontalLoginForm</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-normal-login" data-reactid="423"><section class="code-box-demo" data-reactid="424"><form class="ant-form ant-form-horizontal login-form" data-reactid="425"><div class="ant-row ant-form-item" data-reactid="426"><div class="ant-form-item-control-wrapper" data-reactid="427"><div class="ant-form-item-control " data-reactid="428"><span class="ant-input-preSuffix-wrapper" data-reactid="429"><span class="ant-input-prefix" data-reactid="430"><i style="font-size:13px;" class="anticon anticon-user" data-reactid="431"></i></span><input type="text" placeholder="Username" value="" id="userName" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="432"/></span></div></div></div><div class="ant-row ant-form-item" data-reactid="433"><div class="ant-form-item-control-wrapper" data-reactid="434"><div class="ant-form-item-control " data-reactid="435"><span class="ant-input-preSuffix-wrapper" data-reactid="436"><span class="ant-input-prefix" data-reactid="437"><i style="font-size:13px;" class="anticon anticon-lock" data-reactid="438"></i></span><input type="password" placeholder="Password" value="" id="password" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="439"/></span></div></div></div><div class="ant-row ant-form-item" data-reactid="440"><div class="ant-form-item-control-wrapper" data-reactid="441"><div class="ant-form-item-control has-success" data-reactid="442"><label class="ant-checkbox-wrapper" data-reactid="443"><span class="ant-checkbox ant-checkbox-checked" data-reactid="444"><input type="checkbox" class="ant-checkbox-input" checked="" data-reactid="445"/><span class="ant-checkbox-inner" data-reactid="446"></span></span><span data-reactid="447">Remember me</span></label><a class="login-form-forgot" data-reactid="448">Forgot password</a><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg login-form-button" data-reactid="449"><span data-reactid="450">Log in</span></button><!-- react-text: 451 -->Or <!-- /react-text --><a data-reactid="452">register now!</a></div></div></div></form><style data-reactid="453">#components-form-demo-normal-login .login-form {
|
||
max-width: 300px;
|
||
}
|
||
#components-form-demo-normal-login .login-form-forgot {
|
||
float: right;
|
||
}
|
||
#components-form-demo-normal-login .login-form-button {
|
||
width: 100%;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="454"><div class="code-box-title" data-reactid="455"><a href="#components-form-demo-normal-login" data-reactid="456">Login Form</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/normal-login.md" data-reactid="457"><i class="anticon anticon-edit" data-reactid="458"></i></a></div><div data-reactid="459"><p data-reactid="460"><!-- react-text: 461 -->Normal login form which can contain more elements.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="462"></i></section><section class="highlight-wrapper" data-reactid="463"><div class="highlight" data-reactid="464"><i class="anticon anticon-copy code-box-code-copy" data-reactid="465"></i><pre class="language-jsx" data-reactid="466"><code data-reactid="467"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Checkbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">NormalLoginForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>login-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'userName'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your username!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">prefix</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token punctuation">:</span> <span class="token number">13</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> placeholder<span class="token operator">=</span><span class="token string">"Username"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your Password!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">prefix</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"lock"</span> style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token punctuation">:</span> <span class="token number">13</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> type<span class="token operator">=</span><span class="token string">"password"</span> placeholder<span class="token operator">=</span><span class="token string">"Password"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'remember'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
valuePropName<span class="token punctuation">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span>
|
||
initialValue<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Checkbox</span><span class="token punctuation">></span></span>Remember me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Checkbox</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>login-form-forgot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forgot password<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>login-form-button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Log <span class="token keyword">in</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
Or <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>register now<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedNormalLoginForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>NormalLoginForm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedNormalLoginForm</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="468"><pre data-reactid="469"><code class="css" data-reactid="470"><span class="token selector"><span class="token id">#components-form-demo-normal-login</span> <span class="token class">.login-form</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector"><span class="token id">#components-form-demo-normal-login</span> <span class="token class">.login-form-forgot</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector"><span class="token id">#components-form-demo-normal-login</span> <span class="token class">.login-form-button</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-register" data-reactid="471"><section class="code-box-demo" data-reactid="472"><form class="ant-form ant-form-horizontal" data-reactid="473"><div class="ant-row ant-form-item" data-reactid="474"><div class="ant-col-6 ant-form-item-label" data-reactid="475"><label for="email" class="ant-form-item-required" title="E-mail" data-reactid="476">E-mail</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="477"><div class="ant-form-item-control " data-reactid="478"><input type="text" value="" id="email" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="479"/></div></div></div><div class="ant-row ant-form-item" data-reactid="480"><div class="ant-col-6 ant-form-item-label" data-reactid="481"><label for="password" class="ant-form-item-required" title="Password" data-reactid="482">Password</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="483"><div class="ant-form-item-control " data-reactid="484"><input type="password" value="" id="password" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="485"/></div></div></div><div class="ant-row ant-form-item" data-reactid="486"><div class="ant-col-6 ant-form-item-label" data-reactid="487"><label for="confirm" class="ant-form-item-required" title="Confirm Password" data-reactid="488">Confirm Password</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="489"><div class="ant-form-item-control " data-reactid="490"><input type="password" value="" id="confirm" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="491"/></div></div></div><div class="ant-row ant-form-item" data-reactid="492"><div class="ant-col-6 ant-form-item-label" data-reactid="493"><label for="nickname" class="ant-form-item-required" title="" data-reactid="494"><span data-reactid="495"><!-- react-text: 496 -->Nickname <!-- /react-text --><i class="anticon anticon-question-circle-o" data-reactid="497"></i></span></label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="498"><div class="ant-form-item-control " data-reactid="499"><input type="text" value="" id="nickname" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="500"/></div></div></div><div class="ant-row ant-form-item" data-reactid="501"><div class="ant-col-6 ant-form-item-label" data-reactid="502"><label for="residence" class="ant-form-item-required" title="Habitual Residence" data-reactid="503">Habitual Residence</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="504"><div class="ant-form-item-control has-success" data-reactid="505"><span class="ant-cascader-picker" tabindex="0" data-reactid="506"><input type="text" value="" id="residence" data-__meta="[object Object]" class="ant-input ant-cascader-input ant-input-lg" readonly="" autocomplete="off" data-reactid="507"/><span class="ant-cascader-picker-label" data-reactid="508">Zhejiang / Hangzhou / West Lake</span><i class="anticon anticon-cross-circle ant-cascader-picker-clear" data-reactid="509"></i><i class="anticon anticon-down ant-cascader-picker-arrow" data-reactid="510"></i></span></div></div></div><div class="ant-row ant-form-item" data-reactid="511"><div class="ant-col-6 ant-form-item-label" data-reactid="512"><label for="phone" class="ant-form-item-required" title="Phone Number" data-reactid="513">Phone Number</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="514"><div class="ant-form-item-control " data-reactid="515"><span class="ant-input-wrapper ant-input-group" data-reactid="516"><span class="ant-input-group-addon" data-reactid="517"><div class="icp-selector ant-select ant-select-enabled" data-reactid="518"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="519"><div class="ant-select-selection__rendered" data-reactid="520"><div class="ant-select-selection-selected-value" title="+86" style="display:block;opacity:1;" data-reactid="521">+86</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="522"><b data-reactid="523"></b></span></div></div></span><input type="text" value="" id="phone" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="524"/></span></div></div></div><div class="ant-row ant-form-item" data-reactid="525"><div class="ant-col-6 ant-form-item-label" data-reactid="526"><label for="captcha" class="ant-form-item-required" title="Captcha" data-reactid="527">Captcha</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="528"><div class="ant-form-item-control " data-reactid="529"><div class="ant-row" style="margin-left:-4px;margin-right:-4px;" data-reactid="530"><div style="padding-left:4px;padding-right:4px;" class="ant-col-12" data-reactid="531"><input type="text" value="" id="captcha" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="532"/></div><div style="padding-left:4px;padding-right:4px;" class="ant-col-12" data-reactid="533"><button type="button" class="ant-btn ant-btn-lg" data-reactid="534"><span data-reactid="535">Get captcha</span></button></div></div><div class="ant-form-extra" data-reactid="536">We must make sure that your are a human.</div></div></div></div><div class="ant-row ant-form-item" style="margin-bottom:8px;" data-reactid="537"><div class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper" data-reactid="538"><div class="ant-form-item-control " data-reactid="539"><label class="ant-checkbox-wrapper" data-reactid="540"><span class="ant-checkbox" data-reactid="541"><input type="checkbox" class="ant-checkbox-input" data-reactid="542"/><span class="ant-checkbox-inner" data-reactid="543"></span></span><span data-reactid="544"><!-- react-text: 545 -->I have read the <!-- /react-text --><a data-reactid="546">agreement</a></span></label></div></div></div><div class="ant-row ant-form-item" data-reactid="547"><div class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper" data-reactid="548"><div class="ant-form-item-control " data-reactid="549"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="550"><span data-reactid="551">Register</span></button></div></div></div></form><style data-reactid="552">#components-form-demo-register .icp-selector {
|
||
width: 60px;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="553"><div class="code-box-title" data-reactid="554"><a href="#components-form-demo-register" data-reactid="555">Registration</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/register.md" data-reactid="556"><i class="anticon anticon-edit" data-reactid="557"></i></a></div><div data-reactid="558"><p data-reactid="559"><!-- react-text: 560 -->Fill in this form to create a new account for you.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="561"></i></section><section class="highlight-wrapper" data-reactid="562"><div class="highlight" data-reactid="563"><i class="anticon anticon-copy code-box-code-copy" data-reactid="564"></i><pre class="language-jsx" data-reactid="565"><code data-reactid="566"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Tooltip<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Cascader<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Col<span class="token punctuation">,</span> Checkbox<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> residences <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'zhejiang'</span><span class="token punctuation">,</span>
|
||
label<span class="token punctuation">:</span> <span class="token string">'Zhejiang'</span><span class="token punctuation">,</span>
|
||
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'hangzhou'</span><span class="token punctuation">,</span>
|
||
label<span class="token punctuation">:</span> <span class="token string">'Hangzhou'</span><span class="token punctuation">,</span>
|
||
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'xihu'</span><span class="token punctuation">,</span>
|
||
label<span class="token punctuation">:</span> <span class="token string">'West Lake'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'jiangsu'</span><span class="token punctuation">,</span>
|
||
label<span class="token punctuation">:</span> <span class="token string">'Jiangsu'</span><span class="token punctuation">,</span>
|
||
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'nanjing'</span><span class="token punctuation">,</span>
|
||
label<span class="token punctuation">:</span> <span class="token string">'Nanjing'</span><span class="token punctuation">,</span>
|
||
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'zhonghuamen'</span><span class="token punctuation">,</span>
|
||
label<span class="token punctuation">:</span> <span class="token string">'Zhong Hua Men'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">RegistrationForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
confirmDirty<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFieldsAndScroll</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleConfirmBlur <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> value <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> confirmDirty<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>confirmDirty <span class="token operator">||</span> <span class="token operator">!</span><span class="token operator">!</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
checkPassword <span class="token operator">=</span> <span class="token punctuation">(</span>rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> form <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">&&</span> value <span class="token operator">!==</span> form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">'Two passwords that you enter is inconsistent!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
checkConfirm <span class="token operator">=</span> <span class="token punctuation">(</span>rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> form <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">&&</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>confirmDirty<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> force<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> tailFormItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
span<span class="token punctuation">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
|
||
offset<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> prefixSelector <span class="token operator">=</span> <span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'prefix'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
initialValue<span class="token punctuation">:</span> <span class="token string">'86'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icp-selector<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>86<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token operator">+</span><span class="token number">86</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"E-mail"</span>
|
||
hasFeedback
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'email'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
type<span class="token punctuation">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'The input is not valid E-mail!'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your E-mail!'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Password"</span>
|
||
hasFeedback
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your password!'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
validator<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>checkConfirm<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Confirm Password"</span>
|
||
hasFeedback
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please confirm your password!'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
validator<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>checkPassword<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleConfirmBlur<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
|
||
Nickname<span class="token entity" title=" ">&nbsp;</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tooltip</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>What</span> <span class="token attr-name">do</span> <span class="token attr-name">you</span> <span class="token attr-name">want</span> <span class="token attr-name">other</span> <span class="token attr-name">to</span> <span class="token attr-name">call</span> <span class="token attr-name">you?"</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>question-circle-o<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
hasFeedback
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'nickname'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your nickname!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Habitual Residence"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'residence'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
initialValue<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'zhejiang'</span><span class="token punctuation">,</span> <span class="token string">'hangzhou'</span><span class="token punctuation">,</span> <span class="token string">'xihu'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'array'</span><span class="token punctuation">,</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please select your habitual residence!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Cascader</span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>residences<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Phone Number"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'phone'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your phone number!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">addonBefore</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>prefixSelector<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Captcha"</span>
|
||
extra<span class="token operator">=</span><span class="token string">"We must make sure that your are a human."</span>
|
||
<span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span> <span class="token attr-name">gutter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'captcha'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input the captcha you got!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Get captcha<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem <span class="token punctuation">{</span><span class="token operator">...</span>tailFormItemLayout<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'agreement'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
valuePropName<span class="token punctuation">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Checkbox</span><span class="token punctuation">></span></span>I have read the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>agreement<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Checkbox</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem <span class="token punctuation">{</span><span class="token operator">...</span>tailFormItemLayout<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Register<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedRegistrationForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>RegistrationForm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedRegistrationForm</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="567"><pre data-reactid="568"><code class="css" data-reactid="569"><span class="token selector"><span class="token id">#components-form-demo-register</span> <span class="token class">.icp-selector</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">60</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-advanced-search" data-reactid="570"><section class="code-box-demo" data-reactid="571"><div data-reactid="572"><form class="ant-form ant-form-horizontal ant-advanced-search-form" data-reactid="573"><div class="ant-row" style="margin-left:-20px;margin-right:-20px;" data-reactid="574"><div style="padding-left:20px;padding-right:20px;" class="ant-col-8" data-reactid="575"><div class="ant-row ant-form-item" data-reactid="576"><div class="ant-col-5 ant-form-item-label" data-reactid="577"><label for="field-0" class="" title="Field 0" data-reactid="578">Field 0</label></div><div class="ant-col-19 ant-form-item-control-wrapper" data-reactid="579"><div class="ant-form-item-control " data-reactid="580"><input type="text" placeholder="placeholder" value="" id="field-0" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="581"/></div></div></div></div><div style="padding-left:20px;padding-right:20px;" class="ant-col-8" data-reactid="582"><div class="ant-row ant-form-item" data-reactid="583"><div class="ant-col-5 ant-form-item-label" data-reactid="584"><label for="field-1" class="" title="Field 1" data-reactid="585">Field 1</label></div><div class="ant-col-19 ant-form-item-control-wrapper" data-reactid="586"><div class="ant-form-item-control " data-reactid="587"><input type="text" placeholder="placeholder" value="" id="field-1" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="588"/></div></div></div></div><div style="padding-left:20px;padding-right:20px;" class="ant-col-8" data-reactid="589"><div class="ant-row ant-form-item" data-reactid="590"><div class="ant-col-5 ant-form-item-label" data-reactid="591"><label for="field-2" class="" title="Field 2" data-reactid="592">Field 2</label></div><div class="ant-col-19 ant-form-item-control-wrapper" data-reactid="593"><div class="ant-form-item-control " data-reactid="594"><input type="text" placeholder="placeholder" value="" id="field-2" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="595"/></div></div></div></div><div style="padding-left:20px;padding-right:20px;" class="ant-col-8" data-reactid="596"><div class="ant-row ant-form-item" data-reactid="597"><div class="ant-col-5 ant-form-item-label" data-reactid="598"><label for="field-3" class="" title="Field 3" data-reactid="599">Field 3</label></div><div class="ant-col-19 ant-form-item-control-wrapper" data-reactid="600"><div class="ant-form-item-control " data-reactid="601"><input type="text" placeholder="placeholder" value="" id="field-3" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="602"/></div></div></div></div><div style="padding-left:20px;padding-right:20px;" class="ant-col-8" data-reactid="603"><div class="ant-row ant-form-item" data-reactid="604"><div class="ant-col-5 ant-form-item-label" data-reactid="605"><label for="field-4" class="" title="Field 4" data-reactid="606">Field 4</label></div><div class="ant-col-19 ant-form-item-control-wrapper" data-reactid="607"><div class="ant-form-item-control " data-reactid="608"><input type="text" placeholder="placeholder" value="" id="field-4" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="609"/></div></div></div></div><div style="padding-left:20px;padding-right:20px;" class="ant-col-8" data-reactid="610"><div class="ant-row ant-form-item" data-reactid="611"><div class="ant-col-5 ant-form-item-label" data-reactid="612"><label for="field-5" class="" title="Field 5" data-reactid="613">Field 5</label></div><div class="ant-col-19 ant-form-item-control-wrapper" data-reactid="614"><div class="ant-form-item-control " data-reactid="615"><input type="text" placeholder="placeholder" value="" id="field-5" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="616"/></div></div></div></div></div><div class="ant-row" data-reactid="617"><div style="text-align:right;" class="ant-col-24" data-reactid="618"><button type="submit" class="ant-btn ant-btn-primary" data-reactid="619"><span data-reactid="620">Search</span></button><button style="margin-left:8px;" type="button" class="ant-btn" data-reactid="621"><span data-reactid="622">Clear</span></button><a style="margin-left:8px;font-size:12px;" data-reactid="623"><!-- react-text: 624 -->Collapse <!-- /react-text --><i class="anticon anticon-down" data-reactid="625"></i></a></div></div></form><div class="search-result-list" data-reactid="626">Search Result List</div></div><style data-reactid="627">#components-form-demo-advanced-search .ant-advanced-search-form {
|
||
padding: 24px;
|
||
background: #fbfbfb;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 6px;
|
||
}
|
||
#components-form-demo-advanced-search .ant-form {
|
||
max-width: none;
|
||
}
|
||
#components-form-demo-advanced-search .search-result-list {
|
||
margin-top: 16px;
|
||
border: 1px dashed #e9e9e9;
|
||
border-radius: 6px;
|
||
background-color: #fafafa;
|
||
min-height: 200px;
|
||
text-align: center;
|
||
padding-top: 80px;
|
||
}
|
||
</style></section><section class="code-box-meta markdown" data-reactid="628"><div class="code-box-title" data-reactid="629"><a href="#components-form-demo-advanced-search" data-reactid="630">Advanced search</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/advanced-search.md" data-reactid="631"><i class="anticon anticon-edit" data-reactid="632"></i></a></div><div data-reactid="633"><p data-reactid="634"><!-- react-text: 635 -->Three columns layout is often used for advanced searching of data table.<!-- /react-text --></p><p data-reactid="636"><!-- react-text: 637 -->Because the width of label is not fixed, you may need to adjust it by customizing its style.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="638"></i></section><section class="highlight-wrapper" data-reactid="639"><div class="highlight" data-reactid="640"><i class="anticon anticon-copy code-box-code-copy" data-reactid="641"></i><pre class="language-jsx" data-reactid="642"><code data-reactid="643"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Col<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">AdvancedSearchForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
expand<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
handleSearch <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
handleReset <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
toggle <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> expand <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> expand<span class="token punctuation">:</span> <span class="token operator">!</span>expand <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">19</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment" spellcheck="true">// To generate mock Form.Item</span>
|
||
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem <span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span> label<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`Field </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`field-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> expand <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>expand<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> shownCount <span class="token operator">=</span> expand <span class="token operator">?</span> children<span class="token punctuation">.</span>length <span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span>
|
||
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-advanced-search-form<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSearch<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span> <span class="token attr-name">gutter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">40</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>children<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> shownCount<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> textAlign<span class="token punctuation">:</span> <span class="token string">'right'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginLeft<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleReset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
Clear
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginLeft<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>toggle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
Collapse <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>expand <span class="token operator">?</span> <span class="token string">'up'</span> <span class="token punctuation">:</span> <span class="token string">'down'</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedAdvancedSearchForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>AdvancedSearchForm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedAdvancedSearchForm</span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search-result-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search Result List<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
mountNode
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="644"><pre data-reactid="645"><code class="css" data-reactid="646"><span class="token selector"><span class="token id">#components-form-demo-advanced-search</span> <span class="token class">.ant-advanced-search-form</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fbfbfb</span><span class="token punctuation">;</span>
|
||
<span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#d9d9d9</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">6</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-form-in-modal" data-reactid="647"><section class="code-box-demo" data-reactid="648"><div data-reactid="649"><button type="button" class="ant-btn ant-btn-primary" data-reactid="650"><span data-reactid="651">New Collection</span></button><!-- react-empty: 652 --></div><style data-reactid="653">.collection-create-form_last-form-item {
|
||
margin-bottom: 0;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="654"><div class="code-box-title" data-reactid="655"><a href="#components-form-demo-form-in-modal" data-reactid="656">Form in Modal to Create</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/form-in-modal.md" data-reactid="657"><i class="anticon anticon-edit" data-reactid="658"></i></a></div><div data-reactid="659"><p data-reactid="660"><!-- react-text: 661 -->When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fills in the form to create an item.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="662"></i></section><section class="highlight-wrapper" data-reactid="663"><div class="highlight" data-reactid="664"><i class="anticon anticon-copy code-box-code-copy" data-reactid="665"></i><pre class="language-jsx" data-reactid="666"><code data-reactid="667"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Modal<span class="token punctuation">,</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Radio <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> CollectionCreateForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> visible<span class="token punctuation">,</span> onCancel<span class="token punctuation">,</span> onCreate<span class="token punctuation">,</span> form <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> form<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Modal</span>
|
||
<span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>visible<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Create</span> <span class="token attr-name">a</span> <span class="token attr-name">new</span> <span class="token attr-name">collection"</span>
|
||
<span class="token attr-name">okText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Create<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">onCancel</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onCancel<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onOk</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onCreate<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input the title of collection!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'description'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collection-create-form_last-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'modifier'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
initialValue<span class="token punctuation">:</span> <span class="token string">'public'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio.Group</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>public<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Public<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>private<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Private<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio.Group</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Modal</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">CollectionsPage</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
visible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
showModal <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> visible<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleCancel <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> visible<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleCreate <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> form <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
form<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> visible<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
saveFormRef <span class="token operator">=</span> <span class="token punctuation">(</span>form<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>form <span class="token operator">=</span> form<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showModal<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>New <span class="token class-name">Collection</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>CollectionCreateForm</span>
|
||
<span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>saveFormRef<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>visible<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onCancel</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleCancel<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onCreate</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleCreate<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>CollectionsPage</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="668"><pre data-reactid="669"><code class="css" data-reactid="670"><span class="token selector"><span class="token class">.collection-create-form_last-form-item</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-dynamic-form-item" data-reactid="671"><section class="code-box-demo" data-reactid="672"><form class="ant-form ant-form-horizontal" data-reactid="673"><div class="ant-row ant-form-item" data-reactid="674"><div class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper" data-reactid="675"><div class="ant-form-item-control " data-reactid="676"><button style="width:60%;" type="button" class="ant-btn ant-btn-dashed ant-btn-lg" data-reactid="677"><i class="anticon anticon-plus" data-reactid="678"></i><span data-reactid="679"> Add field</span></button></div></div></div><div class="ant-row ant-form-item" data-reactid="680"><div class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper" data-reactid="681"><div class="ant-form-item-control " data-reactid="682"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="683"><span data-reactid="684">Submit</span></button></div></div></div></form><style data-reactid="685">.dynamic-delete-button {
|
||
cursor: pointer;
|
||
position: relative;
|
||
top: 4px;
|
||
font-size: 24px;
|
||
color: #999;
|
||
transition: all .3s;
|
||
}
|
||
.dynamic-delete-button:hover {
|
||
color: #777;
|
||
}
|
||
.dynamic-delete-button[disabled] {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="686"><div class="code-box-title" data-reactid="687"><a href="#components-form-demo-dynamic-form-item" data-reactid="688">Dynamic Form Item</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/dynamic-form-item.md" data-reactid="689"><i class="anticon anticon-edit" data-reactid="690"></i></a></div><div data-reactid="691"><p data-reactid="692"><!-- react-text: 693 -->Add or remove form items dynamically.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="694"></i></section><section class="highlight-wrapper" data-reactid="695"><div class="highlight" data-reactid="696"><i class="anticon anticon-copy code-box-code-copy" data-reactid="697"></i><pre class="language-jsx" data-reactid="698"><code data-reactid="699"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">let</span> uuid <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">class</span> <span class="token class-name">DynamicFieldSet</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
remove <span class="token operator">=</span> <span class="token punctuation">(</span>k<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> form <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// can use data-binding to get</span>
|
||
<span class="token keyword">const</span> keys <span class="token operator">=</span> form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'keys'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// We need at least one passenger</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>keys<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment" spellcheck="true">// can use data-binding to set</span>
|
||
form<span class="token punctuation">.</span><span class="token function">setFieldsValue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
keys<span class="token punctuation">:</span> keys<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>key <span class="token operator">=</span><span class="token operator">></span> key <span class="token operator">!==</span> k<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
add <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
uuid<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> form <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// can use data-binding to get</span>
|
||
<span class="token keyword">const</span> keys <span class="token operator">=</span> form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'keys'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> nextKeys <span class="token operator">=</span> keys<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>uuid<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// can use data-binding to set</span>
|
||
<span class="token comment" spellcheck="true">// important! notify form to detect changes</span>
|
||
form<span class="token punctuation">.</span><span class="token function">setFieldsValue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
keys<span class="token punctuation">:</span> nextKeys<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator<span class="token punctuation">,</span> getFieldValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayoutWithOutLabel <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'keys'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initialValue<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> keys <span class="token operator">=</span> <span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'keys'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItems <span class="token operator">=</span> keys<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>k<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> formItemLayout <span class="token punctuation">:</span> formItemLayoutWithOutLabel<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token punctuation">{</span>index <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'Passengers'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
|
||
required<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
|
||
key<span class="token operator">=</span><span class="token punctuation">{</span>k<span class="token punctuation">}</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`names-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>k<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
validateTrigger<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'onChange'</span><span class="token punctuation">,</span> <span class="token string">'onBlur'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
whitespace<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
message<span class="token punctuation">:</span> <span class="token string">"Please input passenger's name or delete this field."</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>passenger</span> <span class="token attr-name">name"</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'60%'</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span>
|
||
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dynamic-delete-button<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minus-circle-o<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>keys<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>k<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>formItems<span class="token punctuation">}</span>
|
||
<span class="token operator"><</span>FormItem <span class="token punctuation">{</span><span class="token operator">...</span>formItemLayoutWithOutLabel<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>add<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'60%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Add field
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem <span class="token punctuation">{</span><span class="token operator">...</span>formItemLayoutWithOutLabel<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedDynamicFieldSet <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>DynamicFieldSet<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedDynamicFieldSet</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="700"><pre data-reactid="701"><code class="css" data-reactid="702"><span class="token selector"><span class="token class">.dynamic-delete-button</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector"><span class="token class">.dynamic-delete-button</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#777</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector"><span class="token class">.dynamic-delete-button</span><span class="token attribute">[disabled]</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">cursor</span><span class="token punctuation">:</span> not-allowed<span class="token punctuation">;</span>
|
||
<span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-time-related-controls" data-reactid="703"><section class="code-box-demo" data-reactid="704"><form class="ant-form ant-form-horizontal" data-reactid="705"><div class="ant-row ant-form-item" data-reactid="706"><div class="ant-col-8 ant-form-item-label" data-reactid="707"><label for="date-picker" class="ant-form-item-required" title="DatePicker" data-reactid="708">DatePicker</label></div><div class="ant-col-16 ant-form-item-control-wrapper" data-reactid="709"><div class="ant-form-item-control " data-reactid="710"><span class="ant-calendar-picker" data-reactid="711"><span data-reactid="712"><input readonly="" value="" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="713"/><span class="ant-calendar-picker-icon" data-reactid="714"></span></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="715"><div class="ant-col-8 ant-form-item-label" data-reactid="716"><label for="date-time-picker" class="ant-form-item-required" title="DatePicker[showTime]" data-reactid="717">DatePicker[showTime]</label></div><div class="ant-col-16 ant-form-item-control-wrapper" data-reactid="718"><div class="ant-form-item-control " data-reactid="719"><span class="ant-calendar-picker" style="width:154px;" data-reactid="720"><span data-reactid="721"><input readonly="" value="" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="722"/><span class="ant-calendar-picker-icon" data-reactid="723"></span></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="724"><div class="ant-col-8 ant-form-item-label" data-reactid="725"><label for="month-picker" class="ant-form-item-required" title="MonthPicker" data-reactid="726">MonthPicker</label></div><div class="ant-col-16 ant-form-item-control-wrapper" data-reactid="727"><div class="ant-form-item-control " data-reactid="728"><span class="ant-calendar-picker" data-reactid="729"><span data-reactid="730"><input readonly="" value="" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="731"/><span class="ant-calendar-picker-icon" data-reactid="732"></span></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="733"><div class="ant-col-8 ant-form-item-label" data-reactid="734"><label for="range-picker" class="ant-form-item-required" title="RangePicker" data-reactid="735">RangePicker</label></div><div class="ant-col-16 ant-form-item-control-wrapper" data-reactid="736"><div class="ant-form-item-control " data-reactid="737"><span class="ant-calendar-picker" data-reactid="738"><span class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="739"><input readonly="" value="" placeholder="Start date" class="ant-calendar-range-picker-input" data-reactid="740"/><span class="ant-calendar-range-picker-separator" data-reactid="741"> ~ </span><input readonly="" value="" placeholder="End date" class="ant-calendar-range-picker-input" data-reactid="742"/><span class="ant-calendar-picker-icon" data-reactid="743"></span></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="744"><div class="ant-col-8 ant-form-item-label" data-reactid="745"><label for="range-time-picker" class="ant-form-item-required" title="RangePicker[showTime]" data-reactid="746">RangePicker[showTime]</label></div><div class="ant-col-16 ant-form-item-control-wrapper" data-reactid="747"><div class="ant-form-item-control " data-reactid="748"><span class="ant-calendar-picker" style="width:300px;" data-reactid="749"><span class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="750"><input readonly="" value="" placeholder="Start date" class="ant-calendar-range-picker-input" data-reactid="751"/><span class="ant-calendar-range-picker-separator" data-reactid="752"> ~ </span><input readonly="" value="" placeholder="End date" class="ant-calendar-range-picker-input" data-reactid="753"/><span class="ant-calendar-picker-icon" data-reactid="754"></span></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="755"><div class="ant-col-8 ant-form-item-label" data-reactid="756"><label for="time-picker" class="ant-form-item-required" title="TimePicker" data-reactid="757">TimePicker</label></div><div class="ant-col-16 ant-form-item-control-wrapper" data-reactid="758"><div class="ant-form-item-control " data-reactid="759"><span class="ant-time-picker ant-time-picker-large" data-reactid="760"><input type="text" class="ant-time-picker-input" placeholder="Select time" readonly="" value="" data-reactid="761"/><span class="ant-time-picker-icon" data-reactid="762"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="763"><div class="ant-col-16 ant-col-offset-8 ant-form-item-control-wrapper" data-reactid="764"><div class="ant-form-item-control " data-reactid="765"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="766"><span data-reactid="767">Submit</span></button></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="768"><div class="code-box-title" data-reactid="769"><a href="#components-form-demo-time-related-controls" data-reactid="770">Time-related Controls</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/time-related-controls.md" data-reactid="771"><i class="anticon anticon-edit" data-reactid="772"></i></a></div><div data-reactid="773"><p data-reactid="774"><!-- react-text: 775 -->After <!-- /react-text --><code data-reactid="776"><!-- react-text: 777 -->antd@2.0<!-- /react-text --></code><!-- react-text: 778 -->, the <!-- /react-text --><code data-reactid="779"><!-- react-text: 780 -->value<!-- /react-text --></code><!-- react-text: 781 --> of time-related components had been changed to <!-- /react-text --><code data-reactid="782"><!-- react-text: 783 -->moment<!-- /react-text --></code><!-- react-text: 784 -->. So, we need to pre-process those values.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="785"></i></section><section class="highlight-wrapper" data-reactid="786"><div class="highlight" data-reactid="787"><i class="anticon anticon-copy code-box-code-copy" data-reactid="788"></i><pre class="language-jsx" data-reactid="789"><code data-reactid="790"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> DatePicker<span class="token punctuation">,</span> TimePicker<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> MonthPicker <span class="token operator">=</span> DatePicker<span class="token punctuation">.</span>MonthPicker<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> RangePicker <span class="token operator">=</span> DatePicker<span class="token punctuation">.</span>RangePicker<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">TimeRelatedForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> fieldsValue<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment" spellcheck="true">// Should format date value before submit.</span>
|
||
<span class="token keyword">const</span> rangeValue <span class="token operator">=</span> fieldsValue<span class="token punctuation">[</span><span class="token string">'range-picker'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> rangeTimeValue <span class="token operator">=</span> fieldsValue<span class="token punctuation">[</span><span class="token string">'range-time-picker'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> values <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>fieldsValue<span class="token punctuation">,</span>
|
||
<span class="token string">'date-picker'</span><span class="token punctuation">:</span> fieldsValue<span class="token punctuation">[</span><span class="token string">'date-picker'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token string">'date-time-picker'</span><span class="token punctuation">:</span> fieldsValue<span class="token punctuation">[</span><span class="token string">'date-time-picker'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token string">'month-picker'</span><span class="token punctuation">:</span> fieldsValue<span class="token punctuation">[</span><span class="token string">'month-picker'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token string">'range-picker'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>rangeValue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> rangeValue<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token string">'range-time-picker'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
rangeTimeValue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
rangeTimeValue<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token string">'time-picker'</span><span class="token punctuation">:</span> fieldsValue<span class="token punctuation">[</span><span class="token string">'time-picker'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'object'</span><span class="token punctuation">,</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please select time!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> rangeConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'array'</span><span class="token punctuation">,</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please select time!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"DatePicker"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'date-picker'</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"DatePicker[showTime]"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'date-time-picker'</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span> <span class="token attr-name">showTime</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY-MM-DD</span> <span class="token attr-name"><span class="token namespace">HH:</span><span class="token namespace">mm:</span>ss"</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"MonthPicker"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'month-picker'</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonthPicker</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"RangePicker"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'range-picker'</span><span class="token punctuation">,</span> rangeConfig<span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RangePicker</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"RangePicker[showTime]"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'range-time-picker'</span><span class="token punctuation">,</span> rangeConfig<span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RangePicker</span> <span class="token attr-name">showTime</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY-MM-DD</span> <span class="token attr-name"><span class="token namespace">HH:</span><span class="token namespace">mm:</span>ss"</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"TimePicker"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'time-picker'</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TimePicker</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedTimeRelatedForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>TimeRelatedForm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedTimeRelatedForm</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-customized-form-controls" data-reactid="791"><section class="code-box-demo" data-reactid="792"><form class="ant-form ant-form-inline" data-reactid="793"><div class="ant-row ant-form-item" data-reactid="794"><div class="ant-form-item-label" data-reactid="795"><label for="price" class="" title="Price" data-reactid="796">Price</label></div><div class="ant-form-item-control-wrapper" data-reactid="797"><div class="ant-form-item-control has-success" data-reactid="798"><span data-reactid="799"><input type="text" value="0" style="width:65%;margin-right:3%;" class="ant-input ant-input-lg" data-reactid="800"/><div style="width:32%;" class="ant-select-lg ant-select ant-select-enabled" data-reactid="801"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="802"><div class="ant-select-selection__rendered" data-reactid="803"><div class="ant-select-selection-selected-value" title="RMB" style="display:block;opacity:1;" data-reactid="804">RMB</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="805"><b data-reactid="806"></b></span></div></div></span></div></div></div><div class="ant-row ant-form-item" data-reactid="807"><div class="ant-form-item-control-wrapper" data-reactid="808"><div class="ant-form-item-control " data-reactid="809"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="810"><span data-reactid="811">Submit</span></button></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="812"><div class="code-box-title" data-reactid="813"><a href="#components-form-demo-customized-form-controls" data-reactid="814">Customized Form Controls</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/customized-form-controls.md" data-reactid="815"><i class="anticon anticon-edit" data-reactid="816"></i></a></div><div data-reactid="817"><p data-reactid="818"><!-- react-text: 819 -->Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:<!-- /react-text --></p><blockquote data-reactid="820"><ul data-reactid="821"><li data-reactid="822"><p data-reactid="823"><!-- react-text: 824 -->It has a controlled property <!-- /react-text --><code data-reactid="825"><!-- react-text: 826 -->value<!-- /react-text --></code><!-- react-text: 827 --> or other name which is equal to the value of <!-- /react-text --><a href="http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters" data-reactid="828"><code data-reactid="829"><!-- react-text: 830 -->valuePropName<!-- /react-text --></code></a><!-- react-text: 831 -->.<!-- /react-text --></p></li><li data-reactid="832"><p data-reactid="833"><!-- react-text: 834 -->It has event <!-- /react-text --><code data-reactid="835"><!-- react-text: 836 -->onChange<!-- /react-text --></code><!-- react-text: 837 --> or an event which name is equal to the value of <!-- /react-text --><a href="http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters" data-reactid="838"><code data-reactid="839"><!-- react-text: 840 -->trigger<!-- /react-text --></code></a><!-- react-text: 841 -->.<!-- /react-text --></p></li></ul></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="842"></i></section><section class="highlight-wrapper" data-reactid="843"><div class="highlight" data-reactid="844"><i class="anticon anticon-copy code-box-code-copy" data-reactid="845"></i><pre class="language-jsx" data-reactid="846"><code data-reactid="847"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">PriceInput</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
number<span class="token punctuation">:</span> value<span class="token punctuation">.</span>number <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
currency<span class="token punctuation">:</span> value<span class="token punctuation">.</span>currency <span class="token operator">||</span> <span class="token string">'rmb'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment" spellcheck="true">// Should be a controlled component.</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'value'</span> <span class="token keyword">in</span> nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> value <span class="token operator">=</span> nextProps<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
handleNumberChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token string">'value'</span> <span class="token keyword">in</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> number <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerChange</span><span class="token punctuation">(</span><span class="token punctuation">{</span> number <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleCurrencyChange <span class="token operator">=</span> <span class="token punctuation">(</span>currency<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token string">'value'</span> <span class="token keyword">in</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> currency <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerChange</span><span class="token punctuation">(</span><span class="token punctuation">{</span> currency <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
triggerChange <span class="token operator">=</span> <span class="token punctuation">(</span>changedValue<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token comment" spellcheck="true">// Should provide an event to pass value to Form.</span>
|
||
<span class="token keyword">const</span> onChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChange<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>onChange<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">onChange</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">,</span> changedValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> size <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span>
|
||
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>number<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleNumberChange<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'65%'</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token string">'3%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>
|
||
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>currency<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'32%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleCurrencyChange<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rmb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>RMB<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dollar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dollar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
checkPrice <span class="token operator">=</span> <span class="token punctuation">(</span>rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>number <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">'Price must greater than zero!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Price<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'price'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
initialValue<span class="token punctuation">:</span> <span class="token punctuation">{</span> number<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> currency<span class="token punctuation">:</span> <span class="token string">'rmb'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> validator<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>checkPrice <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>PriceInput</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedDemo <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Demo<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedDemo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-global-state" data-reactid="848"><section class="code-box-demo" data-reactid="849"><div data-reactid="850"><form class="ant-form ant-form-inline" data-reactid="851"><div class="ant-row ant-form-item" data-reactid="852"><div class="ant-form-item-label" data-reactid="853"><label for="username" class="ant-form-item-required" title="Username" data-reactid="854">Username</label></div><div class="ant-form-item-control-wrapper" data-reactid="855"><div class="ant-form-item-control has-success" data-reactid="856"><input type="text" value="BENJYCUI" id="username" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="857"/></div></div></div></form><pre class="language-bash" data-reactid="858">{
|
||
"username": {
|
||
"value": "benjycui"
|
||
}
|
||
}</pre></div><style data-reactid="859">
|
||
#components-form-demo-global-state .language-bash {
|
||
max-width: 400px;
|
||
border-radius: 6px;
|
||
margin-top: 24px;
|
||
}
|
||
</style></section><section class="code-box-meta markdown" data-reactid="860"><div class="code-box-title" data-reactid="861"><a href="#components-form-demo-global-state" data-reactid="862">Store Form Data into Upper Component</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/global-state.md" data-reactid="863"><i class="anticon anticon-edit" data-reactid="864"></i></a></div><div data-reactid="865"><p data-reactid="866"><!-- react-text: 867 -->We can store form data into upper component or <!-- /react-text --><a href="https://github.com/reactjs/redux" data-reactid="868"><!-- react-text: 869 -->Redux<!-- /react-text --></a><!-- react-text: 870 --> or <!-- /react-text --><a href="https://github.com/dvajs/dva" data-reactid="871"><!-- react-text: 872 -->dva<!-- /react-text --></a><!-- react-text: 873 --> by using <!-- /react-text --><code data-reactid="874"><!-- react-text: 875 -->onFieldsChange<!-- /react-text --></code><!-- react-text: 876 --> and <!-- /react-text --><code data-reactid="877"><!-- react-text: 878 -->mapPropsToFields<!-- /react-text --></code><!-- react-text: 879 -->, see more at this <!-- /react-text --><a href="http://react-component.github.io/form/examples/redux.html" data-reactid="880"><!-- react-text: 881 -->rc-form demo<!-- /react-text --></a><!-- react-text: 882 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="883"></i></section><section class="highlight-wrapper" data-reactid="884"><div class="highlight" data-reactid="885"><i class="anticon anticon-copy code-box-code-copy" data-reactid="886"></i><pre class="language-jsx" data-reactid="887"><code data-reactid="888"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> CustomizedForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token function">onFieldsChange</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> changedFields<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>changedFields<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">mapPropsToFields</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
username<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>props<span class="token punctuation">.</span>username<span class="token punctuation">,</span>
|
||
value<span class="token punctuation">:</span> props<span class="token punctuation">.</span>username<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">onValuesChange</span><span class="token punctuation">(</span>_<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Username is required!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
fields<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
username<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token string">'benjycui'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
handleFormChange <span class="token operator">=</span> <span class="token punctuation">(</span>changedFields<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
fields<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fields<span class="token punctuation">,</span> <span class="token operator">...</span>changedFields <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> fields <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fields<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>CustomizedForm <span class="token punctuation">{</span><span class="token operator">...</span>fields<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleFormChange<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>language-bash<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>fields<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-without-form-create" data-reactid="889"><section class="code-box-demo" data-reactid="890"><form class="ant-form ant-form-horizontal" data-reactid="891"><div class="ant-row ant-form-item ant-form-item-with-help" data-reactid="892"><div class="ant-col-7 ant-form-item-label" data-reactid="893"><label class="" title="Prime between 8 & 12" data-reactid="894">Prime between 8 & 12</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="895"><div class="ant-form-item-control " data-reactid="896"><div class="ant-input-number ant-input-number-lg" data-reactid="897"><div class="ant-input-number-handler-wrap" data-reactid="898"><span unselectable="unselectable" class="ant-input-number-handler ant-input-number-handler-up " data-reactid="899"><span unselectable="unselectable" class="ant-input-number-handler-up-inner" data-reactid="900"></span></span><span unselectable="unselectable" class="ant-input-number-handler ant-input-number-handler-down " data-reactid="901"><span unselectable="unselectable" class="ant-input-number-handler-down-inner" data-reactid="902"></span></span></div><div class="ant-input-number-input-wrap" data-reactid="903"><input min="8" max="12" class="ant-input-number-input" autocomplete="off" value="11" data-reactid="904"/></div></div><div class="ant-form-explain" data-reactid="905">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="906"><div class="code-box-title" data-reactid="907"><a href="#components-form-demo-without-form-create" data-reactid="908">Handle Form Data Manually</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/without-form-create.md" data-reactid="909"><i class="anticon anticon-edit" data-reactid="910"></i></a></div><div data-reactid="911"><p data-reactid="912"><code data-reactid="913"><!-- react-text: 914 -->Form.create<!-- /react-text --></code><!-- react-text: 915 --> will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop <!-- /react-text --><code data-reactid="916"><!-- react-text: 917 -->Form.create<!-- /react-text --></code><!-- react-text: 918 --> and handle form data manually.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="919"></i></section><section class="highlight-wrapper" data-reactid="920"><div class="highlight" data-reactid="921"><i class="anticon anticon-copy code-box-code-copy" data-reactid="922"></i><pre class="language-jsx" data-reactid="923"><code data-reactid="924"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> InputNumber <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">validatePrimeNumber</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>number <span class="token operator">===</span> <span class="token number">11</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
validateStatus<span class="token punctuation">:</span> <span class="token string">'success'</span><span class="token punctuation">,</span>
|
||
errorMsg<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
validateStatus<span class="token punctuation">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
|
||
errorMsg<span class="token punctuation">:</span> <span class="token string">'The prime between 8 and 12 is 11!'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">RawForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
number<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
value<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
handleNumberChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
number<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span><span class="token function">validatePrimeNumber</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
value<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">7</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>number<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> tips <span class="token operator">=</span> <span class="token string">'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Prime between 8 & 12"</span>
|
||
validateStatus<span class="token operator">=</span><span class="token punctuation">{</span>number<span class="token punctuation">.</span>validateStatus<span class="token punctuation">}</span>
|
||
help<span class="token operator">=</span><span class="token punctuation">{</span>number<span class="token punctuation">.</span>errorMsg <span class="token operator">||</span> tips<span class="token punctuation">}</span>
|
||
<span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>InputNumber</span>
|
||
<span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>number<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleNumberChange<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RawForm</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-validate-static" data-reactid="925"><section class="code-box-demo" data-reactid="926"><form class="ant-form ant-form-horizontal" data-reactid="927"><div class="ant-row ant-form-item ant-form-item-with-help" data-reactid="928"><div class="ant-col-5 ant-form-item-label" data-reactid="929"><label class="" title="Fail" data-reactid="930">Fail</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="931"><div class="ant-form-item-control has-error" data-reactid="932"><input type="text" placeholder="unavailable choice" id="error" class="ant-input ant-input-lg" data-reactid="933"/><div class="ant-form-explain" data-reactid="934">Should be combination of numbers & alphabets</div></div></div></div><div class="ant-row ant-form-item" data-reactid="935"><div class="ant-col-5 ant-form-item-label" data-reactid="936"><label class="" title="Warning" data-reactid="937">Warning</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="938"><div class="ant-form-item-control has-warning" data-reactid="939"><input type="text" placeholder="Warning" id="warning" class="ant-input ant-input-lg" data-reactid="940"/></div></div></div><div class="ant-row ant-form-item ant-form-item-with-help" data-reactid="941"><div class="ant-col-5 ant-form-item-label" data-reactid="942"><label class="" title="Validating" data-reactid="943">Validating</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="944"><div class="ant-form-item-control has-feedback is-validating" data-reactid="945"><input type="text" placeholder="I'm the content is being validated" id="validating" class="ant-input ant-input-lg" data-reactid="946"/><div class="ant-form-explain" data-reactid="947">The information is being validated...</div></div></div></div><div class="ant-row ant-form-item" data-reactid="948"><div class="ant-col-5 ant-form-item-label" data-reactid="949"><label class="" title="Success" data-reactid="950">Success</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="951"><div class="ant-form-item-control has-feedback has-success" data-reactid="952"><input type="text" placeholder="I'm the content" id="success" class="ant-input ant-input-lg" data-reactid="953"/></div></div></div><div class="ant-row ant-form-item" data-reactid="954"><div class="ant-col-5 ant-form-item-label" data-reactid="955"><label class="" title="Warning" data-reactid="956">Warning</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="957"><div class="ant-form-item-control has-feedback has-warning" data-reactid="958"><input type="text" placeholder="Warning" id="warning" class="ant-input ant-input-lg" data-reactid="959"/></div></div></div><div class="ant-row ant-form-item ant-form-item-with-help" data-reactid="960"><div class="ant-col-5 ant-form-item-label" data-reactid="961"><label class="" title="Fail" data-reactid="962">Fail</label></div><div class="ant-col-12 ant-form-item-control-wrapper" data-reactid="963"><div class="ant-form-item-control has-feedback has-error" data-reactid="964"><input type="text" placeholder="unavailable choice" id="error" class="ant-input ant-input-lg" data-reactid="965"/><div class="ant-form-explain" data-reactid="966">Should be combination of numbers & alphabets</div></div></div></div><div class="ant-row ant-form-item ant-form-item-with-help" data-reactid="967"><div class="ant-col-5 ant-form-item-label" data-reactid="968"><label class="" title="inline" data-reactid="969">inline</label></div><div class="ant-form-item-control-wrapper" data-reactid="970"><div class="ant-form-item-control " data-reactid="971"><div class="ant-col-6" data-reactid="972"><div class="ant-row ant-form-item ant-form-item-with-help" data-reactid="973"><div class="ant-form-item-control-wrapper" data-reactid="974"><div class="ant-form-item-control has-error" data-reactid="975"><span class="ant-calendar-picker" data-reactid="976"><span data-reactid="977"><input readonly="" value="" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="978"/><span class="ant-calendar-picker-icon" data-reactid="979"></span></span></span><div class="ant-form-explain" data-reactid="980">Please select the correct date</div></div></div></div></div><div class="ant-col-1" data-reactid="981"><p class="ant-form-split" data-reactid="982">-</p></div><div class="ant-col-6" data-reactid="983"><div class="ant-row ant-form-item" data-reactid="984"><div class="ant-form-item-control-wrapper" data-reactid="985"><div class="ant-form-item-control " data-reactid="986"><span class="ant-calendar-picker" data-reactid="987"><span data-reactid="988"><input readonly="" value="" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-lg" data-reactid="989"/><span class="ant-calendar-picker-icon" data-reactid="990"></span></span></span></div></div></div></div><div class="ant-form-explain" data-reactid="991"></div></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="992"><div class="code-box-title" data-reactid="993"><a href="#components-form-demo-validate-static" data-reactid="994">Customized Validation</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/validate-static.md" data-reactid="995"><i class="anticon anticon-edit" data-reactid="996"></i></a></div><div data-reactid="997"><p data-reactid="998"><!-- react-text: 999 -->We provide properties like <!-- /react-text --><code data-reactid="1000"><!-- react-text: 1001 -->validateStatus<!-- /react-text --></code><!-- react-text: 1002 --> <!-- /react-text --><code data-reactid="1003"><!-- react-text: 1004 -->help<!-- /react-text --></code><!-- react-text: 1005 --> <!-- /react-text --><code data-reactid="1006"><!-- react-text: 1007 -->hasFeedback<!-- /react-text --></code><!-- react-text: 1008 --> to customize your own validate status and message, without using <!-- /react-text --><code data-reactid="1009"><!-- react-text: 1010 -->Form.create<!-- /react-text --></code><!-- react-text: 1011 --> and <!-- /react-text --><code data-reactid="1012"><!-- react-text: 1013 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1014 -->.<!-- /react-text --></p><ol data-reactid="1015"><li data-reactid="1016"><p data-reactid="1017"><code data-reactid="1018"><!-- react-text: 1019 -->validateStatus<!-- /react-text --></code><!-- react-text: 1020 -->: validate status of form components which could be 'success', 'warning', 'error', 'validating'.<!-- /react-text --></p></li><li data-reactid="1021"><p data-reactid="1022"><code data-reactid="1023"><!-- react-text: 1024 -->hasFeedback<!-- /react-text --></code><!-- react-text: 1025 -->: display feed icon of input control<!-- /react-text --></p></li><li data-reactid="1026"><p data-reactid="1027"><code data-reactid="1028"><!-- react-text: 1029 -->help<!-- /react-text --></code><!-- react-text: 1030 -->: display validate message.<!-- /react-text --></p></li></ol></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1031"></i></section><section class="highlight-wrapper" data-reactid="1032"><div class="highlight" data-reactid="1033"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1034"></i><pre class="language-jsx" data-reactid="1035"><code data-reactid="1036"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> DatePicker<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Fail<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">help</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Should</span> <span class="token attr-name">be</span> <span class="token attr-name">combination</span> <span class="token attr-name">of</span> <span class="token attr-name">numbers</span> <span class="token attr-name">&</span> <span class="token attr-name">alphabets"</span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>unavailable</span> <span class="token attr-name">choice"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Warning<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Warning<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Validating<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">hasFeedback</span>
|
||
<span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validating<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">help</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>The</span> <span class="token attr-name">information</span> <span class="token attr-name">is</span> <span class="token attr-name">being</span> <span class="token attr-name">validated..."</span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>I<span class="token punctuation">'</span>m</span> <span class="token attr-name">the</span> <span class="token attr-name">content</span> <span class="token attr-name">is</span> <span class="token attr-name">being</span> <span class="token attr-name">validated"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validating<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Success<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">hasFeedback</span>
|
||
<span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>I<span class="token punctuation">'</span>m</span> <span class="token attr-name">the</span> <span class="token attr-name">content"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Warning<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">hasFeedback</span>
|
||
<span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Warning<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Fail<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">hasFeedback</span>
|
||
<span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">help</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Should</span> <span class="token attr-name">be</span> <span class="token attr-name">combination</span> <span class="token attr-name">of</span> <span class="token attr-name">numbers</span> <span class="token attr-name">&</span> <span class="token attr-name">alphabets"</span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>unavailable</span> <span class="token attr-name">choice"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">help</span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">validateStatus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span> <span class="token attr-name">help</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please</span> <span class="token attr-name">select</span> <span class="token attr-name">the</span> <span class="token attr-name">correct</span> <span class="token attr-name">date"</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-form-split<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token operator">-</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-validate-other" data-reactid="1037"><section class="code-box-demo" data-reactid="1038"><form class="ant-form ant-form-horizontal" data-reactid="1039"><div class="ant-row ant-form-item" data-reactid="1040"><div class="ant-col-6 ant-form-item-label" data-reactid="1041"><label class="" title="Nation" data-reactid="1042">Nation</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1043"><div class="ant-form-item-control " data-reactid="1044"><span class="ant-form-text" data-reactid="1045">China</span></div></div></div><div class="ant-row ant-form-item" data-reactid="1046"><div class="ant-col-6 ant-form-item-label" data-reactid="1047"><label for="select" class="ant-form-item-required" title="Select" data-reactid="1048">Select</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1049"><div class="ant-form-item-control " data-reactid="1050"><div class="ant-select-lg ant-select ant-select-enabled" data-reactid="1051"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="1052"><div class="ant-select-selection__rendered" data-reactid="1053"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="1054">Please select a country</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="1055"><b data-reactid="1056"></b></span></div></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1057"><div class="ant-col-6 ant-form-item-label" data-reactid="1058"><label for="select-multiple" class="ant-form-item-required" title="Select[multiple]" data-reactid="1059">Select[multiple]</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1060"><div class="ant-form-item-control " data-reactid="1061"><div class="ant-select-lg ant-select ant-select-enabled" data-reactid="1062"><div class="ant-select-selection
|
||
ant-select-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="1063"><div class="ant-select-selection__rendered" data-reactid="1064"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="1065">Please select favourite colors</div><ul data-reactid="1066"><li class="ant-select-search ant-select-search--inline" data-reactid="1067"><div class="ant-select-search__field__wrap" data-reactid="1068"><input value="" class="ant-select-search__field" data-reactid="1069"/><span class="ant-select-search__field__mirror" data-reactid="1070"><!-- react-text: 1071 --><!-- /react-text --><!-- react-text: 1072 --> <!-- /react-text --></span></div></li></ul></div></div></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1073"><div class="ant-col-6 ant-form-item-label" data-reactid="1074"><label for="input-number" class="" title="InputNumber" data-reactid="1075">InputNumber</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1076"><div class="ant-form-item-control has-success" data-reactid="1077"><div class="ant-input-number ant-input-number-lg" data-reactid="1078"><div class="ant-input-number-handler-wrap" data-reactid="1079"><span unselectable="unselectable" class="ant-input-number-handler ant-input-number-handler-up " data-reactid="1080"><span unselectable="unselectable" class="ant-input-number-handler-up-inner" data-reactid="1081"></span></span><span unselectable="unselectable" class="ant-input-number-handler ant-input-number-handler-down " data-reactid="1082"><span unselectable="unselectable" class="ant-input-number-handler-down-inner" data-reactid="1083"></span></span></div><div class="ant-input-number-input-wrap" data-reactid="1084"><input min="1" max="10" class="ant-input-number-input" autocomplete="off" value="3" data-reactid="1085"/></div></div><span class="ant-form-text" data-reactid="1086"> machines</span></div></div></div><div class="ant-row ant-form-item" data-reactid="1087"><div class="ant-col-6 ant-form-item-label" data-reactid="1088"><label for="switch" class="" title="Switch" data-reactid="1089">Switch</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1090"><div class="ant-form-item-control " data-reactid="1091"><span id="switch" data-__meta="[object Object]" class="ant-switch" tabindex="0" data-reactid="1092"><span class="ant-switch-inner" data-reactid="1093"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="1094"><div class="ant-col-6 ant-form-item-label" data-reactid="1095"><label for="slider" class="" title="Slider" data-reactid="1096">Slider</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1097"><div class="ant-form-item-control " data-reactid="1098"><div class="ant-slider ant-slider-with-marks" data-reactid="1099"><div class="ant-slider-rail" data-reactid="1100"></div><div class="ant-slider-track" style="visibility:visible;left:0%;width:0%;" data-reactid="1101"></div><div class="ant-slider-step" data-reactid="1102"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;" data-reactid="1103"></span><span class="ant-slider-dot" style="left:20%;" data-reactid="1104"></span><span class="ant-slider-dot" style="left:40%;" data-reactid="1105"></span><span class="ant-slider-dot" style="left:60%;" data-reactid="1106"></span><span class="ant-slider-dot" style="left:80%;" data-reactid="1107"></span><span class="ant-slider-dot" style="left:100%;" data-reactid="1108"></span></div><div class="ant-slider-handle" style="left:0%;" data-reactid="1109"></div><div class="ant-slider-mark" data-reactid="1110"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:0%;" data-reactid="1111">A</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:20%;" data-reactid="1112">B</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:40%;" data-reactid="1113">C</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:60%;" data-reactid="1114">D</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:80%;" data-reactid="1115">E</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:100%;" data-reactid="1116">F</span></div></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1117"><div class="ant-col-6 ant-form-item-label" data-reactid="1118"><label for="radio-group" class="" title="Radio.Group" data-reactid="1119">Radio.Group</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1120"><div class="ant-form-item-control " data-reactid="1121"><div class="ant-radio-group ant-radio-group-large" data-reactid="1122"><label class="ant-radio-wrapper" data-reactid="1123"><span class="ant-radio" data-reactid="1124"><input type="radio" class="ant-radio-input" data-reactid="1125"/><span class="ant-radio-inner" data-reactid="1126"></span></span><span data-reactid="1127">item 1</span></label><label class="ant-radio-wrapper" data-reactid="1128"><span class="ant-radio" data-reactid="1129"><input type="radio" class="ant-radio-input" data-reactid="1130"/><span class="ant-radio-inner" data-reactid="1131"></span></span><span data-reactid="1132">item 2</span></label><label class="ant-radio-wrapper" data-reactid="1133"><span class="ant-radio" data-reactid="1134"><input type="radio" class="ant-radio-input" data-reactid="1135"/><span class="ant-radio-inner" data-reactid="1136"></span></span><span data-reactid="1137">item 3</span></label></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1138"><div class="ant-col-6 ant-form-item-label" data-reactid="1139"><label for="radio-button" class="" title="Radio.Button" data-reactid="1140">Radio.Button</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1141"><div class="ant-form-item-control " data-reactid="1142"><div class="ant-radio-group ant-radio-group-large" data-reactid="1143"><label class="ant-radio-button-wrapper" data-reactid="1144"><span class="ant-radio-button" data-reactid="1145"><input type="radio" class="ant-radio-button-input" data-reactid="1146"/><span class="ant-radio-button-inner" data-reactid="1147"></span></span><span data-reactid="1148">item 1</span></label><label class="ant-radio-button-wrapper" data-reactid="1149"><span class="ant-radio-button" data-reactid="1150"><input type="radio" class="ant-radio-button-input" data-reactid="1151"/><span class="ant-radio-button-inner" data-reactid="1152"></span></span><span data-reactid="1153">item 2</span></label><label class="ant-radio-button-wrapper" data-reactid="1154"><span class="ant-radio-button" data-reactid="1155"><input type="radio" class="ant-radio-button-input" data-reactid="1156"/><span class="ant-radio-button-inner" data-reactid="1157"></span></span><span data-reactid="1158">item 3</span></label></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1159"><div class="ant-col-6 ant-form-item-label" data-reactid="1160"><label for="upload" class="" title="Upload" data-reactid="1161">Upload</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1162"><div class="ant-form-item-control " data-reactid="1163"><span class="" data-reactid="1164"><div class="ant-upload ant-upload-select ant-upload-select-picture" style="display:;" data-reactid="1165"><!-- react-empty: 1166 --></div><div class="ant-upload-list ant-upload-list-picture" data-reactid="1167"></div></span><div class="ant-form-extra" data-reactid="1168">longgggggggggggggggggggggggggggggggggg</div></div></div></div><div class="ant-row ant-form-item" data-reactid="1169"><div class="ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper" data-reactid="1170"><div class="ant-form-item-control " data-reactid="1171"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="1172"><span data-reactid="1173">Submit</span></button></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="1174"><div class="code-box-title" data-reactid="1175"><a href="#components-form-demo-validate-other" data-reactid="1176">Other Form Controls</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/validate-other.md" data-reactid="1177"><i class="anticon anticon-edit" data-reactid="1178"></i></a></div><div data-reactid="1179"><p data-reactid="1180"><!-- react-text: 1181 -->Demostration for validataion configuration for form controls which are not show in the above demos.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1182"></i></section><section class="highlight-wrapper" data-reactid="1183"><div class="highlight" data-reactid="1184"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1185"></i><pre class="language-jsx" data-reactid="1186"><code data-reactid="1187"><span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||
Form<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> InputNumber<span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span>
|
||
Slider<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Upload<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> RadioButton <span class="token operator">=</span> Radio<span class="token punctuation">.</span>Button<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> RadioGroup <span class="token operator">=</span> Radio<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
normFile <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> e<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> e <span class="token operator">&&</span> e<span class="token punctuation">.</span>fileList<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Nation"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-form-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>China<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Select"</span>
|
||
hasFeedback
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please select your country!'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please</span> <span class="token attr-name">select</span> <span class="token attr-name">a</span> <span class="token attr-name">country"</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>china<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>China<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>use<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>U<span class="token punctuation">.</span>S<span class="token punctuation">.</span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Select[multiple]"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'select-multiple'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please select your favourite colors!'</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> <span class="token string">'array'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">multiple</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please</span> <span class="token attr-name">select</span> <span class="token attr-name">favourite</span> <span class="token attr-name">colors"</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Red<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"InputNumber"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'input-number'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initialValue<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>InputNumber</span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-form-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> machines<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Switch"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'switch'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> valuePropName<span class="token punctuation">:</span> <span class="token string">'checked'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Switch</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Slider"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'slider'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Slider</span> <span class="token attr-name">marks</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token number">0</span><span class="token punctuation">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">:</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">:</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">:</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">:</span> <span class="token string">'E'</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">:</span> <span class="token string">'F'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Radio.Group"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'radio-group'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioGroup</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>item <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>item <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>item <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioGroup</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Radio.Button"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'radio-button'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioGroup</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioButton</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>item <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioButton</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioButton</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>item <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioButton</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioButton</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>item <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioButton</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioGroup</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token operator"><</span>FormItem
|
||
<span class="token punctuation">{</span><span class="token operator">...</span>formItemLayout<span class="token punctuation">}</span>
|
||
label<span class="token operator">=</span><span class="token string">"Upload"</span>
|
||
extra<span class="token operator">=</span><span class="token string">"longgggggggggggggggggggggggggggggggggg"</span>
|
||
<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'upload'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
valuePropName<span class="token punctuation">:</span> <span class="token string">'fileList'</span><span class="token punctuation">,</span>
|
||
getValueFromEvent<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>normFile<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Upload</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/upload.do<span class="token punctuation">"</span></span> <span class="token attr-name">listType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>picture<span class="token punctuation">"</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleUpload<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>upload<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Click to upload
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Upload</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedDemo <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Demo<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedDemo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-coordinated" data-reactid="1188"><section class="code-box-demo" data-reactid="1189"><form class="ant-form ant-form-horizontal" data-reactid="1190"><div class="ant-row ant-form-item" data-reactid="1191"><div class="ant-col-4 ant-form-item-label" data-reactid="1192"><label for="note" class="ant-form-item-required" title="Note" data-reactid="1193">Note</label></div><div class="ant-col-8 ant-form-item-control-wrapper" data-reactid="1194"><div class="ant-form-item-control " data-reactid="1195"><input type="text" value="" id="note" data-__meta="[object Object]" class="ant-input ant-input-lg" data-reactid="1196"/></div></div></div><div class="ant-row ant-form-item" data-reactid="1197"><div class="ant-col-4 ant-form-item-label" data-reactid="1198"><label for="gender" class="ant-form-item-required" title="Gender" data-reactid="1199">Gender</label></div><div class="ant-col-8 ant-form-item-control-wrapper" data-reactid="1200"><div class="ant-form-item-control " data-reactid="1201"><div class="ant-select-lg ant-select ant-select-enabled" data-reactid="1202"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="1203"><div class="ant-select-selection__rendered" data-reactid="1204"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="1205">Select a option and change input text above</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="1206"><b data-reactid="1207"></b></span></div></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1208"><div class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper" data-reactid="1209"><div class="ant-form-item-control " data-reactid="1210"><button type="submit" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="1211"><span data-reactid="1212">Submit</span></button></div></div></div></form></section><section class="code-box-meta markdown" data-reactid="1213"><div class="code-box-title" data-reactid="1214"><a href="#components-form-demo-coordinated" data-reactid="1215">Coordinated Controls</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/coordinated.md" data-reactid="1216"><i class="anticon anticon-edit" data-reactid="1217"></i></a></div><div data-reactid="1218"><p data-reactid="1219"><!-- react-text: 1220 -->Use <!-- /react-text --><code data-reactid="1221"><!-- react-text: 1222 -->setFieldsValue<!-- /react-text --></code><!-- react-text: 1223 --> to set other control's value programmaticly.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1224"></i></section><section class="highlight-wrapper" data-reactid="1225"><div class="highlight" data-reactid="1226"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1227"></i><pre class="language-jsx" data-reactid="1228"><code data-reactid="1229"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
handleSubmit <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Received values of form: '</span><span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleSelectChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">setFieldsValue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
note<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Hi, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value <span class="token operator">===</span> <span class="token string">'male'</span> <span class="token operator">?</span> <span class="token string">'man'</span> <span class="token punctuation">:</span> <span class="token string">'lady'</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!`</span></span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Note<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'note'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please input your note!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Input</span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Gender<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">labelCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'gender'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'Please select your gender!'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
onChange<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>handleSelectChange<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select</span> <span class="token attr-name">a</span> <span class="token attr-name">option</span> <span class="token attr-name">and</span> <span class="token attr-name">change</span> <span class="token attr-name">input</span> <span class="token attr-name">text</span> <span class="token attr-name">above"</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>male<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>female<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">wrapperCol</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Submit
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> WrappedApp <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WrappedApp</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-form-demo-layout" data-reactid="1230"><section class="code-box-demo" data-reactid="1231"><div data-reactid="1232"><form class="ant-form ant-form-horizontal" data-reactid="1233"><div class="ant-row ant-form-item" data-reactid="1234"><div class="ant-col-4 ant-form-item-label" data-reactid="1235"><label class="" title="Form Layout" data-reactid="1236">Form Layout</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1237"><div class="ant-form-item-control " data-reactid="1238"><div class="ant-radio-group ant-radio-group-large" data-reactid="1239"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="1240"><span class="ant-radio-button ant-radio-button-checked" data-reactid="1241"><input type="radio" class="ant-radio-button-input" checked="" data-reactid="1242"/><span class="ant-radio-button-inner" data-reactid="1243"></span></span><span data-reactid="1244">Horizontal</span></label><label class="ant-radio-button-wrapper" data-reactid="1245"><span class="ant-radio-button" data-reactid="1246"><input type="radio" class="ant-radio-button-input" data-reactid="1247"/><span class="ant-radio-button-inner" data-reactid="1248"></span></span><span data-reactid="1249">Vertical</span></label><label class="ant-radio-button-wrapper" data-reactid="1250"><span class="ant-radio-button" data-reactid="1251"><input type="radio" class="ant-radio-button-input" data-reactid="1252"/><span class="ant-radio-button-inner" data-reactid="1253"></span></span><span data-reactid="1254">Inline</span></label></div></div></div></div><div class="ant-row ant-form-item" data-reactid="1255"><div class="ant-col-4 ant-form-item-label" data-reactid="1256"><label class="" title="Field A" data-reactid="1257">Field A</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1258"><div class="ant-form-item-control " data-reactid="1259"><input type="text" placeholder="input placeholder" class="ant-input ant-input-lg" data-reactid="1260"/></div></div></div><div class="ant-row ant-form-item" data-reactid="1261"><div class="ant-col-4 ant-form-item-label" data-reactid="1262"><label class="" title="Field B" data-reactid="1263">Field B</label></div><div class="ant-col-14 ant-form-item-control-wrapper" data-reactid="1264"><div class="ant-form-item-control " data-reactid="1265"><input type="text" placeholder="input placeholder" class="ant-input ant-input-lg" data-reactid="1266"/></div></div></div><div class="ant-row ant-form-item" data-reactid="1267"><div class="ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper" data-reactid="1268"><div class="ant-form-item-control " data-reactid="1269"><button type="button" class="ant-btn ant-btn-primary ant-btn-lg" data-reactid="1270"><span data-reactid="1271">Submit</span></button></div></div></div></form></div></section><section class="code-box-meta markdown" data-reactid="1272"><div class="code-box-title" data-reactid="1273"><a href="#components-form-demo-layout" data-reactid="1274">Form Layout</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/form/demo/layout.md" data-reactid="1275"><i class="anticon anticon-edit" data-reactid="1276"></i></a></div><div data-reactid="1277"><p data-reactid="1278"><!-- react-text: 1279 -->There are three layout for form: <!-- /react-text --><code data-reactid="1280"><!-- react-text: 1281 -->horizontal<!-- /react-text --></code><!-- react-text: 1282 -->, <!-- /react-text --><code data-reactid="1283"><!-- react-text: 1284 -->vertical<!-- /react-text --></code><!-- react-text: 1285 -->, <!-- /react-text --><code data-reactid="1286"><!-- react-text: 1287 -->inline<!-- /react-text --></code><!-- react-text: 1288 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1289"></i></section><section class="highlight-wrapper" data-reactid="1290"><div class="highlight" data-reactid="1291"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1292"></i><pre class="language-jsx" data-reactid="1293"><code data-reactid="1294"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Radio <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">FormLayoutDemo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
formLayout<span class="token punctuation">:</span> <span class="token string">'horizontal'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleFormLayoutChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> formLayout<span class="token punctuation">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> formLayout <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> formItemLayout <span class="token operator">=</span> formLayout <span class="token operator">===</span> <span class="token string">'horizontal'</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
|
||
labelCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> buttonItemLayout <span class="token operator">=</span> formLayout <span class="token operator">===</span> <span class="token string">'horizontal'</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
|
||
wrapperCol<span class="token punctuation">:</span> <span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">14</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">layout</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>formLayout<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Form</span> <span class="token attr-name">Layout"</span>
|
||
<span class="token attr-name">{...formItemLayout}</span>
|
||
<span class="token punctuation">></span>
|
||
<span class="token attr-name"><Radio.Group</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleFormLayoutChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Horizontal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio.Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Vertical<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio.Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Inline<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio.Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio.Group</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Field</span> <span class="token attr-name">A"</span>
|
||
<span class="token attr-name">{...formItemLayout}</span>
|
||
<span class="token punctuation">></span>
|
||
<span class="token attr-name"><Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">placeholder"</span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Field</span> <span class="token attr-name">B"</span>
|
||
<span class="token attr-name">{...formItemLayout}</span>
|
||
<span class="token punctuation">></span>
|
||
<span class="token attr-name"><Input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">placeholder"</span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</span>FormItem <span class="token punctuation">{</span><span class="token operator">...</span>buttonItemLayout<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormLayoutDemo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="1295"><h2 id="API" data-reactid="1296"><span data-reactid="1297"><!-- react-text: 1298 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="1299">#</a></h2><h3 id="Form" data-reactid="1300"><span data-reactid="1301"><!-- react-text: 1302 -->Form<!-- /react-text --></span><a href="#Form" class="anchor" data-reactid="1303">#</a></h3><p data-reactid="1304"><strong data-reactid="1305"><!-- react-text: 1306 -->more example <!-- /react-text --><a href="http://react-component.github.io/form/" data-reactid="1307"><!-- react-text: 1308 -->rc-form<!-- /react-text --></a></strong><!-- react-text: 1309 -->。<!-- /react-text --></p><table data-reactid="1310"><thead data-reactid="1311"><tr data-reactid="1312"><th data-reactid="1313"><!-- react-text: 1314 -->Property<!-- /react-text --></th><th data-reactid="1315"><!-- react-text: 1316 -->Description<!-- /react-text --></th><th data-reactid="1317"><!-- react-text: 1318 -->Type<!-- /react-text --></th><th data-reactid="1319"><!-- react-text: 1320 -->Default Value<!-- /react-text --></th></tr></thead><tbody data-reactid="1321"><tr data-reactid="1322"><td data-reactid="1323"><!-- react-text: 1324 -->form<!-- /react-text --></td><td data-reactid="1325"><!-- react-text: 1326 -->Decorated by <!-- /react-text --><code data-reactid="1327"><!-- react-text: 1328 -->Form.create()<!-- /react-text --></code><!-- react-text: 1329 --> will be automatically set <!-- /react-text --><code data-reactid="1330"><!-- react-text: 1331 -->this.props.form<!-- /react-text --></code><!-- react-text: 1332 --> property, so just pass to form, you don't need to set it by yourself after 1.7.0.<!-- /react-text --></td><td data-reactid="1333"><!-- react-text: 1334 -->object<!-- /react-text --></td><td data-reactid="1335"><!-- react-text: 1336 -->n/a<!-- /react-text --></td></tr><tr data-reactid="1337"><td data-reactid="1338"><!-- react-text: 1339 -->layout<!-- /react-text --></td><td data-reactid="1340"><!-- react-text: 1341 -->Define form layout(Support after 2.8)<!-- /react-text --></td><td data-reactid="1342"><!-- react-text: 1343 -->'horizontal'<!-- /react-text --><!-- react-text: 1344 -->|<!-- /react-text --><!-- react-text: 1345 -->'vertical'<!-- /react-text --><!-- react-text: 1346 -->|<!-- /react-text --><!-- react-text: 1347 -->'inline'<!-- /react-text --></td><td data-reactid="1348"><!-- react-text: 1349 -->'horizontal'<!-- /react-text --></td></tr><tr data-reactid="1350"><td data-reactid="1351"><!-- react-text: 1352 -->horizontal<!-- /react-text --></td><td data-reactid="1353"><!-- react-text: 1354 -->Use horizontal layout(Deprecated after 2.8)<!-- /react-text --></td><td data-reactid="1355"><!-- react-text: 1356 -->boolean<!-- /react-text --></td><td data-reactid="1357"><!-- react-text: 1358 -->true<!-- /react-text --></td></tr><tr data-reactid="1359"><td data-reactid="1360"><!-- react-text: 1361 -->vertical<!-- /react-text --></td><td data-reactid="1362"><!-- react-text: 1363 -->Use vertical layout(Deprecated after 2.8)<!-- /react-text --></td><td data-reactid="1364"><!-- react-text: 1365 -->boolean<!-- /react-text --></td><td data-reactid="1366"><!-- react-text: 1367 -->false<!-- /react-text --></td></tr><tr data-reactid="1368"><td data-reactid="1369"><!-- react-text: 1370 -->inline<!-- /react-text --></td><td data-reactid="1371"><!-- react-text: 1372 -->Use inline alignment(Deprecated after 2.8)<!-- /react-text --></td><td data-reactid="1373"><!-- react-text: 1374 -->boolean<!-- /react-text --></td><td data-reactid="1375"><!-- react-text: 1376 -->false<!-- /react-text --></td></tr><tr data-reactid="1377"><td data-reactid="1378"><!-- react-text: 1379 -->onSubmit<!-- /react-text --></td><td data-reactid="1380"><!-- react-text: 1381 -->Defines a function will be called if form data validation is successful.<!-- /react-text --></td><td data-reactid="1382"><!-- react-text: 1383 -->Function(e:Event)<!-- /react-text --></td><td data-reactid="1384"></td></tr><tr data-reactid="1385"><td data-reactid="1386"><!-- react-text: 1387 -->hideRequiredMark<!-- /react-text --></td><td data-reactid="1388"><!-- react-text: 1389 -->Hide required mark of all form items<!-- /react-text --></td><td data-reactid="1390"><!-- react-text: 1391 -->Boolean<!-- /react-text --></td><td data-reactid="1392"><!-- react-text: 1393 -->false<!-- /react-text --></td></tr></tbody></table><h3 id="Form.create(options)" data-reactid="1394"><span data-reactid="1395"><!-- react-text: 1396 -->Form.create(options)<!-- /react-text --></span><a href="#Form.create(options)" class="anchor" data-reactid="1397">#</a></h3><p data-reactid="1398"><!-- react-text: 1399 -->How to use：<!-- /react-text --></p><pre class="language-jsx" data-reactid="1400"><code data-reactid="1401"><span class="token keyword">class</span> <span class="token class-name">CustomizedForm</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
|
||
CustomizedForm <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>CustomizedForm<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p data-reactid="1402"><!-- react-text: 1403 -->The following <!-- /react-text --><code data-reactid="1404"><!-- react-text: 1405 -->options<!-- /react-text --></code><!-- react-text: 1406 --> are available:<!-- /react-text --></p><table data-reactid="1407"><thead data-reactid="1408"><tr data-reactid="1409"><th data-reactid="1410"><!-- react-text: 1411 -->Property<!-- /react-text --></th><th data-reactid="1412"><!-- react-text: 1413 -->Description<!-- /react-text --></th><th data-reactid="1414"><!-- react-text: 1415 -->Type<!-- /react-text --></th></tr></thead><tbody data-reactid="1416"><tr data-reactid="1417"><td data-reactid="1418"><!-- react-text: 1419 -->onFieldsChange<!-- /react-text --></td><td data-reactid="1420"><!-- react-text: 1421 -->Specify a function that will be called when the value a <!-- /react-text --><code data-reactid="1422"><!-- react-text: 1423 -->Form.Item<!-- /react-text --></code><!-- react-text: 1424 --> gets changed. Usage example: saving the field's value to Redux store.<!-- /react-text --></td><td data-reactid="1425"><!-- react-text: 1426 -->Function(props, fields)<!-- /react-text --></td></tr><tr data-reactid="1427"><td data-reactid="1428"><!-- react-text: 1429 -->mapPropsToFields<!-- /react-text --></td><td data-reactid="1430"><!-- react-text: 1431 -->Convert props to corresponding field value. Usage example: reading the values from Redux store.<!-- /react-text --></td><td data-reactid="1432"><!-- react-text: 1433 -->Function(props): Object{ fieldName: Object{ value } }<!-- /react-text --></td></tr><tr data-reactid="1434"><td data-reactid="1435"><!-- react-text: 1436 -->onValuesChange<!-- /react-text --></td><td data-reactid="1437"><!-- react-text: 1438 -->A handler while value of any field is changed<!-- /react-text --></td><td data-reactid="1439"><!-- react-text: 1440 -->(props, values) => void<!-- /react-text --></td></tr></tbody></table><p data-reactid="1441"><!-- react-text: 1442 -->If the form has been decorated by <!-- /react-text --><code data-reactid="1443"><!-- react-text: 1444 -->Form.create<!-- /react-text --></code><!-- react-text: 1445 --> then it has <!-- /react-text --><code data-reactid="1446"><!-- react-text: 1447 -->this.props.form<!-- /react-text --></code><!-- react-text: 1448 --> property. <!-- /react-text --><code data-reactid="1449"><!-- react-text: 1450 -->this.props.form<!-- /react-text --></code><!-- react-text: 1451 --> provides some APIs as follows:<!-- /react-text --></p><blockquote data-reactid="1452"><p data-reactid="1453"><!-- react-text: 1454 -->Note: Before using <!-- /react-text --><code data-reactid="1455"><!-- react-text: 1456 -->getFieldsValue<!-- /react-text --></code><!-- react-text: 1457 --> <!-- /react-text --><code data-reactid="1458"><!-- react-text: 1459 -->getFieldValue<!-- /react-text --></code><!-- react-text: 1460 --> <!-- /react-text --><code data-reactid="1461"><!-- react-text: 1462 -->setFieldsValue<!-- /react-text --></code><!-- react-text: 1463 --> and so on, please make sure that corresponding field had been registered with <!-- /react-text --><code data-reactid="1464"><!-- react-text: 1465 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1466 -->.<!-- /react-text --></p></blockquote><table data-reactid="1467"><thead data-reactid="1468"><tr data-reactid="1469"><th data-reactid="1470"><!-- react-text: 1471 -->Property<!-- /react-text --></th><th data-reactid="1472"><!-- react-text: 1473 -->Description<!-- /react-text --></th><th data-reactid="1474"><!-- react-text: 1475 -->Type<!-- /react-text --></th></tr></thead><tbody data-reactid="1476"><tr data-reactid="1477"><td data-reactid="1478"><!-- react-text: 1479 -->getFieldsValue<!-- /react-text --></td><td data-reactid="1480"><!-- react-text: 1481 -->Get the specified fields' values. If you don't specify a parameter, you will get all fields' values.<!-- /react-text --></td><td data-reactid="1482"><!-- react-text: 1483 -->Function([fieldNames: string[]])<!-- /react-text --></td></tr><tr data-reactid="1484"><td data-reactid="1485"><!-- react-text: 1486 -->getFieldValue<!-- /react-text --></td><td data-reactid="1487"><!-- react-text: 1488 -->Get the value of a field.<!-- /react-text --></td><td data-reactid="1489"><!-- react-text: 1490 -->Function(fieldName: string)<!-- /react-text --></td></tr><tr data-reactid="1491"><td data-reactid="1492"><!-- react-text: 1493 -->setFieldsValue<!-- /react-text --></td><td data-reactid="1494"><!-- react-text: 1495 -->Set the value of a field.(Note: please don't use it in <!-- /react-text --><code data-reactid="1496"><!-- react-text: 1497 -->componentWillReceiveProps<!-- /react-text --></code><!-- react-text: 1498 -->, otherwise, it will cause an endless loop, <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/2985" data-reactid="1499"><!-- react-text: 1500 -->more<!-- /react-text --></a><!-- react-text: 1501 -->)<!-- /react-text --></td><td data-reactid="1502"><!-- react-text: 1503 -->Function({ <!-- /react-text --><!-- react-text: 1504 -->[fieldname]<!-- /react-text --><!-- react-text: 1505 -->: value }<!-- /react-text --></td></tr><tr data-reactid="1506"><td data-reactid="1507"><!-- react-text: 1508 -->setFields<!-- /react-text --></td><td data-reactid="1509"></td><td data-reactid="1510"><!-- react-text: 1511 -->Function(obj: object)<!-- /react-text --></td></tr><tr data-reactid="1512"><td data-reactid="1513"><!-- react-text: 1514 -->setFields<!-- /react-text --></td><td data-reactid="1515"><!-- react-text: 1516 -->Set the value and error of a field. <!-- /react-text --><a href="https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79" data-reactid="1517"><!-- react-text: 1518 -->Code Sample<!-- /react-text --></a></td><td data-reactid="1519"><!-- react-text: 1520 -->Function({ <!-- /react-text --><!-- react-text: 1521 -->[fieldname]<!-- /react-text --><!-- react-text: 1522 -->: { value: any, errors: <!-- /react-text --><!-- react-text: 1523 -->[error]<!-- /react-text --><!-- react-text: 1524 --> } })<!-- /react-text --></td></tr><tr data-reactid="1525"><td data-reactid="1526"><!-- react-text: 1527 -->validateFields<!-- /react-text --></td><td data-reactid="1528"><!-- react-text: 1529 -->Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields.<!-- /react-text --></td><td data-reactid="1530"><!-- react-text: 1531 -->Function([fieldNames: string[]], <!-- /react-text --><!-- react-text: 1532 -->[options: object]<!-- /react-text --><!-- react-text: 1533 -->, callback: Function(errors, values))<!-- /react-text --></td></tr><tr data-reactid="1534"><td data-reactid="1535"><!-- react-text: 1536 -->validateFieldsAndScroll<!-- /react-text --></td><td data-reactid="1537"><!-- react-text: 1538 -->This function is similar to <!-- /react-text --><code data-reactid="1539"><!-- react-text: 1540 -->validateFields<!-- /react-text --></code><!-- react-text: 1541 -->, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area.<!-- /react-text --></td><td data-reactid="1542"><!-- react-text: 1543 -->same as <!-- /react-text --><code data-reactid="1544"><!-- react-text: 1545 -->validateFields<!-- /react-text --></code></td></tr><tr data-reactid="1546"><td data-reactid="1547"><!-- react-text: 1548 -->getFieldError<!-- /react-text --></td><td data-reactid="1549"><!-- react-text: 1550 -->Get the error of a field.<!-- /react-text --></td><td data-reactid="1551"><!-- react-text: 1552 -->Function(name)<!-- /react-text --></td></tr><tr data-reactid="1553"><td data-reactid="1554"><!-- react-text: 1555 -->getFieldsError<!-- /react-text --></td><td data-reactid="1556"><!-- react-text: 1557 -->Get the specified fields' error. If you don't specify a parameter, you will get all fields' error.<!-- /react-text --></td><td data-reactid="1558"><!-- react-text: 1559 -->Function([names: string[]])<!-- /react-text --></td></tr><tr data-reactid="1560"><td data-reactid="1561"><!-- react-text: 1562 -->isFieldValidating<!-- /react-text --></td><td data-reactid="1563"><!-- react-text: 1564 -->Check if the specified field is being validated.<!-- /react-text --></td><td data-reactid="1565"><!-- react-text: 1566 -->Function(name)<!-- /react-text --></td></tr><tr data-reactid="1567"><td data-reactid="1568"><!-- react-text: 1569 -->isFieldTouched<!-- /react-text --></td><td data-reactid="1570"><!-- react-text: 1571 -->Check whether a field is touched by <!-- /react-text --><code data-reactid="1572"><!-- react-text: 1573 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1574 -->'s <!-- /react-text --><code data-reactid="1575"><!-- react-text: 1576 -->options.trigger<!-- /react-text --></code><!-- react-text: 1577 --> event<!-- /react-text --></td><td data-reactid="1578"><!-- react-text: 1579 -->(name: string) => boolean<!-- /react-text --></td></tr><tr data-reactid="1580"><td data-reactid="1581"><!-- react-text: 1582 -->isFieldsTouched<!-- /react-text --></td><td data-reactid="1583"><!-- react-text: 1584 -->Check whether any of fields is touched by <!-- /react-text --><code data-reactid="1585"><!-- react-text: 1586 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1587 -->'s <!-- /react-text --><code data-reactid="1588"><!-- react-text: 1589 -->options.trigger<!-- /react-text --></code><!-- react-text: 1590 --> event<!-- /react-text --></td><td data-reactid="1591"><!-- react-text: 1592 -->(names?: string[]) => boolean<!-- /react-text --></td></tr><tr data-reactid="1593"><td data-reactid="1594"><!-- react-text: 1595 -->resetFields<!-- /react-text --></td><td data-reactid="1596"><!-- react-text: 1597 -->Reset the specified fields' value(to <!-- /react-text --><code data-reactid="1598"><!-- react-text: 1599 -->initialValue<!-- /react-text --></code><!-- react-text: 1600 -->) and status. If you don't specify a parameter, all the fields will be reset.<!-- /react-text --></td><td data-reactid="1601"><!-- react-text: 1602 -->Function([names: string[]])<!-- /react-text --></td></tr><tr data-reactid="1603"><td data-reactid="1604"><!-- react-text: 1605 -->getFieldDecorator<!-- /react-text --></td><td data-reactid="1606"><!-- react-text: 1607 -->Two-way binding for form, please read below for details.<!-- /react-text --></td><td data-reactid="1608"></td></tr></tbody></table><h3 id="this.props.form.getFieldDecorator(id,-options)" data-reactid="1609"><span data-reactid="1610"><!-- react-text: 1611 -->this.props.form.getFieldDecorator(id, options)<!-- /react-text --></span><a href="#this.props.form.getFieldDecorator(id,-options)" class="anchor" data-reactid="1612">#</a></h3><p data-reactid="1613"><!-- react-text: 1614 -->After wrapped by <!-- /react-text --><code data-reactid="1615"><!-- react-text: 1616 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1617 -->, <!-- /react-text --><code data-reactid="1618"><!-- react-text: 1619 -->value<!-- /react-text --></code><!-- react-text: 1620 -->(or other property defined by <!-- /react-text --><code data-reactid="1621"><!-- react-text: 1622 -->valuePropName<!-- /react-text --></code><!-- react-text: 1623 -->) <!-- /react-text --><code data-reactid="1624"><!-- react-text: 1625 -->onChange<!-- /react-text --></code><!-- react-text: 1626 -->(or other property defined by <!-- /react-text --><code data-reactid="1627"><!-- react-text: 1628 -->trigger<!-- /react-text --></code><!-- react-text: 1629 -->) props will be added to form controls，the flow of form data will be handled by Form which will cause:<!-- /react-text --></p><ol data-reactid="1630"><li data-reactid="1631"><p data-reactid="1632"><!-- react-text: 1633 -->You don't need to use <!-- /react-text --><code data-reactid="1634"><!-- react-text: 1635 -->onChange<!-- /react-text --></code><!-- react-text: 1636 --> to collect data, but you still can listen to <!-- /react-text --><code data-reactid="1637"><!-- react-text: 1638 -->onChange<!-- /react-text --></code><!-- react-text: 1639 -->(and so on) events.<!-- /react-text --></p></li><li data-reactid="1640"><p data-reactid="1641"><!-- react-text: 1642 -->You can not set value of form control via <!-- /react-text --><code data-reactid="1643"><!-- react-text: 1644 -->value<!-- /react-text --></code><!-- react-text: 1645 --> <!-- /react-text --><code data-reactid="1646"><!-- react-text: 1647 -->defaultValue<!-- /react-text --></code><!-- react-text: 1648 --> prop, and you should set default value with <!-- /react-text --><code data-reactid="1649"><!-- react-text: 1650 -->initialValue<!-- /react-text --></code><!-- react-text: 1651 --> in <!-- /react-text --><code data-reactid="1652"><!-- react-text: 1653 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1654 --> instead.<!-- /react-text --></p></li><li data-reactid="1655"><p data-reactid="1656"><!-- react-text: 1657 -->You don't need to call <!-- /react-text --><code data-reactid="1658"><!-- react-text: 1659 -->setState<!-- /react-text --></code><!-- react-text: 1660 --> manually, please use <!-- /react-text --><code data-reactid="1661"><!-- react-text: 1662 -->this.props.form.setFieldsValue<!-- /react-text --></code><!-- react-text: 1663 --> to change value programmatically.<!-- /react-text --></p></li></ol><h4 id="Special-attention" data-reactid="1664"><span data-reactid="1665"><!-- react-text: 1666 -->Special attention<!-- /react-text --></span><a href="#Special-attention" class="anchor" data-reactid="1667">#</a></h4><p data-reactid="1668"><!-- react-text: 1669 -->If you use <!-- /react-text --><code data-reactid="1670"><!-- react-text: 1671 -->react@<15.3.0<!-- /react-text --></code><!-- react-text: 1672 -->, then, you can't use <!-- /react-text --><code data-reactid="1673"><!-- react-text: 1674 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1675 --> in stateless component: <!-- /react-text --><a href="https://github.com/facebook/react/pull/6534" data-reactid="1676"><!-- react-text: 1677 -->https://github.com/facebook/react/pull/6534<!-- /react-text --></a></p><h4 id="getFieldDecorator(id,-options)-parameters" data-reactid="1678"><span data-reactid="1679"><!-- react-text: 1680 -->getFieldDecorator(id, options) parameters<!-- /react-text --></span><a href="#getFieldDecorator(id,-options)-parameters" class="anchor" data-reactid="1681">#</a></h4><table data-reactid="1682"><thead data-reactid="1683"><tr data-reactid="1684"><th data-reactid="1685"><!-- react-text: 1686 -->Property<!-- /react-text --></th><th data-reactid="1687"><!-- react-text: 1688 -->Description<!-- /react-text --></th><th data-reactid="1689"><!-- react-text: 1690 -->Type<!-- /react-text --></th><th data-reactid="1691"><!-- react-text: 1692 -->Default Value<!-- /react-text --></th></tr></thead><tbody data-reactid="1693"><tr data-reactid="1694"><td data-reactid="1695"><!-- react-text: 1696 -->id<!-- /react-text --></td><td data-reactid="1697"><!-- react-text: 1698 -->The unique identifier is required. support <!-- /react-text --><a href="https://github.com/react-component/form/pull/48" data-reactid="1699"><!-- react-text: 1700 -->nested fields format<!-- /react-text --></a><!-- react-text: 1701 -->.<!-- /react-text --></td><td data-reactid="1702"><!-- react-text: 1703 -->string<!-- /react-text --></td><td data-reactid="1704"></td></tr><tr data-reactid="1705"><td data-reactid="1706"><!-- react-text: 1707 -->options.valuePropName<!-- /react-text --></td><td data-reactid="1708"><!-- react-text: 1709 -->Props of children node, for example, the prop of Switch is 'checked'.<!-- /react-text --></td><td data-reactid="1710"><!-- react-text: 1711 -->string<!-- /react-text --></td><td data-reactid="1712"><!-- react-text: 1713 -->'value'<!-- /react-text --></td></tr><tr data-reactid="1714"><td data-reactid="1715"><!-- react-text: 1716 -->options.initialValue<!-- /react-text --></td><td data-reactid="1717"><!-- react-text: 1718 -->You can specify initial value, type, optional value of children node. (Note: Because <!-- /react-text --><code data-reactid="1719"><!-- react-text: 1720 -->Form<!-- /react-text --></code><!-- react-text: 1721 --> will test equality with <!-- /react-text --><code data-reactid="1722"><!-- react-text: 1723 -->===<!-- /react-text --></code><!-- react-text: 1724 --> internaly, we recommend to use vairable as <!-- /react-text --><code data-reactid="1725"><!-- react-text: 1726 -->initialValue<!-- /react-text --></code><!-- react-text: 1727 -->, instead of literal)<!-- /react-text --></td><td data-reactid="1728"></td><td data-reactid="1729"><!-- react-text: 1730 -->n/a<!-- /react-text --></td></tr><tr data-reactid="1731"><td data-reactid="1732"><!-- react-text: 1733 -->options.trigger<!-- /react-text --></td><td data-reactid="1734"><!-- react-text: 1735 -->When to collect the value of children node<!-- /react-text --></td><td data-reactid="1736"><!-- react-text: 1737 -->string<!-- /react-text --></td><td data-reactid="1738"><!-- react-text: 1739 -->'onChange'<!-- /react-text --></td></tr><tr data-reactid="1740"><td data-reactid="1741"><!-- react-text: 1742 -->options.getValueFromEvent<!-- /react-text --></td><td data-reactid="1743"><!-- react-text: 1744 -->To convert parameters of onChange to the value of control<!-- /react-text --></td><td data-reactid="1745"><!-- react-text: 1746 -->function(..args)<!-- /react-text --></td><td data-reactid="1747"><a href="https://github.com/react-component/form#optiongetvaluefromevent" data-reactid="1748"><!-- react-text: 1749 -->reference<!-- /react-text --></a></td></tr><tr data-reactid="1750"><td data-reactid="1751"><!-- react-text: 1752 -->options.validateTrigger<!-- /react-text --></td><td data-reactid="1753"><!-- react-text: 1754 -->When to validate the value of children node.<!-- /react-text --></td><td data-reactid="1755"><!-- react-text: 1756 -->string<!-- /react-text --><!-- react-text: 1757 -->|<!-- /react-text --><!-- react-text: 1758 -->string[]<!-- /react-text --></td><td data-reactid="1759"><!-- react-text: 1760 -->'onChange'<!-- /react-text --></td></tr><tr data-reactid="1761"><td data-reactid="1762"><!-- react-text: 1763 -->options.rules<!-- /react-text --></td><td data-reactid="1764"><!-- react-text: 1765 -->Includes validation rules. Please refer to "Validation Rules" part for details.<!-- /react-text --></td><td data-reactid="1766"><!-- react-text: 1767 -->object[]<!-- /react-text --></td><td data-reactid="1768"><!-- react-text: 1769 -->n/a<!-- /react-text --></td></tr><tr data-reactid="1770"><td data-reactid="1771"><!-- react-text: 1772 -->options.exclusive<!-- /react-text --></td><td data-reactid="1773"><!-- react-text: 1774 -->Whether it is exclusive with other controls, particularly for Radio.<!-- /react-text --></td><td data-reactid="1775"><!-- react-text: 1776 -->boolean<!-- /react-text --></td><td data-reactid="1777"><!-- react-text: 1778 -->false<!-- /react-text --></td></tr></tbody></table><h3 id="Form.Item" data-reactid="1779"><span data-reactid="1780"><!-- react-text: 1781 -->Form.Item<!-- /react-text --></span><a href="#Form.Item" class="anchor" data-reactid="1782">#</a></h3><p data-reactid="1783"><!-- react-text: 1784 -->Note:<!-- /react-text --></p><ul data-reactid="1785"><li data-reactid="1786"><p data-reactid="1787"><!-- react-text: 1788 -->If Form.Item has multiple children that had been decorated by <!-- /react-text --><code data-reactid="1789"><!-- react-text: 1790 -->getFieldDecorator<!-- /react-text --></code><!-- react-text: 1791 -->, <!-- /react-text --><code data-reactid="1792"><!-- react-text: 1793 -->help<!-- /react-text --></code><!-- react-text: 1794 --> and <!-- /react-text --><code data-reactid="1795"><!-- react-text: 1796 -->required<!-- /react-text --></code><!-- react-text: 1797 --> and <!-- /react-text --><code data-reactid="1798"><!-- react-text: 1799 -->validateStatus<!-- /react-text --></code><!-- react-text: 1800 --> can't be generated automatically.<!-- /react-text --></p></li><li data-reactid="1801"><p data-reactid="1802"><!-- react-text: 1803 -->Before <!-- /react-text --><code data-reactid="1804"><!-- react-text: 1805 -->2.2.0<!-- /react-text --></code><!-- react-text: 1806 -->, form controls must be child of Form.Item, otherwise, you need to set <!-- /react-text --><code data-reactid="1807"><!-- react-text: 1808 -->help<!-- /react-text --></code><!-- react-text: 1809 -->, <!-- /react-text --><code data-reactid="1810"><!-- react-text: 1811 -->required<!-- /react-text --></code><!-- react-text: 1812 --> and <!-- /react-text --><code data-reactid="1813"><!-- react-text: 1814 -->validateStatus<!-- /react-text --></code><!-- react-text: 1815 --> by yourself.<!-- /react-text --></p></li></ul><table data-reactid="1816"><thead data-reactid="1817"><tr data-reactid="1818"><th data-reactid="1819"><!-- react-text: 1820 -->Property<!-- /react-text --></th><th data-reactid="1821"><!-- react-text: 1822 -->Description<!-- /react-text --></th><th data-reactid="1823"><!-- react-text: 1824 -->Type<!-- /react-text --></th><th data-reactid="1825"><!-- react-text: 1826 -->Default Value<!-- /react-text --></th></tr></thead><tbody data-reactid="1827"><tr data-reactid="1828"><td data-reactid="1829"><!-- react-text: 1830 -->label<!-- /react-text --></td><td data-reactid="1831"><!-- react-text: 1832 -->Label text<!-- /react-text --></td><td data-reactid="1833"><!-- react-text: 1834 -->string<!-- /react-text --><!-- react-text: 1835 -->|<!-- /react-text --><!-- react-text: 1836 -->ReactNode<!-- /react-text --></td><td data-reactid="1837"></td></tr><tr data-reactid="1838"><td data-reactid="1839"><!-- react-text: 1840 -->labelCol<!-- /react-text --></td><td data-reactid="1841"><!-- react-text: 1842 -->The layout of label. You can set <!-- /react-text --><code data-reactid="1843"><!-- react-text: 1844 -->span<!-- /react-text --></code><!-- react-text: 1845 --> <!-- /react-text --><code data-reactid="1846"><!-- react-text: 1847 -->offset<!-- /react-text --></code><!-- react-text: 1848 --> to something like <!-- /react-text --><code data-reactid="1849"><!-- react-text: 1850 -->{span: 3, offset: 12}<!-- /react-text --></code><!-- react-text: 1851 --> or <!-- /react-text --><code data-reactid="1852"><!-- react-text: 1853 -->sm: {span: 3, offset: 12}<!-- /react-text --></code><!-- react-text: 1854 --> same as with <!-- /react-text --><code data-reactid="1855"><!-- react-text: 1856 --><Col><!-- /react-text --></code></td><td data-reactid="1857"><!-- react-text: 1858 -->object<!-- /react-text --></td><td data-reactid="1859"></td></tr><tr data-reactid="1860"><td data-reactid="1861"><!-- react-text: 1862 -->wrapperCol<!-- /react-text --></td><td data-reactid="1863"><!-- react-text: 1864 -->The layout for input controls, same as <!-- /react-text --><code data-reactid="1865"><!-- react-text: 1866 -->labelCol<!-- /react-text --></code></td><td data-reactid="1867"><!-- react-text: 1868 -->object<!-- /react-text --></td><td data-reactid="1869"></td></tr><tr data-reactid="1870"><td data-reactid="1871"><!-- react-text: 1872 -->help<!-- /react-text --></td><td data-reactid="1873"><!-- react-text: 1874 -->The prompt message. If not provided, the prompt message will be generated by the validation rule.<!-- /react-text --></td><td data-reactid="1875"><!-- react-text: 1876 -->string<!-- /react-text --><!-- react-text: 1877 -->|<!-- /react-text --><!-- react-text: 1878 -->ReactNode<!-- /react-text --></td><td data-reactid="1879"></td></tr><tr data-reactid="1880"><td data-reactid="1881"><!-- react-text: 1882 -->extra<!-- /react-text --></td><td data-reactid="1883"><!-- react-text: 1884 -->The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.<!-- /react-text --></td><td data-reactid="1885"><!-- react-text: 1886 -->string<!-- /react-text --><!-- react-text: 1887 -->|<!-- /react-text --><!-- react-text: 1888 -->ReactNode<!-- /react-text --></td><td data-reactid="1889"></td></tr><tr data-reactid="1890"><td data-reactid="1891"><!-- react-text: 1892 -->required<!-- /react-text --></td><td data-reactid="1893"><!-- react-text: 1894 -->Whether provided or not, it will be generated by the validation rule.<!-- /react-text --></td><td data-reactid="1895"><!-- react-text: 1896 -->boolean<!-- /react-text --></td><td data-reactid="1897"><!-- react-text: 1898 -->false<!-- /react-text --></td></tr><tr data-reactid="1899"><td data-reactid="1900"><!-- react-text: 1901 -->validateStatus<!-- /react-text --></td><td data-reactid="1902"><!-- react-text: 1903 -->The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'<!-- /react-text --></td><td data-reactid="1904"><!-- react-text: 1905 -->string<!-- /react-text --></td><td data-reactid="1906"></td></tr><tr data-reactid="1907"><td data-reactid="1908"><!-- react-text: 1909 -->hasFeedback<!-- /react-text --></td><td data-reactid="1910"><!-- react-text: 1911 -->Used with <!-- /react-text --><code data-reactid="1912"><!-- react-text: 1913 -->validateStatus<!-- /react-text --></code><!-- react-text: 1914 -->, this option specifies the validation status icon. Recommended to be used only with <!-- /react-text --><code data-reactid="1915"><!-- react-text: 1916 -->Input<!-- /react-text --></code><!-- react-text: 1917 -->.<!-- /react-text --></td><td data-reactid="1918"><!-- react-text: 1919 -->boolean<!-- /react-text --></td><td data-reactid="1920"><!-- react-text: 1921 -->false<!-- /react-text --></td></tr><tr data-reactid="1922"><td data-reactid="1923"><!-- react-text: 1924 -->colon<!-- /react-text --></td><td data-reactid="1925"><!-- react-text: 1926 -->Used with <!-- /react-text --><code data-reactid="1927"><!-- react-text: 1928 -->label<!-- /react-text --></code><!-- react-text: 1929 -->, whether to display <!-- /react-text --><code data-reactid="1930"><!-- react-text: 1931 -->:<!-- /react-text --></code><!-- react-text: 1932 --> after label text.<!-- /react-text --></td><td data-reactid="1933"><!-- react-text: 1934 -->boolean<!-- /react-text --></td><td data-reactid="1935"><!-- react-text: 1936 -->true<!-- /react-text --></td></tr></tbody></table><h3 id="Validation-Rules" data-reactid="1937"><span data-reactid="1938"><!-- react-text: 1939 -->Validation Rules<!-- /react-text --></span><a href="#Validation-Rules" class="anchor" data-reactid="1940">#</a></h3><table data-reactid="1941"><thead data-reactid="1942"><tr data-reactid="1943"><th data-reactid="1944"><!-- react-text: 1945 -->Property<!-- /react-text --></th><th data-reactid="1946"><!-- react-text: 1947 -->Description<!-- /react-text --></th><th data-reactid="1948"><!-- react-text: 1949 -->Type<!-- /react-text --></th><th data-reactid="1950"><!-- react-text: 1951 -->Default Value<!-- /react-text --></th></tr></thead><tbody data-reactid="1952"><tr data-reactid="1953"><td data-reactid="1954"><!-- react-text: 1955 -->message<!-- /react-text --></td><td data-reactid="1956"><!-- react-text: 1957 -->validation error message<!-- /react-text --></td><td data-reactid="1958"><!-- react-text: 1959 -->string<!-- /react-text --></td><td data-reactid="1960"><!-- react-text: 1961 -->-<!-- /react-text --></td></tr><tr data-reactid="1962"><td data-reactid="1963"><!-- react-text: 1964 -->type<!-- /react-text --></td><td data-reactid="1965"><!-- react-text: 1966 -->built-in validation type, <!-- /react-text --><a href="https://github.com/yiminghe/async-validator#type" data-reactid="1967"><!-- react-text: 1968 -->available options<!-- /react-text --></a></td><td data-reactid="1969"><!-- react-text: 1970 -->string<!-- /react-text --></td><td data-reactid="1971"><!-- react-text: 1972 -->'string'<!-- /react-text --></td></tr><tr data-reactid="1973"><td data-reactid="1974"><!-- react-text: 1975 -->required<!-- /react-text --></td><td data-reactid="1976"><!-- react-text: 1977 -->indicates whether field is required<!-- /react-text --></td><td data-reactid="1978"><!-- react-text: 1979 -->boolean<!-- /react-text --></td><td data-reactid="1980"><code data-reactid="1981"><!-- react-text: 1982 -->false<!-- /react-text --></code></td></tr><tr data-reactid="1983"><td data-reactid="1984"><!-- react-text: 1985 -->len<!-- /react-text --></td><td data-reactid="1986"><!-- react-text: 1987 -->validate an exact length of a field<!-- /react-text --></td><td data-reactid="1988"><!-- react-text: 1989 -->number<!-- /react-text --></td><td data-reactid="1990"><!-- react-text: 1991 -->-<!-- /react-text --></td></tr><tr data-reactid="1992"><td data-reactid="1993"><!-- react-text: 1994 -->min<!-- /react-text --></td><td data-reactid="1995"><!-- react-text: 1996 -->validate a min length of a field<!-- /react-text --></td><td data-reactid="1997"><!-- react-text: 1998 -->number<!-- /react-text --></td><td data-reactid="1999"><!-- react-text: 2000 -->-<!-- /react-text --></td></tr><tr data-reactid="2001"><td data-reactid="2002"><!-- react-text: 2003 -->max<!-- /react-text --></td><td data-reactid="2004"><!-- react-text: 2005 -->validate a max length of a field<!-- /react-text --></td><td data-reactid="2006"><!-- react-text: 2007 -->number<!-- /react-text --></td><td data-reactid="2008"><!-- react-text: 2009 -->-<!-- /react-text --></td></tr><tr data-reactid="2010"><td data-reactid="2011"><!-- react-text: 2012 -->enum<!-- /react-text --></td><td data-reactid="2013"><!-- react-text: 2014 -->validate a value from a list of possible values<!-- /react-text --></td><td data-reactid="2015"><!-- react-text: 2016 -->string<!-- /react-text --></td><td data-reactid="2017"><!-- react-text: 2018 -->-<!-- /react-text --></td></tr><tr data-reactid="2019"><td data-reactid="2020"><!-- react-text: 2021 -->pattern<!-- /react-text --></td><td data-reactid="2022"><!-- react-text: 2023 -->validate from a regular expression<!-- /react-text --></td><td data-reactid="2024"><!-- react-text: 2025 -->RegExp<!-- /react-text --></td><td data-reactid="2026"><!-- react-text: 2027 -->-<!-- /react-text --></td></tr><tr data-reactid="2028"><td data-reactid="2029"><!-- react-text: 2030 -->transform<!-- /react-text --></td><td data-reactid="2031"><!-- react-text: 2032 -->transform a value before validation<!-- /react-text --></td><td data-reactid="2033"><!-- react-text: 2034 -->function(value) => transformedValue:any<!-- /react-text --></td><td data-reactid="2035"><!-- react-text: 2036 -->-<!-- /react-text --></td></tr><tr data-reactid="2037"><td data-reactid="2038"><!-- react-text: 2039 -->validator<!-- /react-text --></td><td data-reactid="2040"><!-- react-text: 2041 -->custom validate function (Note: <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/5155" data-reactid="2042"><!-- react-text: 2043 -->callback must be called<!-- /react-text --></a><!-- react-text: 2044 -->)<!-- /react-text --></td><td data-reactid="2045"><!-- react-text: 2046 -->function(rule, value, callback)<!-- /react-text --></td><td data-reactid="2047"><!-- react-text: 2048 -->-<!-- /react-text --></td></tr></tbody></table><p data-reactid="2049"><!-- react-text: 2050 -->See more advanced usage at <!-- /react-text --><a href="https://github.com/yiminghe/async-validator" data-reactid="2051"><!-- react-text: 2052 -->async-validator<!-- /react-text --></a><!-- react-text: 2053 -->.<!-- /react-text --></p><style data-reactid="2054">
|
||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||
max-width: 540px;
|
||
}
|
||
</style></section></article></div></div><div class="ant-row" data-reactid="2055"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="2056"><section class="prev-next-nav" data-reactid="2057"><a class="prev-page" href="/components/date-picker/" data-reactid="2058"><span data-reactid="2059">DatePicker</span><span class="chinese" data-reactid="2060"></span></a><a class="next-page" href="/components/input/" data-reactid="2061"><span data-reactid="2062">Input</span><span class="chinese" data-reactid="2063"></span></a></section></div></div></div><footer id="footer" data-reactid="2064"><ul data-reactid="2065"><li data-reactid="2066"><h2 data-reactid="2067"><i class="anticon anticon-github" data-reactid="2068"></i><!-- react-text: 2069 --> GitHub<!-- /react-text --></h2><div data-reactid="2070"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="2071"><span data-reactid="2072">Repository</span></a></div><div data-reactid="2073"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="2074"><span data-reactid="2075">Customize Theme</span></a></div><div data-reactid="2076"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="2077"><span data-reactid="2078">Awesome Ant Design</span></a></div></li><li data-reactid="2079"><h2 data-reactid="2080"><i class="anticon anticon-link" data-reactid="2081"></i><!-- react-text: 2082 --> <!-- /react-text --><span data-reactid="2083">Links</span></h2><div data-reactid="2084"><a href="http://mobile.ant.design" data-reactid="2085">Ant Design Mobile</a><span data-reactid="2086"> - </span><span data-reactid="2087">Mobile UI</span></div><div data-reactid="2088"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="2089">dva</a><!-- react-text: 2090 --> - <!-- /react-text --><span data-reactid="2091">Framework</span></div><div data-reactid="2092"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="2093">dva-cli</a><!-- react-text: 2094 --> -<!-- /react-text --><span data-reactid="2095">Developer Tools</span></div><div data-reactid="2096"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="2097">Egg</a><span data-reactid="2098"> - </span><span data-reactid="2099">Enterprise Node Framework</span></div><div data-reactid="2100"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="2101">AntV</a><span data-reactid="2102"> - </span><span data-reactid="2103">Data Visualization</span></div><div data-reactid="2104"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="2105">Ant Motion</a><span data-reactid="2106"> - </span><span data-reactid="2107">Motion Soluction</span></div><div data-reactid="2108"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="2109">AntD Library</a><span data-reactid="2110"> - </span><span data-reactid="2111">Axure library</span></div><div data-reactid="2112"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="2113">Ant UX</a><span data-reactid="2114"> - </span><span data-reactid="2115">Sitemap Template</span></div></li><li data-reactid="2116"><h2 data-reactid="2117"><i class="anticon anticon-customer-service" data-reactid="2118"></i><!-- react-text: 2119 --> <!-- /react-text --><span data-reactid="2120">Community</span></h2><div data-reactid="2121"><a href="/changelog" data-reactid="2122"><span data-reactid="2123">Change Log</span></a></div><div data-reactid="2124"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="2125"><span data-reactid="2126">FAQ</span></a></div><div data-reactid="2127"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="2128"><span data-reactid="2129">Chat Room</span></a></div><div data-reactid="2130"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="2131"><span data-reactid="2132">Bug Report</span></a></div><div data-reactid="2133"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="2134"><span data-reactid="2135">StackOverflow</span></a></div><div data-reactid="2136"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="2137"><span data-reactid="2138">SegmentFault</span></a></div></li><li data-reactid="2139"><h2 data-reactid="2140"><!-- react-text: 2141 -->Copyright © <!-- /react-text --><!-- react-text: 2142 -->2017<!-- /react-text --></h2><div data-reactid="2143"><span data-reactid="2144">Created by Ant UED</span></div><div data-reactid="2145"><!-- react-text: 2146 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="2147">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|