[英]Number rule is not working on the Input of ANTD
I am using Antd Forms and type: number is not working.我正在使用 Antd Forms 并输入:number is not working。
rules : {[
{type: number},
{len: 5}, // <<--- THIS ONE IS NOT WORKING
{max: 999} //<<< this one is working
]}
As you can see I am using the InputNumber I am trying to use Input too.如您所见,我正在使用 InputNumber 我也在尝试使用 Input。
When I enter anything other then the number I want to get an error.当我输入任何其他数字时,我想得到一个错误。 Antd has this functionality but I am not able to use it.
Antd 有此功能,但我无法使用它。
NOTE: I do not want to use the onChange event handler and set the "validateStatus" to error.注意:我不想使用 onChange 事件处理程序并将“validateStatus”设置为错误。
NOTE: I also do not want to use the RegExp because our data is coming from JSON we do not hard code any values.注意:我也不想使用 RegExp,因为我们的数据来自 JSON,我们不硬编码任何值。
Any help will be very helpful.任何帮助都会非常有帮助。 Thank you.
谢谢你。
I am using "antd": "3.26.12" version and using the class component.我正在使用“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'));
You are not using the right API ( rules
is an array of objects), please refer to form docs and its examples, also, len
is for strings and is useless in InputNumber
, you might just use max
:您没有使用正确的 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.