How to use Yup validation schema with the Controller component.

[ameyzulkanthiwar]

• We have a 3rd party component that we want to use SecondaryInput
• Want to use Yup validation (don't know how to use yup with the rule props, in Controller component)
• Controlled component is inside the child component so I am using the useFormContext
• Schema code is not working

Parent component

  const schema = yup.object().shape({
    patientIdentity: yup.object().shape({
      firstName: yup.string().required('Required field'),
      lastName: yup.string().required('Required field'),
    }),
  });
  const methods = useForm();
  const {
    errors,
    handleSubmit,
    register,
    setValue,
    reset,
    getValues,
  } = useForm({
    defaultValues: {
      patientIdentity: {
        firstName: 'test 1',
        lastName: 'Test 2',
      },
    },
    validationSchema: schema,
  });

  const onSubmit = (data, e) => {
    console.log('onSubmit');
    console.log(data, e);
  };

  const onError = (errors, e) => {
    console.log('onError');
    console.log(errors, e);
  };
  console.log('errors', errors); // Not able to see any any error 
  console.log('getValues:> ', getValues()); Not able to see any any values
  return (
    <View style={[t.flex1]}>
      {/* Removed code from here */}
      <View style={[t.flex1, t.selfCenter]}>
       
        <FormProvider {...methods}>
          <View style={[t.flexCol]}>
            <PatientForm /> // <<Child component
            <PrimaryButton
              style={[t.pL3, t.h10]}
              onPress={handleSubmit(onSubmit, onError)}
            >
              Save changes
            </PrimaryButton>
          </View>
        </FormProvider>
      </Row>
    </View>

Child component

  const {
    control,
    register,
    getValues,
    setValue,
    errors,
    defaultValuesRef,
  } = useFormContext();

  console.log('errors:>>', errors); // NOt able to log
  console.log('Identity | getValues>', getValues());
  return (
    <DetailCard title="Identity">
      <Controller
        control={control}
        render={(props) => {
          const { onChange, onBlur, value } = props;
          return (
            <SecondaryInput
              label="Legal First Name"
              value={value}
              onTextChange={(value) => onChange(value)}
              onBlur={onBlur}
            />
          );
        }}
        name="patientIdentity.firstName"
        rule={register({
          required: ' name cannot be empty',
          })}
        defaultValue=""
      />
      <Controller
        control={control}
        as={({ onChange, onBlur, value }) => {
          return (
            <SecondaryInput
              label="Legal Last Name"
              value={value}
              onTextChange={(value) => onChange(value)}
              onBlur={onBlur}
            />
          );
        }}
        name="patientIdentity.lastName"
        rules={{
          required: 'this is required field',
          message: 'required field',
        }}
        defaultValue=""
      />
</DetailCard>
)

My code is something like this
NOTE: I can not use the ref inside the custom component as it does not take props like ref

[bluebill1049]

you have to choose between resolve or build-in validation. if you are using yup, then you probably have to stick with yup reolsver.

https://github.com/react-hook-form/resolvers

[ameyzulkanthiwar]

Thank you @bluebill1049

• A few more things, How I can access errors in the child components. In the above code in a child, I am trying to destructure the errors from useFormContext but couldn't able to log
• I am not able to get display default values as well as not able to access values in the parent component

Once again thank you for your help.

[bluebill1049]

• you should be able to read the errors from the context. can you reproduce the problem in a CSB?
• you can always have defaultValues variable and store that under the context.

[ameyzulkanthiwar]

Here is a link to the CSB https://codesandbox.io/s/rhf-controller-forked-tcc93?file=/src/index.js

Not able to populate the default values there.
And not able to get errors and values in the child component
Not able to access child component values in the parent component

Sorry for the trouble, Thank you for your time @bluebill1049

[bluebill1049]

Let's do one thing at a time:

Not able to populate the default values there.

which one?

[wfpaisa]

maybe this will help someone else:

const schema = yup.object().shape({
  email: yup.string().required("is requeried").email("missing email"),
  // age: yup.number().positive().integer().required(),
});

import { useFormContext } from "react-hook-form";

export default function FieldEmail() {
  const {
    register,
    formState: { errors },
  } = useFormContext();

  return (
    <>
      <input
        {...register("email", {
          validate: (email) => schema.validate({ email }).catch((e) => e.errors[0]),
        })}
      />
      <br />
      <span>{errors.email && errors.email.message}</span>
    </>
  );
}

[bluebill1049]

hey, you just need to remove that inline validation (validate), it's either using in-build validation or schema.

[wfpaisa]

@bluebill1049 Sorry, I try with useFormContext... resolver but I get an Error, please help me.

Codesanbox: https://codesandbox.io/s/vibrant-cdn-zyjze?file=/components/form/field-email.tsx

thank you for taking your time

[bluebill1049]

looks like you are missing a dep: https://github.com/react-hook-form/resolvers

[SalahAdDin]

looks like you are missing a dep: https://github.com/react-hook-form/resolvers

Well, it does not work even if we add the resolvers.

[Moshyfawn]

looks like you are missing a dep: https://github.com/react-hook-form/resolvers

Well, it does not work even if we add the resolvers.

Here's your issue, @SalahAdDin

const { control } = useFormContext({ resolver: yupResolver(schema) });

You don't put resolver into the useFormContext hook, but rather into the useForm. Please, refer to the RHF docs on resolvers to learn more

[BhalliBhai]

@bluebill1049
Can You assist me with How to use the register when using Controller, Because right now in the below code when I remove the register or add it in some way form submission is not working.
You can test it.
I will be very grateful if you can assist me soon. My question is why submit is not working when using Controller. If there's any other way to submit when using Controller then assist me.

Below is the code reference:

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

const schema = yup
  .object({
    firstName: yup.string().required(),
    age: yup.number().positive().integer().required(),
    years_of_experience: yup
      .number()
      .min(1)
      .integer()
      .required('Years of experience is required')
  })
  .required();

export default function Test() {
  const {
    // register,
    control,
    handleSubmit,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(schema),
    rules: { required: true }
  });
  const onSubmit = (data) => console.log(data);

  return (
    <div className="container-fluid p-4 mb-5">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="aboutme-section py-4 px-3 mb-2">
          <h3>Other Information</h3>
          <div className="row pt-2">
            <div className="col-lg-6 col-md-12 col-12">
              <div className="mb-3 aboutme-input">
                <label htmlFor="experience" className="form-label">
                  Total Experience (in years)
                </label>
                <Controller
                  name="years_of_experience"
                  control={control}
                  // defaultValue={yearsOfExperience}
                  // rules={{ required: true }}
                  render={({ field }) => (
                    <>
                      <input
                        {...field}
                        className="form-control"
                        placeholder="5 Years"
                      />
                      <p className="text-danger small">
                        {errors.years_of_experience?.message}
                      </p>
                    </>
                  )}
                />
              </div>
              <Controller
                name="firstName"
                control={control}
                render={({ field }) => (
                  <>
                    <input {...field} />
                    <p>{errors.firstName?.message}</p>
                  </>
                )}
              />
            </div>
            {/* <input {...register('firstName')} />
            <p>{errors.firstName?.message}</p>

            <input {...register('age')} />
            <p>{errors.age?.message}</p> */}

            <input type="submit" />
          </div>
        </div>
      </form>
    </div>
  );
}

[Moshyfawn]

I just ran your code example in this codesandbox and got the age field validation error: you're missing the age field.

[Moshyfawn]

A few additional notes:

• You should provide defaults for your input fields, otherwise you'll end up mixing controlled and uncontrolled input in React

 useForm({
+  defaultValues: {
+    firstName: "",
+    age: 0,
+    years_of_experience: 0
+  }
 })

• There's no rules property on the useForm hook

 useForm({
   resolver: yupResolver(schema),
-  rules: { required: true }
 })

[BhalliBhai]

• Yeah, I know about the default values, That was the main reason why I am using controlled.

Thanks for you assisting me with the rules in the useform.

[BhalliBhai]

@bluebill1049 @Moshyfawn
But I found out the issue I was facing.
Actually while using yup resolver. and you create a schema like

const schema = yup
  .object({
    firstName: yup.string().required(),
    lastName: yup.string().required(),
    age: yup.number().positive().integer().required(),

  })
  .required();

with controlled inputs.
Then if you miss or don't use any single from the firstName, lastName, or age means don't create input for that or may forget to use any one of the schema values after filling the form it will never submit or it will never trigger the submit function. So I think there should be some sort of error in the console, like lastName is not being used remove it or something like that...
Because it can be a problem when there are a lot of input fields In my case there were 40+ controlled input fields.
I can create an issue if interested in doing this.

But I appreciate your hard work guys, Thankful to all collaborators for creating React Hook Form it's amazing.

Thanks @Moshyfawn for your assistance bro. ❤

[Moshyfawn]

I don't think it's possible without creating an ESLint plugin that specifically checks your component code for whether the fields exist, as your form can be dynamically generated and rendered in chunks, mounting different components at different times.

[BhalliBhai]

@bluebill1049
OR
Can I structure the data I want to send to the API using this approach

import { Form } from "react-hook-form"

function App() {
  const { register, control } = useForm()

  return (
    <Form
      action="/api/save" // Send post request with the FormData
      // encType={'application/json'} you can also switch to json object
      onSuccess={() => {
        alert("Your application is updated.")
      }}
      onError={() => {
        alert("Submission has failed.")
      }}
      control={control}
    >
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button>Submit</button>
    </Form>
  )
}

This is how I needs to structure it before send data

const updatedResumeData = {
  //       first_name: firstName === '' ? undefined : firstName,
  //       last_name: lastName === '' ? undefined : lastName,
  //       gender: gender === '' ? undefined : gender,
  //       email: email === '' ? undefined : email,
  //       phone: phone === '' ? undefined : phone,
  //       country_code: countryCode === '' ? undefined : countryCode,
  //       portfolio_url: portfolioUrl === '' ? undefined : portfolioUrl,
  //       linkedin_url: linkedinUrl === '' ? undefined : linkedinUrl,
  //       github_url: githubUrl === '' ? undefined : githubUrl,
  //       behance_url: behanceUrl === '' ? undefined : behanceUrl,
  //       dribbble_url: dribbleUrl === '' ? undefined : dribbleUrl,
  //       address: {
  //         street: addressStreet === '' ? undefined : addressStreet,
  //         city: city === '' ? undefined : city,
  //         state: state === '' ? undefined : state,
  //         postal_code: postalCode === '' ? undefined : postalCode,
  //         country: country === '' ? undefined : country
  //       },
  //       work: jobExperiences.length === 0 ? undefined : jobExperiences,
  //       education: educations.length === 0 ? undefined : educations,
  //       skills: sanitizedSkills.length === 0 ? undefined : sanitizedSkills,
  //       languages: languages.length === 0 ? undefined : languages,
  //       achievements: achievements.length === 0 ? undefined : achievements,
  //       certifications: certifications.length === 0 ? undefined : certifications,
  //       cover_letter: coverletter === '' ? undefined : coverletter
  //     };

  //     axios
  //       .post(`${UpdateResumeAPI}/${resumeData._id}`, updatedResumeData, {
  //         headers: {
  //           Authorization: `Bearer ${bearerToken}`
  //         }
  //       })
  //       .then((response) => {
  //         console.log('Resume updated successfully:', response.data);
  //         toast.success(response.data.msg, toastConfig);
  //         navigate('/update-resume');
  //       })
  //       .catch((error) => {
  //         console.error('Error updating resume data:', error);