Числовое правило не работает на входе ANTD

Question

Я использую формы Antd и введите: номер не работает.

rules : {[
{type: number},
{len: 5}, // <<--- THIS ONE IS NOT WORKING
{max: 999} //<<< this one is working
]}

Как вы можете видеть, я использую InputNumber. Я тоже пытаюсь использовать Input.

Когда я введите что-нибудь другое, чем номер, который я хочу получить ошибку. Antd обладает этой функциональностью, но я не могу ее использовать.

ПРИМЕЧАНИЕ. Я не хочу использовать обработчик события onChange и устанавливать «validateStatus» в error.

ПРИМЕЧАНИЕ. Я также мы не хотим использовать 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'));

Answer 1

Вы не используете правильный 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>