我想在 Form.Item Ant 设计中处理错误状态。如何处理禁用按钮？

Question

我花了将近 1 周的时间来解决这个问题。

我想在字段出错时禁用按钮。 不知何故，form.getFieldsError() 总是得到 Array(0)，甚至出现了错误消息 this is required 或 should be 7 digit。

如果你有任何想法，请帮助我。

这是我的代码。

import React from 'react';
import { Form, Input, Button } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const DynamicFieldSet = () => {
  const MAX = 3;
  const [form] = Form.useForm();

  const onValuesChange = (changedValues, allValues) => {
    console.log(allValues.lines);
  };

  console.log(
    // this is always true
    form.getFieldsError().filter(({ errors }) => errors.length).length === 0
  );

  return (
    <Form
      initialValues={{ lines: [''] }}
      onValuesChange={onValuesChange}
      form={form}
      name={'lines'}
    >
      <Form.List name={'lines'}>
        {(fields, { add, remove }, { errors }) => {
          return (
            <div>
              {fields.map((field, index) =>
                index < MAX ? (
                  <Form.Item required={false} key={field.key}>
                    <Form.Item
                      {...field}
                      validateTrigger={['onChange', 'onBlur']}
                      rules={[
                        {
                          required: true,
                          message: 'this is required',
                        },
                        {
                          min: 7,
                          max: 7,
                          message: 'should be 7 digit',
                        },
                      ]}
                      noStyle
                    >
                      <Input
                        placeholder=""
                        style={{ width: '50%' }}
                        type="number"
                      />
                    </Form.Item>
                    {index === 0 ? (
                      <>
                        <PlusOutlined
                          onClick={() => {
                            add();
                          }}
                        />
                      </>
                    ) : index === MAX - 1 ? (
                      <MinusCircleOutlined onClick={() => remove(field.name)} />
                    ) : (
                      <>
                        <PlusOutlined
                          onClick={() => {
                            add();
                          }}
                        />
                        <MinusCircleOutlined
                          onClick={() => remove(field.name)}
                        />
                      </>
                    )}
                  </Form.Item>
                ) : null
              )}
            </div>
          );
        }}
      </Form.List>
      <Form.Item>
        <Button disabled={false} htmlType="submit">
          Send
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DynamicFieldSet;

Answer 1

我不太确定为什么，但 form.getFieldsError() 是行不通的。为了达到您的需要，您应该尝试改用form.validateFields()。 validateFields 方法返回一个显示所有字段数据或错误的承诺：

form.validateFields()
    .then(values => {
        // Do something with values
    })
    .catch(errors => {
        // Do something with errors;
    });

请注意，这将验证您甚至没有接触过的所有字段，从而显示所有提供的所有字段的错误消息。因此，如果您只想验证一个字段左右，您需要做的就是提供一组字段名称，例如 ['myInput']。

从这里，只需创建一个新状态以在出现错误时设置并使用它来显示/隐藏启用/禁用您的按钮。