How to use @hookform/resolvers - 6 common examples

} else {
    rows = data.map(row => {
      const id = row?.input?.key || _.camelCase(row.name);
      return { ...row, id };
    });
  }

  const validationShape = {};
  rows.forEach(row => {
    if (row?.input?.validation) {
      validationShape[row.name] = row.input.validation;
    }
  });
  const validation = useForm({
    mode: "onChange",
    resolver: yupResolver(object().shape(validationShape)),
  });
  const { control, handleSubmit } = validation;

  React.useEffect(() => {
    setOnSubmit(handleSubmit);
  }, []);

  return (
    
      {process.env.REACT_APP_DEBUG_FORMS && onUpdate !== undefined && }
      
          {rows.map((row: IdentifiableRowData) => {
            return row.input !== undefined && onUpdate ? (
              <table>
        </table>

},
  ] as FormItem[];

  const schema: { [name: string]: yup.StringSchema | yup.NumberSchema } = {};
  const visibleFields = fields.filter(field => field.visible !== false);
  visibleFields
    .filter(field => field.validation !== undefined)
    .reduce((accumulator, field) => {
      accumulator[field.name] = field.validation;
      return accumulator;
    }, schema);

  const { register, errors, handleSubmit } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    resolver: yupResolver(yup.object().shape(schema)),
  });

  return (
    <form>
      
      
        <button>
        </button><button type="submit">
      
    
  );</button></form>

},
  ] as FormItem[];

  const schema: { [name: string]: yup.StringSchema | yup.NumberSchema } = {};
  const visibleFields = fields.filter(field => field.visible !== false);
  visibleFields
    .filter(field => field.validation !== undefined)
    .reduce((accumulator, field) => {
      accumulator[field.name] = field.validation;
      return accumulator;
    }, schema);

  const { register, errors, handleSubmit } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    resolver: yupResolver(yup.object().shape(schema)),
  });

  return (
    <form>
      
      
        <button>
        </button><button type="submit">
      
    
  );</button></form>

const RepositoryDetails: React.FC = () => {
  const { register, errors, handleSubmit } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    resolver: yupResolver(schema),
  });
  const { onSubmit } = useWizardContext();
  const repositoryData = useDataLayout("repositoryData");
  const repositoryOptions = repositoryData.displayValue()
    .data as IClutch.sourcecontrol.v1.GetRepositoryOptionsResponse;

  return (
    
      <form>
        <select name="owner" label="Owner"> repositoryData.updateData("owner", value)}
          options={repositoryOptions?.availableOwners?.map(owner =&gt; {
            return { label: owner.name, startAdornment:  };
          })}</select></form>

const EditForm = ({
  submission, onSubmit, onClose, onDelete,
}) => {
  const {
    register, errors, handleSubmit, formState,
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      repo_url: submission.repo_url,
      live_preview_url: submission.live_preview_url,
      is_public: submission.is_public,
    },
  });

  const handleDelete = () => {
    onDelete(submission.id);
    onClose();
  };

  if (formState.isSubmitSuccessful) {
    return (
      <div>
        <h1>Thanks for Updating Your Solution!</h1></div>

const CreateForm = ({ onClose, onSubmit, userId }) => {
  const { lesson } = useContext(ProjectSubmissionContext);
  const {
    register, handleSubmit, formState, errors,
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      is_public: true,
    },
  });

  if (userId === null) {
    return (
      <div>
        <h1>Please Sign in</h1>
        <p data-test-id="sign-in-instructions">
          Please
          {' '}
          <a href="/login">sign in</a>
          {' '}
          to add a project submission.
        </p></div>