如何防止在 Form.Item ant 的 InputNumber 中输入超出范围的非数字符号和数字

Question

I tried to handle it in onChange through controlled input.

Tried to handle it in formatter and in parser but invalid values doesn't trigger it, despite the fact that symbols entering in input.

Tried to set value in this input by setFieldsValue method that provided by useForm hook.

Tried to set type="number"

Nothing of this works while InputNumber is inside Form.Item . Link to Sandbox

Please help. How I can resolve it?

Answer 1

Check the following example.

Following code will allow user to enter only the numbers

App.js

import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { InputNumber, Form } from 'antd';

const App = () => {
  return (
    <Form>
      <Form.Item name="input-with-type">
        <InputNumber
          type="number"
          min={0}
          max={9999.99}
          onKeyDown={(event) => {
            const re = /^[0-9\b]+$/;
            if (!re.test(event.key) && event.key !== 'Backspace') {
              event.preventDefault();
            }
          }}
        />
      </Form.Item>
    </Form>
  );
};

export default App;

Note : you can change the regex expression according to your requirements