如何以 redux-form 提交无效表单？这有可能吗？

Question

我有一个 form 和 2 个提交流程：草稿和详细。

提交草稿没有验证。

详细提交时，部分字段为必填项。其中之一是 "description".

无效的形式：

有效形式：

验证工作正常，"description" 字段如果为空则标记为 "invalid"：

<Field
  component="textarea"
  name="description"
  maxLength={2048}
  validate={[required()]}
  label={<FormattedMessage id={messageIds['entity.ticket.field.description']} />}
/>

但同时，当描述为空时，我无法将此表单作为"draft"提交。

缩短代码：

function TicketFormComponent(props: AllProps) {
  const handleDraftTicketSubmit = props.handleSubmit((values) => {
    props.onTicketCreate({
      ...values,
      status: 'Draft',
    });
  });

  const handleActiveTicketSubmit = props.handleSubmit((values) => {
    props.onTicketCreate({
      ...values,
      status: 'Open',
    });
  });

  return (
    <Form onSubmit={handleActiveTicketSubmit}>
      <Field
        component={TextInput}
        name="subject"
        maxLength={255}
        label={<FormattedMessage id={messageIds['entity.ticket.field.subject']} />}
      />

      <h3><FormattedMessage id={messageIds['entity.ticket.field.description']} /></h3>
      <Field
        component="textarea"
        name="description"
        maxLength={2048}
        validate={[required()]}
        label={<FormattedMessage id={messageIds['entity.ticket.field.description']} />}
      />

      <Button
        data-aqa="submitDraftTicket"
        disabled={props.submitting || !props.initialValues.selectedTopic}
        onClick={handleDraftTicketSubmit}
        className={props.classes.saveDraftButton}
      >
        <FormattedMessage id={messageIds['entity.ticket.field.saveAsDraft']} />
      </Button>

      <Button
        data-aqa="submitActiveTicket"
        disabled={props.submitting || props.invalid}
        onClick={handleActiveTicketSubmit}
        variant="contained"
        color="primary"
      >
        <FormattedMessage id={messageIds['entity.ticket.field.createNewTicket']} />
      </Button>
    </Form>
  );
}

预期结果：

通过 Redux 流程进一步提交表单值 "Draft" 状态

实际结果：

没有提交表单值，相反，我得到了 2 个 redux 操作：

{ type: '@@redux-form/TOUCH' }
{ type: '@@redux-form/SET_SUBMIT_FAILED', error: true }

Answer 1

我看到了两种可能的方法：

1。删除 `Field` 级别验证 (`validate={[required()]}`) 并使用 SyncValidation:

验证表单

const validate = values => {
  const errors = {}
  const {isDraft, ...rest} = values

  if(isDraft) {
      // draft validations
  } else {
      // other validations
  }
  return errors
}

export default reduxForm({
  form: 'myForm', // a unique identifier for this form
  validate, // <--- validation function given to redux-form
})(MyForm)

2。有条件地添加 `Field` 验证：

<Field
  name="description"
  validate={!isDraft && [required()]}
/>

但是在这里你应该改变你的提交流程。不是在 'Save draft' 或 'Create ticket' 按钮上提交表单，而是必须先设置状态 isDraft 变量，然后再提交表单。

否则，单击按钮提交表单时，将不会应用条件 Field 验证，因为 Form 已经提交。

，用例与您的非常相似。所以你也可以从中汲取灵感。

如何以 redux-form 提交无效表单？这有可能吗？

How to submit invalid form in redux-form? And is it even possible?

redux-form