1、两个关联的输入框,输入的内容不能重复,重复了的话,会给出提示,并且还提交不了
以下代码仅供参考,每个公司都有自己的一套代码框架
重要在于这个: validator: newLawyerId
参考下面Antd组件中Form (滑到最下面的校验规则里的validator)
validator 自定义校验(callback必须被调用)
newLawyerId 随意定义的一个方法名
Ant Design 组件: 选择器 Select - Ant Design
import React from 'react'
import { connect } from 'apollo'
import { Form, Row, Col, Card, message, Button } from 'antd'
const FormItem = Form.Item
class UpdateLawyerView extends React.Component {
// 提交
submit = () => {
this.props.form.validateFields((error, values) => {
if(!error){
message.info("新旧律师职业证书号重复了!")
} else {
this.props.modifyLawyerId(values)
}
})
}
// 重置
reset = () => {
this.props.form.resetFields()
}
render () {
const { getFieldDecorator } = this.props.form
const newLawyerId = (rule, value, callback) => {
// value指新输入的,val指旧的
const val = this.props.form
if( value && value === val.getFieldValue('oldLawyerId') ){
callback('新旧律师职业证书号重复了!')
} else {
callback()
}
}
return (
<div>
<Card title="13.修改律师职业证书号">
<Form>
<Row>
<Col span={10}>
<FormItem label="旧律师职业证书号">
{getFieldDecorator('oldLawyerId', {
rules: [
{
required: true,
message: '请输入旧律师职业证书号'
},
],
})( <Input placeholder="请输入旧律师职业证书号" allowClear /> )}
</FormItem>
</Col>
<Col span={10}>
<FormItem label="新律师职业证书号">
{getFieldDecorator('newLawyerId', {
rules: [
{
required: true,
message: '请输入新律师职业证书号'
},
{
validator: newLawyerId,
},
],
})( <Input placeholder="请输入新律师职业证书号" allowClear /> )}
</FormItem>
</Col>
<Col span={4}>
<div>
<Button type="primary" onClick={this.submit}>提交</Button>
<Button type="primary" onClick={this.reset}>重置</Button>
</div>
</Col>
</Row>
</Form>
</Card>
</div>
)
}
}
const mapStateToProps = ({ commonlyUsedFunctions }) => ({ ...commonlyUsedFunctions })
const mapDospatchToProps = dispatch => ({
modifyLawyerId(values){
dispatch({
type: 'commonlyUsedFunctions/updateLawyerId',
payload: {
values,
},
async: true,
})
}
})
export default connect(mapStateToProps, mapStateToProps)(Form.create()(UpdateLawyerView ))