react hook, validate Form with reduxForm

Viewed 1236

I Have external component managing my input Field and throws an error if no input is made. On submit of form previously with class component along with reduxForm effect, this would throw an error of missing input, am wondering how to achieve this with hooks since submission passes whether i have input or Not.

import ConstructField from '../components.render';

const ActivitiesForm = () => {

  const handleSubmit_ = () => {
    console.log({ activityName });
  };

  const [activityName, setActivityName] = useState(null);
  const handleInputName = (e) => setActivityName(e.target.value);

  const { items } = useSelector((state) => ({
    items: state.items,
  }));

  const { register, handleSubmit, errors, control } = useForm();

  return (
    <div>

      <Form onSubmit={handleSubmit(handleSubmit_)} className='ui form'>
        <Form.Group widths='equal'>
          <Field
            component={ConstructField('input')}
            onChange={handleInputName}
            label='Activity Name'
            name='activityName'
            placeholder='Activity Name'
            validate={required}
          />

        </Form.Group>



        <br />

        <Form.Group inline>
          <Button.Group>
            <Button primary>Save</Button>
            <Button.Or />
            <Button positive onClick={goBackButton}>
              Go Back
            </Button>
          </Button.Group>
        </Form.Group>
      </Form>
    </div>
  );
};

const required = (value) => (value ? undefined : 'this field is required');

const activityform = reduxForm({
  form: 'activityform',
  enableReinitialize: true,
})(ActivitiesForm);

export default activityform;
0 Answers
Related