Issues using react-hook-form with reactstrap

[walshe]

Having issues with using react-hook-form with reactstrap. Errors are not triggered or submit is not called. I tried all sorts of other crap with innerref and controllers but they result is exceptions

"@hookform/resolvers": "^2.8.3",
"react-hook-form": "^7.20.2",
"reactstrap": "8.4.1",
"yup": "^0.32.11"

Has anyone idea what is wrong ?

import React, { useCallback, useState, useEffect } from 'react';

import { connect } from 'react-redux';

import {
  Row,
  Col,
  CardBody,
  Card,
  CardTitle,
  FormText,
  Form,
  CustomInput,
  Label,
  FormGroup,
  Input,
  Button,
  InputGroupText,
  InputGroupAddon,
  FormFeedback
} from 'reactstrap';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import InputMask from 'react-input-mask';

import { useForm, Controller } from 'react-hook-form';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';


const schema = yup.object().shape({
  businessName: yup
    .string()
    .min(3)
    .max(32)
    .required('Business name is required'),
  phone: yup.string().min(6).max(32).required(),
  zip: yup.string().min(4).max(16).required(),
  sic: yup.string().min(4).max(16).required()
});

const BusinessOnboard2 = (props) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset, control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmitHandler = (data) => {
    console.log('in submit handler');
    console.log({ data });
    reset();
  };

  return (
    <>
      <div className="app-wrapper bg-white min-vh-100">
        <div className="app-main min-vh-100">
          <div className="app-content p-0">
            <div className="app-content--inner d-flex align-items-center">
              <div className="flex-grow-1 w-100 d-flex align-items-center">
                <div className="bg-composed-wrapper--content py-5">
                  <Col md="10" lg="8" xl="4" className="mx-auto">
                    <div className="text-center">
                      <h1 className="display-4 mb-1 font-weight-bold">
                        TokenPass
                      </h1>
                      <p className="font-size-lg mb-0 text-black-50">
                        Before we proceed, we need some basic details about your
                        business
                      </p>
                      <br />
                      <br />
                    </div>

                    <div>
                      <Form onSubmit={handleSubmit(onSubmitHandler)}>
                        <FormGroup>
                          <Label>Business Name</Label>
                          <Input
                            {...register('businessName')}
                            placeholder="Business name"
                          />

                          <FormFeedback>
                            {errors.businessName?.message}
                          </FormFeedback>
                        </FormGroup>
                        <FormGroup>
                          <Label>Phone</Label>
                          <Input {...register('phone')} placeholder="Phone" />
                          {/* <FormFeedback>
                            {errors.phone?.message}
                          </FormFeedback> */}
                        </FormGroup>
                        <FormGroup>
                          <Label>SIC</Label>
                          <Input {...register('sic')} placeholder="SIC" />
                          {/* <FormFeedback>
                            {errors.sic?.message}
                          </FormFeedback> */}
                        </FormGroup>
                        <FormGroup>
                          <Label>Zip</Label>
                          <Input {...register('zip')} placeholder="Zip" />
                          {/* <FormFeedback>
                            {errors.zip?.message}
                          </FormFeedback> */}
                        </FormGroup>
                        
                        <div className="text-center py-4">
                          <Button
                            type="submit"
                            disabled={false}
                            className="btn-block text-uppercase font-weight-bold font-size-sm mt-4"
                            color="primary">
                            Submit
                          </Button>
                        </div>
                      </Form>
                    </div>
                  </Col>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(BusinessOnboard2);

[walshe]

so seems it was the that was not diaplaying (Why ?). Now if I use a

for the feedback I can see that the validation works. But now it seems I can never get passed validation and form never submits wtf?

import React, { useCallback, useState, useEffect } from 'react';

import { connect } from 'react-redux';

import {
  Row,
  Col,
  CardBody,
  Card,
  CardTitle,
  FormText,
  Form,
  CustomInput,
  Label,
  FormGroup,
  Input,
  Button,
  InputGroupText,
  InputGroupAddon,
  FormFeedback
} from 'reactstrap';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import InputMask from 'react-input-mask';

import { useForm, Controller } from 'react-hook-form';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';


const schema = yup.object().shape({
  name: yup
    .string()
    .min(3)
    .max(32)
    .required('Business name is requiredxx'),
  // phone: yup.string().min(6).max(32).required(),
  // zip: yup.string().min(4).max(16).required(),
  // sic: yup.string().min(4).max(16).required()
});

const BusinessOnboard2 = (props) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset, control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmitHandler = (data) => {
    console.log('in submit handler');
    console.log({ data });
    reset();
  };

  return (
    <>
      <div className="app-wrapper bg-white min-vh-100">
        <div className="app-main min-vh-100">
          <div className="app-content p-0">
            <div className="app-content--inner d-flex align-items-center">
              <div className="flex-grow-1 w-100 d-flex align-items-center">
                <div className="bg-composed-wrapper--content py-5">
                  <Col md="10" lg="8" xl="4" className="mx-auto">
                    <div className="text-center">
                      <h1 className="display-4 mb-1 font-weight-bold">
                        TokenPass
                      </h1>
                      <p className="font-size-lg mb-0 text-black-50">
                        Before we proceed, we need some basic details about your
                        business
                      </p>
                      <br />
                      <br />
                    </div>

                    <div>
                      <Form onSubmit={handleSubmit(onSubmitHandler)}>
                        <FormGroup>
                        
                          <Label>Business Name</Label>
                          <Input
                            {...register('name')}
                            placeholder="Business name"
                          />

                          {/* <FormFeedback invalid>
                            {errors.businessName?.message}
                          </FormFeedback> */}
                          <p>
                            {errors.name?.message}
                          </p>
                          
                        
                        </FormGroup>
                        {/* <FormGroup>
                          <Label>Phone</Label>
                          <Input {...register('phone')} placeholder="Phone" />
                          <FormFeedback>
                            {errors.phone?.message}
                          </FormFeedback>
                        </FormGroup>
                        <FormGroup>
                          <Label>SIC</Label>
                          <Input {...register('sic')} placeholder="SIC" />
                          <FormFeedback>
                            {errors.sic?.message}
                          </FormFeedback>
                        </FormGroup>
                        <FormGroup>
                          <Label>Zip</Label>
                          <Input {...register('zip')} placeholder="Zip" />
                          <FormFeedback>
                            {errors.zip?.message}
                          </FormFeedback>
                        </FormGroup> */}
                        
                        <div className="text-center py-4">
                          <Button
                            type="submit"
                            disabled={false}
                            className="btn-block text-uppercase font-weight-bold font-size-sm mt-4"
                            color="primary">
                            Submit
                          </Button>
                        </div>
                      </Form>
                    </div>
                  </Col>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(BusinessOnboard2);

[manentai]

any news on this one? did you manage to pass validation?

[riyazshaikh0712]

Answer for this is make your own customInput and also pass the ref proprety like this for example
import { forwardRef, Ref } from "react";
import { Input } from "reactstrap";

const CustomInput = forwardRef(
(
{ onChange, onClick, disabled, ...props }: any,
ref: Ref
) => {
console.log("ref", ref, props);

return (
  <Input
    className="custom-input"
    innerRef={ref}
    onChange={onChange}
    onClick={onClick}
    autoComplete="new-password"
    disabled={disabled}
    {...props}
  />
);

}
);

export default CustomInput;
and now use it it will give you proper message and everything will work