數字規則對 ANTD 的輸入不起作用

Question

我正在使用 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'));

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>