CODEWITHSUNDEEP
javascriptreactjsformsantd
amy
amy

Reputation: 243

Number rule is not working on the Input of ANTD

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

Upvotes: 2

Views: 11850

Answers (2)

Kerim Tachgurbanov
Kerim Tachgurbanov

Reputation: 41

Maybe you can do it this way!

 <Form.Item
             label="phone"
              name="phone"
              rules={[
                { type: 'number',
                  max: 999,
                  min: 5,
                  message: "Min max validation error!",
                  transform(value) {
                    return Number(value)
                  },
                }
              ]}>
           <Input  key={2} />
            </Form.Item>

Upvotes: 3

Dennis Vash
Dennis Vash

Reputation: 53894

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>

Edit magical-stallman-sjr73

Upvotes: 3

Related Questions