javascript - 尝试不对禁用字段进行验证

Question

我正在使用反应最终表单验证来验证表单。有一个要求，我需要禁用基于另一个字段（复选框）的某些字段的验证，但是在提交表单时我没有这样做。显示验证错误。下面是我进行表单验证的代码

 render={({ handleSubmit, form, submitting, pristine, values }) => {
   const formFields = fieldDefs.map(
      ({
        name,
        title,
        drawer: {
          component: Component,
          validate,
          isFieldWrapperComponent,
          fieldInstructionNote,
          options,
          renderOption,
          checkIsDisabled,
          checkIsHidden,
          ...props
        }
      }) => {
        const { isDisabled, updateValues } = checkIsDisabled?.(values) ?? {};
        if (updateValues?.length) {
          updateValues.forEach((params) => form.mutators.setValueMutator(...params));
        }

        return (
          <Row key={name} gutter={8} style={{ paddingBottom: '8px' }}>
            {(
              <>
                <Col span={6}>
                  <Text strong>{title}</Text>{' '}
                  {validate && <span style={{ color: 'red' }}>*</span>}                     
                </Col>
                <Col span={2} />
                <Col span={16}>
                  <Field
                    name={`draftLibraryData.${name}`}
                    component={Component}
                    validate={isValidate(isDisabled, validate)}
                    options={options}
                    render={renderOption}
                    disabled={isDisabled}
                    {...props}
                  />
                </Col>
              </>
            )}
          </Row>
        );
      }
    );          
return (
      <Drawer
        title={state.drawerTitle}
        placement="right"
        closable={submitting || pristine}           
        maskClosable={submitting || pristine}
        visible={state.isDrawerVisible}
        width={897}
      >
        <form onSubmit={handleSubmit}>
          <p>
            <span style={{ color: 'red' }}> * Indicates a required field </span>
          </p>              
          {formFields}
          <SectionActionBar
            handleDiscard={() => resetValidationState(form, values, fieldDefs)}
            isModified={!(submitting || pristine) || isTempDataModified(values)}
            isFloatingAlert={false}
            form={form}
          />
          <FormState height="300px" overflowY="auto" border="1px solid black" />
        </form>
      </Drawer>
    );
 )}

然后这是函数isValidate.

export const isValidate = (isDisabled, validate) => {
  return isDisabled ? undefined : validate;
};

当我提交表格时，我遇到了问题；验证正在触发具有isDisabledtrue 的字段。谁能指出我正确的方向？

标签： javascriptreactjsvalidationreact-final-form