Number rule is not working on the Input of ANTD

Question

I am using Antd Forms and type: 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.

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.

NOTE: I do not want to use the onChange event handler and set the "validateStatus" to error.

NOTE: I also do not want to use the RegExp because our data is coming from JSON we do not hard code any values.

Any help will be very helpful. Thank you.

I am using "antd": "3.26.12" version and using the class component.

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'));

Answer 1

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 :

<Form.Item label="InputNumber">
  {getFieldDecorator('input-number', {
    rules: [
      {
        type: 'number',
        max: 999,
        message: 'The input is not a number, max = 999'
      }
    ]
  })(<InputNumber />)}
</Form.Item>