mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 03:29:39 +08:00
docs: simplify demo
This commit is contained in:
Benjy Cui
parent
f40ba76ba7
commit
1eb3d68656
@ -18,8 +18,8 @@ import { Form, Input } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const CustomizedForm = Form.create({
|
||||
onFieldsChange(props, fields) {
|
||||
props.onChange(fields);
|
||||
onFieldsChange(props, changedFields) {
|
||||
props.onChange(changedFields);
|
||||
},
|
||||
mapPropsToFields(props) {
|
||||
return {
|
||||
@ -52,8 +52,10 @@ const Demo = React.createClass({
|
||||
},
|
||||
};
|
||||
},
|
||||
handleFormChange(fields) {
|
||||
this.setState({ fields });
|
||||
handleFormChange(changedFields) {
|
||||
this.setState({
|
||||
fields: { ...this.state.fields, ...changedFields },
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const fields = this.state.fields;
|
||||
|
||||
@ -195,19 +195,15 @@ const RegistrationForm = Form.create()(React.createClass({
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Row>
|
||||
<Col span={14} offset={6}>
|
||||
<p>
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
})(
|
||||
<Checkbox>I had read the <a>agreement</a></Checkbox>
|
||||
)}
|
||||
</p>
|
||||
<Button type="primary" htmlType="submit" size="large">Register</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormItem wrapperCol={{ span: 14, offset: 6 }}>
|
||||
<p>
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
})(
|
||||
<Checkbox>I had read the <a>agreement</a></Checkbox>
|
||||
)}
|
||||
</p>
|
||||
<Button type="primary" htmlType="submit" size="large">Register</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
After `antd@2.0`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values.
|
||||
|
||||
````jsx
|
||||
import { Form, DatePicker, TimePicker, Row, Col, Button } from 'antd';
|
||||
import { Form, DatePicker, TimePicker, Button } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const MonthPicker = DatePicker.MonthPicker;
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
@ -108,12 +108,8 @@ const TimeRelatedForm = Form.create()(React.createClass({
|
||||
<TimePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Row>
|
||||
<Col span={14} offset={6}>
|
||||
<Button type="primary" htmlType="submit" size="large">Submit</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormItem wrapperCol={{ span: 16, offset: 8 }}>
|
||||
<Button type="primary" htmlType="submit" size="large">Submit</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@ -2,56 +2,33 @@
|
||||
order: 11
|
||||
title:
|
||||
zh-CN: 校验其他组件
|
||||
en-US: Others components related to validation
|
||||
en-US: Other Form Controls
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
提供以下组件表单域的校验：`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`，进行校验，可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
|
||||
以上演示没有出现的表单控件对应的校验演示。
|
||||
|
||||
## en-US
|
||||
|
||||
Provide validation for following input filed: `Select` `Radio` `DatePicker` `InputNumber` `Cascader`. To use `validateFieldsAndScroll` with form validation, it will scroll the form to the failed input field which is not in visible area.
|
||||
Demostration for validataion configuration for form controls which are not show in the above demos.
|
||||
|
||||
````jsx
|
||||
import { Select, Radio, Checkbox, Button, DatePicker, TimePicker, InputNumber, Form, Cascader, Icon } from 'antd';
|
||||
import { Select, Button, InputNumber, Form } from 'antd';
|
||||
const Option = Select.Option;
|
||||
const RadioGroup = Radio.Group;
|
||||
const createForm = Form.create;
|
||||
const FormItem = Form.Item;
|
||||
|
||||
let Demo = React.createClass({
|
||||
componentDidMount() {
|
||||
this.props.form.setFieldsValue({
|
||||
eat: true,
|
||||
sleep: true,
|
||||
beat: true,
|
||||
});
|
||||
},
|
||||
|
||||
handleReset(e) {
|
||||
e.preventDefault();
|
||||
this.props.form.resetFields();
|
||||
},
|
||||
|
||||
const Demo = Form.create()(React.createClass({
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
this.props.form.validateFieldsAndScroll((errors, values) => {
|
||||
if (errors) {
|
||||
console.log('Errors in form!!!');
|
||||
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
console.log('Submit!!!');
|
||||
console.log(values);
|
||||
});
|
||||
},
|
||||
|
||||
checkBirthday(rule, value, callback) {
|
||||
if (value && value.valueOf() >= Date.now()) {
|
||||
callback(new Error("You can't be born in the future!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
console.log('Received values of form: ', values);
|
||||
});
|
||||
},
|
||||
|
||||
checkPrime(rule, value, callback) {
|
||||
@ -63,21 +40,13 @@ let Demo = React.createClass({
|
||||
},
|
||||
|
||||
render() {
|
||||
const address = [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhe Jiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hang Zhou',
|
||||
}],
|
||||
}];
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 12 },
|
||||
};
|
||||
return (
|
||||
<Form horizontal>
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Country"
|
||||
@ -116,68 +85,6 @@ let Demo = React.createClass({
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Gender"
|
||||
>
|
||||
{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" /> No other gender</span>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Hobby"
|
||||
>
|
||||
{getFieldDecorator('hobby')(
|
||||
<Checkbox.Group options={['eat', 'sleeping', 'dozen doug']} />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Birthday"
|
||||
>
|
||||
{getFieldDecorator('birthday', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
type: 'object',
|
||||
message: 'When is your birthday?',
|
||||
}, {
|
||||
validator: this.checkBirthday,
|
||||
},
|
||||
],
|
||||
})(
|
||||
<DatePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Select the time"
|
||||
>
|
||||
{getFieldDecorator('time', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
type: 'object',
|
||||
message: 'Please select the time',
|
||||
},
|
||||
],
|
||||
})(
|
||||
<TimePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Prime num between 8, 12"
|
||||
@ -189,29 +96,13 @@ let Demo = React.createClass({
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Please select address"
|
||||
>
|
||||
{getFieldDecorator('address', {
|
||||
rules: [{ required: true, type: 'array' }],
|
||||
})(
|
||||
<Cascader options={address} />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
wrapperCol={{ span: 12, offset: 7 }}
|
||||
>
|
||||
<Button type="primary" onClick={this.handleSubmit}>OK</Button>
|
||||
|
||||
<Button type="ghost" onClick={this.handleReset}>Reset</Button>
|
||||
<FormItem wrapperCol={{ span: 12, offset: 7 }}>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
Demo = createForm()(Demo);
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
Loading…
Reference in New Issue
Block a user