react-hook-form inside code

const _formControl = React.useRef<
  UseFormReturn<TFieldValues, TContext, TTransformedValues> | undefined
>();
 
const [formState, updateFormState] = React.useState<FormState<TFieldValues>>({
  isDirty: false,
  isValidating: false,
  isLoading: isFunction(props.defaultValues),
  isSubmitted: false,
  isSubmitting: false,
  isSubmitSuccessful: false,
  isValid: false,
  submitCount: 0,
  dirtyFields: {},
  touchedFields: {},
  errors: {},
  defaultValues: isFunction(props.defaultValues)
    ? undefined
    : props.defaultValues,
});
 
if (!_formControl.current) {
  _formControl.current = {
    ...createFormControl(props, () =>
      updateFormState(formState => ({ ...formState })),
    ),
    formState,
  };
}
 
const control = _formControl.current.control;
control._options = props;
 
export function useSubscribe<T>(props: Props<T>) {
  const _props = React.useRef(props);
  _props.current = props;
 
  React.useEffect(() => {
    const subscription =
      !props.disabled &&
      _props.current.subject &&
      // 최초 구독 처리하고 2번째 인자로 넘어온 함수를 실행한다.
      _props.current.subject.subscribe({
        next: _props.current.next,
      });
 
    return () => {
      subscription && subscription.unsubscribe();
    };
  }, [props.disabled]);
}
 
useSubscribe({
  // form 전체에 대한 상태값 관리하는 객체
  subject: control._subjects.state,
  //
  next: (
    value: Partial<FormState<TFieldValues>> & { name?: InternalFieldName },
  ) => {
    // 객체 생성 함수 로직에서 value 넘어온 value값을 구독한 지점에 업데이트(watch, register)
    if (
      // 생성한 폼 객체의 상태값을 변경하기 위한 함수
      shouldRenderFormState(
        value,
        control._proxyFormState,
        control._updateFormState,
        true,
      )
    ) {
      // 폼 객체의 상태값을 변경 이후에 useState 상태를 세팅함으로써 렌더링 되게 처리
      updateFormState({ ...control._formState });
    }
  },
});
 
React.useEffect(() => {
  // 서버에서 받아온 values 값을 업데이트 할 경우
  if (props.values && !deepEqual(props.values, _values.current)) {
    control._reset(props.values, control._options.resetOptions);
    _values.current = props.values;
  } else {
    // 기본값일 경우에는 디폴트 밸류 함수로 세팅한다.
    control._resetDefaultValues();
  }
}, [props.values, control]);
 
React.useEffect(() => {
  if (!control._state.mount) {
    // 최초 1회 form 객체 생성(createFormControl)
    control._updateValid(); // 유효성 체크
    control._state.mount = true; // form 생명주기 상태값으로 mount 처리
  }
 
  if (control._state.watch) {
    // watch 모드가 세팅 될 경우
    control._state.watch = false; // watch  모드 끄고
    control._subjects.state.next({ ...control._formState }); // useSubscribed 훅의 next를 실행
  }
 
  // element name 값으로 엘리먼트의 상태값을 관리 중 unMount가 있는경우 제거한다.(option.shouldUnregister 세팅된 경우)
  control._removeUnmounted();
});
 
// useState를 통해서 변경된 데이터를 내부 폼 전체 객체 상태값을 업데이트(상태값을 ref에 저장)
_formControl.current.formState = getProxyFormState(formState, control);
 
// 컴포넌틀는 리랜더링 하더라도 useRef의 최신 상태값을 얻어오도록 ref에 current값을 리턴한다.
return _formControl.current;

const defaultOptions = {
  mode: VALIDATION_MODE.onSubmit,
  reValidateMode: VALIDATION_MODE.onChange,
  shouldFocusError: true,
} as const;
 
export function createFormControl<
  TFieldValues extends FieldValues = FieldValues,
  TContext = any,
>(
  props: UseFormProps<TFieldValues, TContext> = {},
  flushRootRender: () => void,
): Omit<UseFormReturn<TFieldValues, TContext>, 'formState'> {}
 
// 기본 값을 세팅
let _defaultValues =
  isObject(_options.defaultValues) || isObject(_options.values)
    ? cloneObject(_options.defaultValues || _options.values) || {}
    : {};
 
// formValues 값을 세팅
let _formValues = _options.shouldUnregister // unmount 될 경우 입력데이터 손실처리
  ? {}
  : cloneObject(_defaultValues);
 
// form 생명주기 상태값을 관리
let _state = {
  action: false,
  mount: false,
  watch: false,
};
 
// element name 값으로 엘리먼트의 상태값을 관리
let _names: Names = {
  mount: new Set(), // register, unregister 실행 시 name 값을 map으로 관리
  unMount: new Set(),
  array: new Set(),
  watch: new Set(),
};
 
// form 전체에 대한 상태값 관리
const _proxyFormState = {
  isDirty: false,
  dirtyFields: false,
  touchedFields: false,
  isValidating: false,
  isValid: false,
  errors: false,
};
 
// 옵저버 패턴 객체 생성
const _subjects: Subjects<TFieldValues> = {
  values: createSubject(),
  array: createSubject(),
  state: createSubject(),
};
 
// 사용자의 인터렉션에 대해서만 dirty 세팅(DirtyFields and isDirty)
const shouldCaptureDirtyFields =
  props.resetOptions && props.resetOptions.keepDirtyValues;
 
// 제출 이전, 이후에 유효성 체크 로직 분리
const validationModeBeforeSubmit = getValidationModes(_options.mode);
const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);

const register: UseFormRegister<TFieldValues> = (name, options = {}) => {
  // <input type="radio" {...register('radio')} value="1" />
  // element name값을 fields로 관리
  let field = get(_fields, name);
  const disabledIsDefined = isBoolean(options.disabled);
 
  // register 실행 후에 _fileds에서 name, mount: true, options값을 세팅
  set(_fields, name, {
    ...(field || {}),
    _f: {
      ...(field && field._f ? field._f : { ref: { name } }),
      name,
      mount: true,
      ...options,
    },
  });
 
  // 마운트된 name값을 관리
  _names.mount.add(name);
 
  // 이미 element name이 있는경우
  //   <input type="radio" {...register('radio')} value="1" />
  //   <input type="radio" {...register('radio')} value="2" />
  //   <input type="radio" {...register('radio')} value="3" />
  if (field) {
    _updateDisabledField({
      field,
      disabled: options.disabled,
      name,
    });
  } else {
    updateValidAndValue(name, true, options.value);
  }
};

// resolver: 선호하는 스키마 라이브러리의 유효성 검증 로직 통합을 위해서 사용
// context: 스키마 라이브러리에서 사용하기 위한 전역 객체
// getResolverOptions: resolver options 값을 주입해주기 위한 함수
 
// builtin schema 사용
<form onSubmit={handleSubmit(onSubmit)}>
  <input
    {...register('firstName', { required: true })}
    placeholder="firstName"
  />
  {errors.firstName && <p>firstName error</p>}
</form>;
 
// resolver schema 사용(yup 사용 예)
const validationSchema = yup
  .object()
  .shape(
    {
      firstName: yup
        .string()
        .required()
        .when('$type', (type, schema) => {
          console.log(type);
          if (type === 'one') {
            return schema.required();
          }
          return;
        }),
    },
    [['exclusivelyRequiredOne', 'exclusivelyRequiredTwo']],
  )
  .required();
 
let dynamicValue = condition ? 'one' : 'two';
const {
  control,
  register,
  handleSubmit,
  formState: { errors },
} = useForm<{
  firstName: string;
}>({
  // resolver: 선호하는 스키마 라이브러리의 유효성 검증 로직 통합을 위해서 사용
  resolver: yupResolver(validationSchema),
  mode: mode as keyof ValidationMode,
  context: { type: 'one' },
});
 
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register('firstName')} placeholder="firstName" />
  {errors.firstName && <p>firstName error</p>}
</form>;

import { Resolver, FieldError } from 'react-hook-form';
import get from 'lodash/get';
 
export interface FormData {
  name: string;
  city: string;
  street: string;
}
 
function validateLength(
  name: string,
  value: any,
  errors: Record<string, FieldError>,
) {
  if (!value || value.length < 6) {
    return {
      ...errors,
      [name]: {
        type: `min-length-${minLength}`,
        message: `The field "${name}" must be at least ${minLength} chars`,
      },
    };
  }
 
  return errors;
}
 
export const customResolver: Resolver<FormData> = (
  values,
  _context,
  { names },
) => {
  let errors = {};
  if (names) {
    // Validate only changed fields
    errors = names.reduce((acc, name) => {
      const value = get(values, name);
 
      return validateLength(name, value, acc);
    }, {});
  } else {
    // Validate all fields on submit event
    errors = Object.entries(values).reduce(
      (acc, [name, value]) => validateLength(name, value, acc),
      {},
    );
  }
 
  return { values, errors };
};
 
const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<FormData>({
  mode: 'onChange',
  resolver: customResolver,
});

const validationSchema = yup
  .object()
  .shape(
    {
      firstName: yup
        .string()
        .required()
        .when('$type', (type, schema) => {
          console.log(type);
          if (type === 'one') {
            return schema.required();
          }
          return;
        }),
    },
    [['exclusivelyRequiredOne', 'exclusivelyRequiredTwo']],
  )
  .required();
 
const {
  control,
  register,
  handleSubmit,
  formState: { errors },
} = useForm<{
  firstName: string;
}>({
  resolver: yupResolver(validationSchema),
  mode: mode as keyof ValidationMode,
  context: { type: 'one' },
});
 
// react-hook-form/resolvers/blob/master/yup/src/yup.ts
// useForm에 yupResolver 함수 호출 후 기본 인자값을 세팅
// schema: 사용자가 선언한 외부 통합을 위한 라이브러리 schema
// schemaOptions: 외부 라이브러리 초기 옵션
// resolverOptions: 동기/비동기 모드
export const yupResolver: Resolver =
  (schema, schemaOptions = {}, resolverOptions = {}) =>
  async (values, context, options) => {
    try {
      if (schemaOptions.context && process.env.NODE_ENV === 'development') {
        // eslint-disable-next-line no-console
        console.warn(
          "You should not used the yup options context. Please, use the 'useForm' context object instead",
        );
      }
 
      const result = await schema[
        resolverOptions.mode === 'sync' ? 'validateSync' : 'validate'
      ](
        values,
        Object.assign({ abortEarly: false }, schemaOptions, { context }),
      );
 
      // 브라우저 기본 유효성 검사를 사용할지 여부를 설정이 있는경우 네이티브 유효성도 같이 검증
      options.shouldUseNativeValidation && validateFieldsNatively({}, options);
 
      return {
        values: result,
        errors: {},
      };
    } catch (e: any) {
      if (!e.inner) {
        throw e;
      }
 
      return {
        values: {},
        errors: toNestError(
          parseErrorSchema(
            e,
            !options.shouldUseNativeValidation &&
              options.criteriaMode === 'all',
          ),
          options,
        ),
      };
    }
  };