[英]Number rule is not working on the Input of ANTD
我正在使用 Antd Forms 并输入:number is not working。
rules : {[
{type: number},
{len: 5}, // <<--- THIS ONE IS NOT WORKING
{max: 999} //<<< this one is working
]}
如您所见,我正在使用 InputNumber 我也在尝试使用 Input。
当我输入任何其他数字时,我想得到一个错误。 Antd 有此功能,但我无法使用它。
注意:我不想使用 onChange 事件处理程序并将“validateStatus”设置为错误。
注意:我也不想使用 RegExp,因为我们的数据来自 JSON,我们不硬编码任何值。
任何帮助都会非常有帮助。 谢谢你。
我正在使用“antd”:“3.26.12”版本并使用类组件。
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import {
Form,
Button,
InputNumber,
Input,
Row,
Col,
} from 'antd';
class Demo extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
normFile = e => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="InputNumber">
{getFieldDecorator('input-number', { rule:[ {len : 5}]})(<InputNumber />)} //<<<<---
</Form.Item>
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
}
const WrappedDemo = Form.create({ name: 'validate_other' })(Demo);
ReactDOM.render(<WrappedDemo />, document.getElementById('container'));
您没有使用正确的 API( rules
是一个对象数组),请参阅表单文档及其示例,此外, len
用于字符串并且在InputNumber
没有用,您可能只使用max
:
<Form.Item label="InputNumber">
{getFieldDecorator('input-number', {
rules: [
{
type: 'number',
max: 999,
message: 'The input is not a number, max = 999'
}
]
})(<InputNumber />)}
</Form.Item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.