Проверка триггера React-final-form в некоторых полях формы

Question

Я хочу проверить определенные поля для какого-либо действия.

У меня есть форма с несколькими полями и внутри формы, есть раздел, содержащий 4 поля и отдельная кнопка, такая как Test connection.Итак, после нажатия этой кнопки я хочу отправить вызов API, но до этого я хочу показать ошибки проверки в этих конкретных полях.Я не мог найти способ сделать это.Если вы, ребята, знаете, дайте мне знать.Заранее спасибо.

<Form
        onSubmit={handleSubmit}
        initialValues={initData}
        render={({
          handleSubmit,
          form,
          submitting,
          pristine,
          values,
        }) => {
          return (
            <form onSubmit={handleSubmit}>
              <div className="form-body">
                <h2>New Data Source</h2>
                <FormGroup>
                  <Label for="name" sm={3}>
                    Name
                  </Label>
                  <Col sm={6}>
                    <Field
                      name="name"
                      placeholder="Name"
                      innerRef={dataSourceNameRef}
                      aria-label="name"
                      component={FormInput}
                      validate={composeValidators(isRequired)}
                    />
                  </Col>
                </FormGroup>
        
                <div className="grey">
                  <Row>
                    <Col xs={12} sm={6} md={4}>
                      <FormGroup>
                        <Label for="name">Hostname</Label>
                        <Field
                          name="hostname"
                          placeholder="Hostname"
                          aria-label="hostname"
                          component={FormInput}
                          validate={composeValidators(isRequired)}
                        />
                      </FormGroup>
                    </Col>
                    <Col xs={12} sm={5} md={2}>
                      <FormGroup>
                        <Label for="port">Port</Label>
                        <Field
                          name="port"
                          placeholder="Port"
                          aria-label="port"
                          component={FormInput}
                          validate={isRequired}
                        />
                      </FormGroup>
                    </Col>
                  </Row>
                  <Row>
                    <Col xs={12} sm={6} md={4}>
                      <FormGroup>
                        <Label for="name">Username</Label>
                        <Field
                          name="username"
                          placeholder="Username"
                          aria-label="name"
                          component={FormInput}
                          validate={isRequired}
                        />
                      </FormGroup>
                    </Col>
                  </Row>
                  <Row>
                    <Col xs={12} sm={6} md={4}>
                      <FormGroup>
                        <Label for="name">Password</Label>
                        <Field
                          name="password"
                          placeholder="Password"
                          aria-label="password"
                          type={values.showPassword ? 'text' : 'password'}
                          component={FormInput}
                          validate={composeValidators(isRequired)}
                        />
                      </FormGroup>
                    </Col>
                    <Col xs={12} sm={6} md={4} className="checkbox-field">
                      <Field
                        name="showPassword"
                        aria-label="show password"
                        component={FormInput}
                        type="checkbox"
                        label="Show Password"
                      />
                      <Label for="name"> Show Password</Label>
                    </Col>
                  </Row>
                  <Field
                    name="testConnection"
                    validateFields={['username', 'hostname', 'password']}
                    component={() => (
                      <Button
                        color="secondary"
                        onClick={() => testConnection(values)}
                      >
                        Test Connection
                      </Button>
                    )}
                  />
                </div>
              </div>
              <div className="form-footer justify-right">
                <Button
                  type="submit"
                  disabled={submitting || pristine}
                  color="primary"
                >
                  Create
                </Button>
              </div>
            </form>
          );
        }}
      />

Answer 1

По сути, вам просто нужно запустить проверку и выполнить вызов API, только если проверки пройдены. Ниже приведен пример, но было бы здорово, если бы вы могли поделиться своим кодом, чтобы помочь другим понять, где вы находитесь.

const handleCick = () => {
  if (invalid) {
    setInvalidPopup(true);
    return;
  }

  //fetch...
};