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

deps: update rc-form and form's docs (#2873)

Browse Source
This commit is contained in:
Benjy Cui 2016-09-01 11:48:38 +08:00 committed by GitHub
parent 6030e6abef
commit 5a4ebe535f
18 changed files with 291 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/affix/demo/target.md
View File

@ -1,6 +1,5 @@
---
order: 4
title: 滚动容器
title:
zh-CN: 滚动容器
en-US: Container to scroll.

9
components/form/Form.tsx
View File

@ -116,6 +116,15 @@ export default class Form extends React.Component<FormProps, any> {
};
},
render() {
const getFieldProps = this.props.form.getFieldProps;
function deprecatedGetFieldProps(name, option) {
warning(
false,
'`getFieldProps` is deprecated and will be removed in future, please use `getFieldDecorator` instead'
);
return getFieldProps(name, option);
}
this.props.form.getFieldProps = deprecatedGetFieldProps;
return <Component {...this.props} />;
},
}));

6
components/form/FormItem.tsx
View File

@ -14,7 +14,7 @@ export interface FormItemLabelColOption {
export interface FormItemProps {
prefixCls?: string;
id?: string;
label?: string;
label?: string | React.ReactNode;
labelCol?: FormItemLabelColOption;
wrapperCol?: FormItemLabelColOption;
help?: React.ReactNode;
@ -40,7 +40,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
static propTypes = {
prefixCls: React.PropTypes.string,
label: React.PropTypes.string,
label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node]),
labelCol: React.PropTypes.object,
help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]),
validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
@ -187,7 +187,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
// remove user input colon
let label = props.label;
if (typeof label === 'string' && label.trim() !== '') {
label = props.label.replace(/[：|:]\s*$/, '');
label = (props.label as string).replace(/[：|:]\s*$/, '');
}
return props.label ? (

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

@ -1,6 +1,6 @@
---
order: 15
title:
title:
zh-CN: 动态增减表单项
en-US: Dynamic form item
---
@ -18,6 +18,11 @@ import { Form, Input, Button } from 'antd';
let uuid = 0;
let Demo = React.createClass({
componentWillMount() {
this.props.form.setFieldsValue({
keys: [0],
});
},
remove(k) {
const { form } = this.props;
// can use data-binding to get
@ -52,10 +57,7 @@ let Demo = React.createClass({
});
},
render() {
const { getFieldProps, getFieldValue } = this.props.form;
getFieldProps('keys', {
initialValue: [0],
});
const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
@ -65,14 +67,15 @@ let Demo = React.createClass({
const formItems = getFieldValue('keys').map((k) => {
return (
<Form.Item {...formItemLayout} label={`good friend${k}：`} key={k}>
<Input {...getFieldProps(`name${k}`, {
{getFieldDecorator(`name${k}`, {
rules: [{
required: true,
whitespace: true,
message: "Your good friend's name",
}],
})} style={{ width: '80%', marginRight: 8 }}
/>
})(
<Input style={{ width: '80%', marginRight: 8 }} />
)}
<Button onClick={() => this.remove(k)}>remove</Button>
</Form.Item>
);

4
components/form/demo/form-controls.md
View File

@ -1,6 +1,6 @@
---
order: 3
title:
title:
zh-CN: 表单控件
en-US: Form controls
---
@ -15,7 +15,7 @@ title:
A list off all the controls that can be used with form.
**Note**: Input control: Only if set correct type for it, then it will be set correct style
**Note**: Input control: Only if set correct type for it, then it will be set correct style.
````jsx
import { Form, Input, Select, Checkbox, Radio } from 'antd';

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

@ -37,7 +37,7 @@ let Demo = React.createClass({
},
render() {
const { getFieldProps } = this.props.form;
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 4 },
@ -52,13 +52,17 @@ let Demo = React.createClass({
{...formItemLayout}
label="User name"
>
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
{getFieldDecorator('username')(
<Input type="text" autoComplete="off" />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Password"
>
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
{getFieldDecorator('password')(
<Input type="password" autoComplete="off" />
)}
</FormItem>
</Form>
</Modal>

26
components/form/demo/horizontal-form.md
View File

@ -1,6 +1,6 @@
---
order: 2
title:
title:
zh-CN: 典型表单
en-US: Horizontal form
---
@ -25,7 +25,7 @@ let Demo = React.createClass({
},
render() {
const { getFieldProps } = this.props.form;
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
@ -42,29 +42,37 @@ let Demo = React.createClass({
{...formItemLayout}
label="Password"
>
<Input type="password" {...getFieldProps('pass', { initialValue: '' })} placeholder="Please input the password" />
{getFieldDecorator('pass', { initialValue: '' })(
<Input type="password" placeholder="Please input the password" />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Gender"
>
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
<Radio value="male">male</Radio>
<Radio value="female">female</Radio>
</RadioGroup>
{getFieldDecorator('gender', { initialValue: 'female' })(
<RadioGroup>
<Radio value="male">male</Radio>
<Radio value="female">female</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="remarks"
help="Please input something"
>
<Input type="textarea" placeholder="Please input something" {...getFieldProps('remark', { initialValue: '' })} />
{getFieldDecorator('remark', { initialValue: '' })(
<Input type="textarea" placeholder="Please input something" />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={<span>Sold myself <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
>
<Checkbox {...getFieldProps('agreement', { initialValue: false, valuePropName: 'checked' })}>agree</Checkbox>
{getFieldDecorator('agreement', { initialValue: false, valuePropName: 'checked' })(
<Checkbox>agree</Checkbox>
)}
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
<Button type="primary" htmlType="submit">OK</Button>

22
components/form/demo/inline-form.md
View File

@ -1,6 +1,6 @@
---
order: 1
title:
title:
zh-CN: 平行排列
en-US: Inline form
---
@ -11,7 +11,7 @@ title:
## en-US
Inline form is often used for login.
Inline form is often used for login.
````jsx
import { Form, Input, Button, Checkbox } from 'antd';
@ -24,25 +24,27 @@ let Demo = React.createClass({
},
render() {
const { getFieldProps } = this.props.form;
const { getFieldDecorator } = this.props.form;
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="Account"
>
<Input placeholder="Please input the account"
{...getFieldProps('userName')}
/>
{getFieldDecorator('userName')(
<Input placeholder="Please input the account" />
)}
</FormItem>
<FormItem
label="Password"
>
<Input type="password" placeholder="Please input the password"
{...getFieldProps('password')}
/>
{getFieldDecorator('password')(
<Input type="password" placeholder="Please input the password" />
)}
</FormItem>
<FormItem>
<Checkbox {...getFieldProps('agreement')}>Remember me</Checkbox>
{getFieldDecorator('agreement')(
<Checkbox>Remember me</Checkbox>
)}
</FormItem>
<Button type="primary" htmlType="submit">Submit</Button>
</Form>

2
components/form/demo/input-group.md
View File

@ -1,6 +1,6 @@
---
order: 4
title:
title:
zh-CN: 输入框组合
en-US: Input group
---

82
components/form/demo/mix.md
View File

@ -1,6 +1,6 @@
---
order: 5
title:
title:
zh-CN: 表单组合
en-US: mix
---
@ -48,7 +48,7 @@ let Demo = React.createClass({
},
render() {
const { getFieldProps } = this.props.form;
const { getFieldDecorator } = this.props.form;
return (
<Form horizontal onSubmit={this.handleSubmit} >
<FormItem
@ -56,9 +56,9 @@ let Demo = React.createClass({
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
<InputNumber min={1} max={10} style={{ width: 100 }}
{...getFieldProps('inputNumber', { initialValue: 3 })}
/>
{getFieldDecorator('inputNumber', { initialValue: 3 })(
<InputNumber min={1} max={10} style={{ width: 100 }} />
)}
<span className="ant-form-text"> machines</span>
</FormItem>
@ -79,7 +79,9 @@ let Demo = React.createClass({
wrapperCol={{ span: 10 }}
required
>
<Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
{getFieldDecorator('switch', { valuePropName: 'checked' })(
<Switch />
)}
</FormItem>
<FormItem
@ -88,7 +90,9 @@ let Demo = React.createClass({
wrapperCol={{ span: 10 }}
required
>
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
{getFieldDecorator('slider')(
<Slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
)}
</FormItem>
<FormItem
@ -97,14 +101,14 @@ let Demo = React.createClass({
wrapperCol={{ span: 16 }}
required
>
<Select style={{ width: 200 }}
{...getFieldProps('select')}
>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
{getFieldDecorator('select')(
<Select style={{ width: 200 }}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
)}
</FormItem>
<FormItem
@ -114,7 +118,9 @@ let Demo = React.createClass({
required
hasFeedback
>
<Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
{getFieldDecorator('area')(
<Cascader style={{ width: 200 }} options={areaData} />
)}
</FormItem>
<FormItem
@ -124,7 +130,9 @@ let Demo = React.createClass({
>
<Col span="6">
<FormItem>
<DatePicker {...getFieldProps('startDate')} />
{getFieldDecorator('startDate')(
<DatePicker />
)}
</FormItem>
</Col>
<Col span="1">
@ -132,7 +140,9 @@ let Demo = React.createClass({
</Col>
<Col span="6">
<FormItem>
<DatePicker {...getFieldProps('endDate')} />
{getFieldDecorator('endDate')(
<DatePicker />
)}
</FormItem>
</Col>
</FormItem>
@ -144,18 +154,22 @@ let Demo = React.createClass({
wrapperCol={{ span: 16 }}
required
>
<TimePicker {...getFieldProps('time')} />
{getFieldDecorator('time')(
<TimePicker />
)}
</FormItem>
<FormItem
label="Options"
labelCol={{ span: 8 }}
>
<RadioGroup {...getFieldProps('rg')}>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
{getFieldDecorator('rg')(
<RadioGroup>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
)}
</FormItem>
<FormItem
@ -164,16 +178,16 @@ let Demo = React.createClass({
wrapperCol={{ span: 16 }}
help="longgggggggggggggggggggggggggggggggggg"
>
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
{...getFieldProps('upload', {
valuePropName: 'fileList',
normalize: this.normFile,
})}
>
<Button type="ghost">
<Icon type="upload" /> Click to upload
</Button>
</Upload>
{getFieldDecorator('upload', {
valuePropName: 'fileList',
normalize: this.normFile,
})(
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
<Button type="ghost">
<Icon type="upload" /> Click to upload
</Button>
</Upload>
)}
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 8 }} style={{ marginTop: 24 }}>

103
components/form/demo/validate-basic.md
View File

@ -72,46 +72,7 @@ let BasicDemo = React.createClass({
},
render() {
const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
const nameProps = getFieldProps('name', {
rules: [
{ required: true, min: 5, message: 'User name for at least 5 characters' },
{ validator: this.userExists },
],
});
const emailProps = getFieldProps('email', {
validate: [{
rules: [
{ required: true },
],
trigger: 'onBlur',
}, {
rules: [
{ type: 'email', message: 'Please input the correct email' },
],
trigger: ['onBlur', 'onChange'],
}],
});
const passwdProps = getFieldProps('passwd', {
rules: [
{ required: true, whitespace: true, message: 'Please enter your password' },
{ validator: this.checkPass },
],
});
const rePasswdProps = getFieldProps('rePasswd', {
rules: [{
required: true,
whitespace: true,
message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
});
const textareaProps = getFieldProps('textarea', {
rules: [
{ required: true, message: 'Really not supposed to write something?' },
],
});
const { getFieldDecorator, getFieldError, isFieldValidating } = this.props.form;
const formItemLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 12 },
@ -124,7 +85,14 @@ let BasicDemo = React.createClass({
hasFeedback
help={isFieldValidating('name') ? 'validating...' : (getFieldError('name') || []).join(', ')}
>
<Input {...nameProps} placeholder="Real-tiem validation, try to input JasonWood" />
{getFieldDecorator('name', {
rules: [
{ required: true, min: 5, message: 'User name for at least 5 characters' },
{ validator: this.userExists },
],
})(
<Input placeholder="Real-tiem validation, try to input JasonWood" />
)}
</FormItem>
<FormItem
@ -132,7 +100,21 @@ let BasicDemo = React.createClass({
label="Email"
hasFeedback
>
<Input {...emailProps} type="email" placeholder="This control uses onBlur and onChange" />
{getFieldDecorator('email', {
validate: [{
rules: [
{ required: true },
],
trigger: 'onBlur',
}, {
rules: [
{ type: 'email', message: 'Please input the correct email' },
],
trigger: ['onBlur', 'onChange'],
}],
})(
<Input type="email" placeholder="This control uses onBlur and onChange" />
)}
</FormItem>
<FormItem
@ -140,9 +122,16 @@ let BasicDemo = React.createClass({
label="Password"
hasFeedback
>
<Input {...passwdProps} type="password" autoComplete="off"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
{getFieldDecorator('passwd', {
rules: [
{ required: true, whitespace: true, message: 'Please enter your password' },
{ validator: this.checkPass },
],
})(
<Input type="password" autoComplete="off"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
)}
</FormItem>
<FormItem
@ -150,16 +139,32 @@ let BasicDemo = React.createClass({
label="Confirm password"
hasFeedback
>
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="Two passwords that you enter must be consistent"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
{getFieldDecorator('rePasswd', {
rules: [{
required: true,
whitespace: true,
message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
})(
<Input type="password" autoComplete="off" placeholder="Two passwords that you enter must be consistent"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="remark"
>
<Input {...textareaProps} type="textarea" placeholder="Please write something" id="textarea" name="textarea" />
{getFieldDecorator('textarea', {
rules: [
{ required: true, message: 'Really not supposed to write something?' },
],
})(
<Input type="textarea" placeholder="Please write something" id="textarea" name="textarea" />
)}
</FormItem>
<FormItem wrapperCol={{ span: 12, offset: 7 }}>

65
components/form/demo/validate-customized.md
View File

@ -122,40 +122,31 @@ let Demo = React.createClass({
},
render() {
const { getFieldProps } = this.props.form;
const passProps = getFieldProps('pass', {
rules: [
{ required: true, whitespace: true, message: 'Please enter your password' },
{ validator: this.checkPass },
],
onChange: (e) => {
console.log('Your password is stolen in this way', e.target.value);
},
});
const rePassProps = getFieldProps('rePass', {
rules: [{
required: true,
whitespace: true,
message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
});
const { getFieldDecorator } = this.props.form;
return (
<div>
<Form vertical style={{ maxWidth: 600 }} form={this.props.form}>
<Row type="flex" align="middle">
<Col span={12}>
<FormItem label="Password">
<Input {...passProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="pass"
onBlur={(e) => {
const value = e.target.value;
this.setState({ dirty: this.state.dirty || !!value });
}}
/>
{getFieldDecorator('pass', {
rules: [
{ required: true, whitespace: true, message: 'Please enter your password' },
{ validator: this.checkPass },
],
})(
<Input type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="pass"
onChange={(e) => {
console.log('Your password is stolen in this way', e.target.value);
}}
onBlur={(e) => {
const value = e.target.value;
this.setState({ dirty: this.state.dirty || !!value });
}}
/>
)}
</FormItem>
</Col>
<Col span={12}>
@ -165,10 +156,20 @@ let Demo = React.createClass({
<Row type="flex" align="middle">
<Col span={12}>
<FormItem label="Confirm">
<Input {...rePassProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="rePass"
/>
{getFieldDecorator('rePass', {
rules: [{
required: true,
whitespace: true,
message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
})(
<Input type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="rePass"
/>
)}
</FormItem>
</Col>
<Col span={12}>

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

@ -56,7 +56,7 @@ let Demo = React.createClass({
checkPrime(rule, value, callback) {
if (value !== 11) {
callback(new Error('The prime number between 8 to 12 is obiviously 11!'));
callback(new Error('The prime number between 8 to 12 is 11!'));
} else {
callback();
}
@ -71,45 +71,7 @@ let Demo = React.createClass({
label: 'Hang Zhou',
}],
}];
const { getFieldProps } = this.props.form;
const selectProps = getFieldProps('select', {
rules: [
{ required: true, message: 'Please select your country' },
],
});
const multiSelectProps = getFieldProps('multiSelect', {
rules: [
{ required: true, message: 'Please select your favourite colors', type: 'array' },
],
});
const radioProps = getFieldProps('radio', {
rules: [
{ required: true, message: 'Please select your gender' },
],
});
const birthdayProps = getFieldProps('birthday', {
rules: [
{
required: true,
type: 'date',
message: 'When is your birthday?',
}, {
validator: this.checkBirthday,
},
],
});
const timeProps = getFieldProps('time', {
getValueFromEvent: (value, timeString) => timeString,
rules: [
{ required: true, message: 'Please select the time' },
],
});
const primeNumberProps = getFieldProps('primeNumber', {
rules: [{ validator: this.checkPrime }],
});
const addressProps = getFieldProps('address', {
rules: [{ required: true, type: 'array' }],
});
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 12 },
@ -120,80 +82,131 @@ let Demo = React.createClass({
{...formItemLayout}
label="Country"
>
<Select {...selectProps} placeholder="Please select a country" style={{ width: '100%' }}>
<Option value="china">China</Option>
<Option value="use">U.S.A</Option>
<Option value="japan">Japan</Option>
<Option value="korean">Korea</Option>
<Option value="Thailand">Thai</Option>
</Select>
{getFieldDecorator('select', {
rules: [
{ required: true, message: 'Please select your country' },
],
})(
<Select placeholder="Please select a country" style={{ width: '100%' }}>
<Option value="china">China</Option>
<Option value="use">U.S.A</Option>
<Option value="japan">Japan</Option>
<Option value="korean">Korea</Option>
<Option value="Thailand">Thai</Option>
</Select>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Favourite colors"
>
<Select {...multiSelectProps} multiple placeholder="Please select favourite colors" style={{ width: '100%' }}>
<Option value="red">Red</Option>
<Option value="orange">Orange</Option>
<Option value="yellow">Yellow</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</Select>
{getFieldDecorator('multiSelect', {
rules: [
{ required: true, message: 'Please select your favourite colors', type: 'array' },
],
})(
<Select multiple placeholder="Please select favourite colors" style={{ width: '100%' }}>
<Option value="red">Red</Option>
<Option value="orange">Orange</Option>
<Option value="yellow">Yellow</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</Select>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Gender"
>
<RadioGroup {...radioProps}>
<Radio value="male">male</Radio>
<Radio value="female">female</Radio>
</RadioGroup>
<span><Icon type="info-circle-o" /> Temporarily does not support ohter gender</span>
{getFieldDecorator('radio', {
rules: [
{ required: true, message: 'Please select your gender' },
],
})(
<RadioGroup>
<Radio value="male">male</Radio>
<Radio value="female">female</Radio>
</RadioGroup>
)}
<span><Icon type="info-circle-o" /> Temporarily no ohter gender</span>
</FormItem>
<FormItem
{...formItemLayout}
label="Hobby"
>
<Checkbox {...getFieldProps('eat', {
{getFieldDecorator('eat', {
valuePropName: 'checked',
})}>eat</Checkbox>
<Checkbox {...getFieldProps('sleep', {
})(
<Checkbox>eat</Checkbox>
)}
{getFieldDecorator('sleep', {
valuePropName: 'checked',
})}>sleeping</Checkbox>
<Checkbox {...getFieldProps('beat', {
})(
<Checkbox>sleeping</Checkbox>
)}
{getFieldDecorator('beat', {
valuePropName: 'checked',
})}>dozen doug</Checkbox>
})(
<Checkbox>dozen doug</Checkbox>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Birthday"
>
<DatePicker {...birthdayProps} />
{getFieldDecorator('birthday', {
rules: [
{
required: true,
type: 'date',
message: 'When is your birthday?',
}, {
validator: this.checkBirthday,
},
],
})(
<DatePicker />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Select the time"
>
<TimePicker {...timeProps} />
{getFieldDecorator('time', {
getValueFromEvent: (value, timeString) => timeString,
rules: [
{ required: true, message: 'Please select the time' },
],
})(
<TimePicker />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="A prime number between 8 to 12"
label="Prime num between 8, 12"
>
<InputNumber {...primeNumberProps} min={8} max={12} />
{getFieldDecorator('primeNumber', {
rules: [{ validator: this.checkPrime }],
})(
<InputNumber min={8} max={12} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Please select address"
>
<Cascader {...addressProps} options={address} />
{getFieldDecorator('address', {
rules: [{ required: true, type: 'array' }],
})(
<Cascader options={address} />
)}
</FormItem>
<FormItem

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

@ -1,6 +1,6 @@
---
order: 6
title:
title:
zh-CN: 校验提示
en-US: Validation message
---

13
components/form/index.en-US.md
View File

@ -73,19 +73,15 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
| getFieldError | Get the error of a field. | Function(name) |
| isFieldValidating | Check if the specified field is being validated. | Function(name) |
| resetFields | Reset the specified fields' value and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) |
| getFieldProps | Two-way binding for form, please read below for details. | |
| getFieldDecorator | Two-way binding for form, please read below for details. | |
### this.props.form.getFieldProps(id, options)
### this.props.form.getFieldDecorator(id, options)
#### Special attention
If you use `react@<15.3.0`, then, you can't use `getFieldProps` in functional components: https://github.com/facebook/react/pull/6534
If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: https://github.com/facebook/react/pull/6534
The return value of `getFieldProps` contains `id`、`value`(or any other props `valuePropName` that you specified),`ref`,`onChange`(or any other `trigger` `validateTrigger` that you specified), **shouldn't set same property again** in order to avoid conflict. If you concerntate on the details on return value, you can print them to console by `console.log`.
> Don't use `defaultValue` in form, please use `initialValue` instead of it.
#### getFieldProps options
#### getFieldDecorator's parameters
| Property | Description | Type | Default Value |
|-----------|-----------------------------------------|-----|--------|
@ -96,7 +92,6 @@ The return value of `getFieldProps` contains `id`、`value`(or any other props `
| options.getValueFromEvent | To convert parameters of onChange to the value of control, for example, set value of DatePicker: `(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | When to validate the value of children node. | string | 'onChange' |
| options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator) for details. | array | n/a |
| options.onXXX | Because `getFieldProps` will replace events like `onChange`, `trigger`, `validateTrigger`, if you still want to bind these events, you may set them in `options` | function | n/a |
| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
### Form.Item

15
components/form/index.zh-CN.md
View File

@ -75,30 +75,25 @@ CustomizedForm = Form.create({})(CustomizedForm);
| getFieldError | 获取某个输入控件的 Error | Function(name) |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
| getFieldProps | 用于和表单进行双向绑定，详见下方描述 | |
| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
### this.props.form.getFieldProps(id, options)
### this.props.form.getFieldDecorator(id, options)
#### 特别注意
如果使用的是 `react@<15.3.0`，则 `getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
`getFieldProps` 返回的属性包括 `id`、`value`（或你设置的其它 `valuePropName`）、`ref`、`onChange`（或者你设置的其它 `trigger` `validateTrigger`），**所以不应再设置同样的属性**，以免冲突。如果对其返回值的细节有兴趣，可以 `console.log` 出来查看。
> 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。
#### getFieldProps options
#### getFieldDecorator 参数
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----|--------|
| options.id | 必填输入控件唯一标志 | string | |
| id | 必填输入控件唯一标志 | string | |
| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | |
| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
| options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：`(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 |
| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |
### Form.Item

1
components/input/Input.tsx
View File

@ -56,7 +56,6 @@ export interface InputProps {
export default class Input extends Component<InputProps, any> {
static Group: any;
static defaultProps = {
defaultValue: '',
disabled: false,
prefixCls: 'ant-input',
type: 'text',

2
package.json
View File

@ -49,7 +49,7 @@
"rc-dialog": "~6.2.1",
"rc-dropdown": "~1.4.8",
"rc-editor-mention": "^0.2.2",
"rc-form": "~0.17.1",
"rc-form": "~1.0.0",
"rc-input-number": "~2.6.3",
"rc-menu": "^5.0.0",
"rc-notification": "~1.3.4",