test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

🎨 Improve form demo code style

Browse Source
This commit is contained in:
afc163 2018-12-22 16:48:30 +08:00
parent d78d0de36c
commit 1350c87ab1
No known key found for this signature in database
GPG Key ID: 5F00908D72002306
15 changed files with 154 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/form/demo/advanced-search.md
View File

@ -23,8 +23,6 @@ import {
Form, Row, Col, Input, Button, Icon,
} from 'antd';
const FormItem = Form.Item;
class AdvancedSearchForm extends React.Component {
state = {
expand: false,
@ -38,7 +36,7 @@ class AdvancedSearchForm extends React.Component {
for (let i = 0; i < 10; i++) {
children.push(
<Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
<FormItem label={`Field ${i}`}>
<Form.Item label={`Field ${i}`}>
{getFieldDecorator(`field-${i}`, {
rules: [{
required: true,
@ -47,7 +45,7 @@ class AdvancedSearchForm extends React.Component {
})(
<Input placeholder="placeholder" />
)}
</FormItem>
</Form.Item>
</Col>
);
}

15
components/form/demo/coordinated.md
View File

@ -18,8 +18,7 @@ import {
Form, Select, Input, Button,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { Option } = Select;
class App extends React.Component {
handleSubmit = (e) => {
@ -42,7 +41,7 @@ class App extends React.Component {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit}>
<FormItem
<Form.Item
label="Note"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
@ -52,8 +51,8 @@ class App extends React.Component {
})(
<Input />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
label="Gender"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
@ -69,14 +68,14 @@ class App extends React.Component {
<Option value="female">female</Option>
</Select>
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
wrapperCol={{ span: 12, offset: 5 }}
>
<Button type="primary" htmlType="submit">
Submit
</Button>
</FormItem>
</Form.Item>
</Form>
);
}

11
components/form/demo/customized-form-controls.md
View File

@ -24,8 +24,7 @@ import {
Form, Input, Select, Button,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { Option } = Select;
class PriceInput extends React.Component {
static getDerivedStateFromProps(nextProps) {
@ -122,15 +121,15 @@ class Demo extends React.Component {
const { getFieldDecorator } = this.props.form;
return (
<Form layout="inline" onSubmit={this.handleSubmit}>
<FormItem label="Price">
<Form.Item label="Price">
{getFieldDecorator('price', {
initialValue: { number: 0, currency: 'rmb' },
rules: [{ validator: this.checkPrice }],
})(<PriceInput />)}
</FormItem>
<FormItem>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form.Item>
</Form>
);
}

14
components/form/demo/dynamic-form-item.md
View File

@ -18,8 +18,6 @@ import {
Form, Input, Icon, Button,
} from 'antd';
const FormItem = Form.Item;
let id = 0;
class DynamicFieldSet extends React.Component {
@ -80,7 +78,7 @@ class DynamicFieldSet extends React.Component {
getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
<FormItem
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? 'Passengers' : ''}
required={false}
@ -104,19 +102,19 @@ class DynamicFieldSet extends React.Component {
onClick={() => this.remove(k)}
/>
) : null}
</FormItem>
</Form.Item>
));
return (
<Form onSubmit={this.handleSubmit}>
{formItems}
<FormItem {...formItemLayoutWithOutLabel}>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
<Icon type="plus" /> Add field
</Button>
</FormItem>
<FormItem {...formItemLayoutWithOutLabel}>
</Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form.Item>
</Form>
);
}

18
components/form/demo/dynamic-rule.md
View File

@ -18,8 +18,6 @@ import {
Form, Input, Button, Checkbox,
} from 'antd';
const FormItem = Form.Item;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 8 },
@ -55,7 +53,7 @@ class DynamicRule extends React.Component {
const { getFieldDecorator } = this.props.form;
return (
<div>
<FormItem {...formItemLayout} label="Name">
<Form.Item {...formItemLayout} label="Name">
{getFieldDecorator('username', {
rules: [{
required: true,
@ -64,8 +62,8 @@ class DynamicRule extends React.Component {
})(
<Input placeholder="Please input your name" />
)}
</FormItem>
<FormItem {...formItemLayout} label="Nickname">
</Form.Item>
<Form.Item {...formItemLayout} label="Nickname">
{getFieldDecorator('nickname', {
rules: [{
required: this.state.checkNick,
@ -74,20 +72,20 @@ class DynamicRule extends React.Component {
})(
<Input placeholder="Please input your nickname" />
)}
</FormItem>
<FormItem {...formTailLayout}>
</Form.Item>
<Form.Item {...formTailLayout}>
<Checkbox
checked={this.state.checkNick}
onChange={this.handleChange}
>
Nickname is required
</Checkbox>
</FormItem>
<FormItem {...formTailLayout}>
</Form.Item>
<Form.Item {...formTailLayout}>
<Button type="primary" onClick={this.check}>
Check
</Button>
</FormItem>
</Form.Item>
</div>
);
}

14
components/form/demo/form-in-modal.md
View File

@ -18,8 +18,6 @@ import {
Button, Modal, Form, Input, Radio,
} from 'antd';
const FormItem = Form.Item;
const CollectionCreateForm = Form.create()(
// eslint-disable-next-line
class extends React.Component {
@ -37,17 +35,17 @@ const CollectionCreateForm = Form.create()(
onOk={onCreate}
>
<Form layout="vertical">
<FormItem label="Title">
<Form.Item label="Title">
{getFieldDecorator('title', {
rules: [{ required: true, message: 'Please input the title of collection!' }],
})(
<Input />
)}
</FormItem>
<FormItem label="Description">
</Form.Item>
<Form.Item label="Description">
{getFieldDecorator('description')(<Input type="textarea" />)}
</FormItem>
<FormItem className="collection-create-form_last-form-item">
</Form.Item>
<Form.Item className="collection-create-form_last-form-item">
{getFieldDecorator('modifier', {
initialValue: 'public',
})(
@ -56,7 +54,7 @@ const CollectionCreateForm = Form.create()(
<Radio value="private">Private</Radio>
</Radio.Group>
)}
</FormItem>
</Form.Item>
</Form>
</Modal>
);

6
components/form/demo/global-state.md
View File

@ -20,8 +20,6 @@ We can store form data into upper component or [Redux](https://github.com/reactj
````jsx
import { Form, Input } from 'antd';
const FormItem = Form.Item;
const CustomizedForm = Form.create({
onFieldsChange(props, changedFields) {
props.onChange(changedFields);
@ -41,11 +39,11 @@ const CustomizedForm = Form.create({
const { getFieldDecorator } = props.form;
return (
<Form layout="inline">
<FormItem label="Username">
<Form.Item label="Username">
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Username is required!' }],
})(<Input />)}
</FormItem>
</Form.Item>
</Form>
);
});

14
components/form/demo/horizontal-login.md
View File

@ -18,8 +18,6 @@ import {
Form, Icon, Input, Button,
} from 'antd';
const FormItem = Form.Item;
function hasErrors(fieldsError) {
return Object.keys(fieldsError).some(field => fieldsError[field]);
}
@ -49,7 +47,7 @@ class HorizontalLoginForm extends React.Component {
const passwordError = isFieldTouched('password') && getFieldError('password');
return (
<Form layout="inline" onSubmit={this.handleSubmit}>
<FormItem
<Form.Item
validateStatus={userNameError ? 'error' : ''}
help={userNameError || ''}
>
@ -58,8 +56,8 @@ class HorizontalLoginForm extends React.Component {
})(
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
validateStatus={passwordError ? 'error' : ''}
help={passwordError || ''}
>
@ -68,8 +66,8 @@ class HorizontalLoginForm extends React.Component {
})(
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
@ -77,7 +75,7 @@ class HorizontalLoginForm extends React.Component {
>
Log in
</Button>
</FormItem>
</Form.Item>
</Form>
);
}

18
components/form/demo/layout.md
View File

@ -18,8 +18,6 @@ import {
Form, Input, Button, Radio,
} from 'antd';
const FormItem = Form.Item;
class FormLayoutDemo extends React.Component {
constructor() {
super();
@ -44,7 +42,7 @@ class FormLayoutDemo extends React.Component {
return (
<div>
<Form layout={formLayout}>
<FormItem
<Form.Item
label="Form Layout"
{...formItemLayout}
>
@ -53,22 +51,22 @@ class FormLayoutDemo extends React.Component {
<Radio.Button value="vertical">Vertical</Radio.Button>
<Radio.Button value="inline">Inline</Radio.Button>
</Radio.Group>
</FormItem>
<FormItem
</Form.Item>
<Form.Item
label="Field A"
{...formItemLayout}
>
<Input placeholder="input placeholder" />
</FormItem>
<FormItem
</Form.Item>
<Form.Item
label="Field B"
{...formItemLayout}
>
<Input placeholder="input placeholder" />
</FormItem>
<FormItem {...buttonItemLayout}>
</Form.Item>
<Form.Item {...buttonItemLayout}>
<Button type="primary">Submit</Button>
</FormItem>
</Form.Item>
</Form>
</div>
);

14
components/form/demo/normal-login.md
View File

@ -18,8 +18,6 @@ import {
Form, Icon, Input, Button, Checkbox,
} from 'antd';
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
@ -34,21 +32,21 @@ class NormalLoginForm extends React.Component {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
<Form.Item>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
)}
</FormItem>
<FormItem>
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
</Form.Item>
<Form.Item>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
@ -60,7 +58,7 @@ class NormalLoginForm extends React.Component {
Log in
</Button>
Or <a href="">register now!</a>
</FormItem>
</Form.Item>
</Form>
);
}

43
components/form/demo/register.md
View File

@ -18,8 +18,7 @@ import {
Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;
const residences = [{
@ -134,7 +133,7 @@ class RegistrationForm extends React.Component {
return (
<Form onSubmit={this.handleSubmit}>
<FormItem
<Form.Item
{...formItemLayout}
label="E-mail"
>
@ -147,8 +146,8 @@ class RegistrationForm extends React.Component {
})(
<Input />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Password"
>
@ -161,8 +160,8 @@ class RegistrationForm extends React.Component {
})(
<Input type="password" />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Confirm Password"
>
@ -175,8 +174,8 @@ class RegistrationForm extends React.Component {
})(
<Input type="password" onBlur={this.handleConfirmBlur} />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label={(
<span>
@ -192,8 +191,8 @@ class RegistrationForm extends React.Component {
})(
<Input />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Habitual Residence"
>
@ -203,8 +202,8 @@ class RegistrationForm extends React.Component {
})(
<Cascader options={residences} />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Phone Number"
>
@ -213,8 +212,8 @@ class RegistrationForm extends React.Component {
})(
<Input addonBefore={prefixSelector} style={{ width: '100%' }} />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Website"
>
@ -229,8 +228,8 @@ class RegistrationForm extends React.Component {
<Input />
</AutoComplete>
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Captcha"
extra="We must make sure that your are a human."
@ -247,17 +246,17 @@ class RegistrationForm extends React.Component {
<Button>Get captcha</Button>
</Col>
</Row>
</FormItem>
<FormItem {...tailFormItemLayout}>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
{getFieldDecorator('agreement', {
valuePropName: 'checked',
})(
<Checkbox>I have read the <a href="">agreement</a></Checkbox>
)}
</FormItem>
<FormItem {...tailFormItemLayout}>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">Register</Button>
</FormItem>
</Form.Item>
</Form>
);
}

29
components/form/demo/time-related-controls.md
View File

@ -18,7 +18,6 @@ import {
Form, DatePicker, TimePicker, Button,
} from 'antd';
const FormItem = Form.Item;
const { MonthPicker, RangePicker } = DatePicker;
class TimeRelatedForm extends React.Component {
@ -69,62 +68,62 @@ class TimeRelatedForm extends React.Component {
};
return (
<Form onSubmit={this.handleSubmit}>
<FormItem
<Form.Item
{...formItemLayout}
label="DatePicker"
>
{getFieldDecorator('date-picker', config)(
<DatePicker />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="DatePicker[showTime]"
>
{getFieldDecorator('date-time-picker', config)(
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="MonthPicker"
>
{getFieldDecorator('month-picker', config)(
<MonthPicker />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="RangePicker"
>
{getFieldDecorator('range-picker', rangeConfig)(
<RangePicker />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="RangePicker[showTime]"
>
{getFieldDecorator('range-time-picker', rangeConfig)(
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="TimePicker"
>
{getFieldDecorator('time-picker', config)(
<TimePicker />
)}
</FormItem>
<FormItem
</Form.Item>
<Form.Item
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}}
>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form.Item>
</Form>
);
}

67
components/form/demo/validate-other.md
View File

@ -20,10 +20,7 @@ import {
Row, Col,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Option } = Select;
class Demo extends React.Component {
handleSubmit = (e) => {
@ -51,13 +48,13 @@ class Demo extends React.Component {
};
return (
<Form onSubmit={this.handleSubmit}>
<FormItem
<Form.Item
{...formItemLayout}
label="Plain Text"
>
<span className="ant-form-text">China</span>
</FormItem>
<FormItem
</Form.Item>
<Form.Item
{...formItemLayout}
label="Select"
hasFeedback
@ -72,9 +69,9 @@ class Demo extends React.Component {
<Option value="usa">U.S.A</Option>
</Select>
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Select[multiple]"
>
@ -89,9 +86,9 @@ class Demo extends React.Component {
<Option value="blue">Blue</Option>
</Select>
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="InputNumber"
>
@ -99,18 +96,18 @@ class Demo extends React.Component {
<InputNumber min={1} max={10} />
)}
<span className="ant-form-text"> machines</span>
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Switch"
>
{getFieldDecorator('switch', { valuePropName: 'checked' })(
<Switch />
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Slider"
>
@ -120,33 +117,33 @@ class Demo extends React.Component {
}}
/>
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Radio.Group"
>
{getFieldDecorator('radio-group')(
<RadioGroup>
<Radio.Group>
<Radio value="a">item 1</Radio>
<Radio value="b">item 2</Radio>
<Radio value="c">item 3</Radio>
</RadioGroup>
</Radio.Group>
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Radio.Button"
>
{getFieldDecorator('radio-button')(
<RadioGroup>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
<Radio.Group>
<Radio.Button value="a">item 1</Radio.Button>
<Radio.Button value="b">item 2</Radio.Button>
<Radio.Button value="c">item 3</Radio.Button>
</Radio.Group>
)}
</FormItem>
</Form.Item>
<Form.Item
{...formItemLayout}
@ -167,7 +164,7 @@ class Demo extends React.Component {
)}
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Rate"
>
@ -176,9 +173,9 @@ class Demo extends React.Component {
})(
<Rate />
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Upload"
extra="longgggggggggggggggggggggggggggggggggg"
@ -193,9 +190,9 @@ class Demo extends React.Component {
</Button>
</Upload>
)}
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Dragger"
>
@ -213,13 +210,13 @@ class Demo extends React.Component {
</Upload.Dragger>
)}
</div>
</FormItem>
</Form.Item>
<FormItem
<Form.Item
wrapperCol={{ span: 12, offset: 6 }}
>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form.Item>
</Form>
);
}

59
components/form/demo/validate-static.md
View File

@ -26,8 +26,7 @@ import {
Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { Option } = Select;
const formItemLayout = {
labelCol: {
@ -42,24 +41,24 @@ const formItemLayout = {
ReactDOM.render(
<Form>
<FormItem
<Form.Item
{...formItemLayout}
label="Fail"
validateStatus="error"
help="Should be combination of numbers & alphabets"
>
<Input placeholder="unavailable choice" id="error" />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Warning"
validateStatus="warning"
>
<Input placeholder="Warning" id="warning" />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Validating"
hasFeedback
@ -67,27 +66,27 @@ ReactDOM.render(
help="The information is being validated..."
>
<Input placeholder="I'm the content is being validated" id="validating" />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Success"
hasFeedback
validateStatus="success"
>
<Input placeholder="I'm the content" id="success" />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Warning"
hasFeedback
validateStatus="warning"
>
<Input placeholder="Warning" id="warning" />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Fail"
hasFeedback
@ -95,27 +94,27 @@ ReactDOM.render(
help="Should be combination of numbers & alphabets"
>
<Input placeholder="unavailable choice" id="error" />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Success"
hasFeedback
validateStatus="success"
>
<DatePicker style={{ width: '100%' }} />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Warning"
hasFeedback
validateStatus="warning"
>
<TimePicker style={{ width: '100%' }} />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Error"
hasFeedback
@ -126,9 +125,9 @@ ReactDOM.render(
<Option value="2">Option 2</Option>
<Option value="3">Option 3</Option>
</Select>
</FormItem>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Validating"
hasFeedback
@ -136,36 +135,36 @@ ReactDOM.render(
help="The information is being validated..."
>
<Cascader defaultValue={['1']} options={[]} />
</FormItem>
</Form.Item>
<FormItem
<Form.Item
label="inline"
{...formItemLayout}
style={{ marginBottom: 0 }}
>
<FormItem
<Form.Item
validateStatus="error"
help="Please select the correct date"
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
>
<DatePicker />
</FormItem>
</Form.Item>
<span style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>
-
</span>
<FormItem style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
<DatePicker />
</FormItem>
</FormItem>
</Form.Item>
</Form.Item>
<FormItem
<Form.Item
{...formItemLayout}
label="Success"
hasFeedback
validateStatus="success"
>
<InputNumber style={{ width: '100%' }} />
</FormItem>
</Form.Item>
</Form>,
mountNode
);

6
components/form/demo/without-form-create.md
View File

@ -16,8 +16,6 @@ title:
````jsx
import { Form, InputNumber } from 'antd';
const FormItem = Form.Item;
function validatePrimeNumber(number) {
if (number === 11) {
return {
@ -56,7 +54,7 @@ class RawForm extends React.Component {
const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
return (
<Form>
<FormItem
<Form.Item
{...formItemLayout}
label="Prime between 8 & 12"
validateStatus={number.validateStatus}
@ -68,7 +66,7 @@ class RawForm extends React.Component {
value={number.value}
onChange={this.handleNumberChange}
/>
</FormItem>
</Form.Item>
</Form>
);
}