Как правильно проверить и отправить, если форма верна с формой дизайна муравья с машинописью

Question

Я строю простую форму с реагирующим, редукционным, машинописным дизайном.Следуя документации по разработке муравья, я создал небольшую форму, используя предоставленные методы getFieldDecorator и Form.create.Пока все работает нормально, и проверка выполняется самим ant design при вводе данных в поля.Моя главная проблема связана с отправкой формы.Я хочу предоставить данные только в том случае, если форма подтверждена и форма является, следовательно, «действительной».

Официальная документация использует validateFields для проверки формы и возвращает переменную, которая содержит ошибки и возвращает дальнейшее выполнение, чтобы форма не была отправлена.Теперь с машинописью у меня есть следующие подписи: validateFields(): void; <- я использую этот метод для запуска проверки при отправке формы, а затем вызываю <code>getFieldsError(names?: Array<string>): Record<string, string[] | undefined>;

Теперь, если вы посмотрите на пример кода, то уродливая частьиспользует переменную "allValid", чтобы проверить, является ли форма действительной или нет.Я думал, что должен быть более простой способ проверки и предоставления данных, если форма действительна.

const UploadForm: FunctionComponent<FormComponentProps> = props => {
  const { getFieldDecorator, validateFields, getFieldsError } = props.form;
  const dispatch = useDispatch();

  return (
    <Form
      {...formItemLayout}
      onSubmit={event => {
        event.preventDefault();
        validateFields();
        const validationErrors = getFieldsError();
        let allValid = true;
        console.log(validationErrors);
        for (let key in validationErrors) {
          console.log(validationErrors[key]);
          if (validationErrors[key] !== undefined) {
            allValid = false;
            break;
          }
        }

        if (allValid) {
          dispatch(submitFormData());
        }
      }}
    >
      <ImageComponent />
      <Form.Item label="E-mail">
        {getFieldDecorator("email", {
          rules: [
            {
              type: "email",
              message: "The input is not valid E-mail!"
            },
            {
              required: true,
              message: "Please enter your E-mail!"
            }
          ]
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="Your e-mail"
          />
        )}
      </Form.Item>
      <Form.Item {...buttonItemLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Form.create < FormComponentProps > {}(UploadForm);

Answer 1

Вы можете использовать Object.values ​​() и Array.find () , чтобы найти значение undefined.

validateFields();
const validationErrors = Object.values(getFieldsError());

if (!validationErrors.find(e => e === undefined)) dispatch(submitFormData());

Или вы можете отключить отправку Button.

Проверять каждый Form.Item и разрешать отправку только тогда, когда весь статус проверки success.

<Button
  type="primary"
  htmlType="submit"
  disabled={!(validateEmptyField(name) && validateEmptyField(surName))}
>
  Submit
</Button>;

Используйте validateStatus для проверки каждого Form.Item:

function FromValidate() {
  const [name, setName] = useState('');
  const [surName, setSurName] = useState('');

  return (
    <Flexbox>
      <Form
        onSubmit={e => {
          e.preventDefault();
          console.log('name', name);
          console.log('surName', surName);
        }}
      >
        <Form.Item
          label="Name"
          required={true}
          validateStatus={validateEmptyField(name) ? 'success' : 'error'}
          help={!validateEmptyField(name) && 'Name cannot be empty'}
        >
          <Input
            placeholder="Unique Identifier"
            value={name}
            onChange={e => setName(e.target.value)}
          />
        </Form.Item>
        ...
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            disabled={
              !(validateEmptyField(name) && validateEmptyField(surName))
            }
          >
            Submit
          </Button>
        </Form.Item>
      </Form>
    </Flexbox>
  );
}