feat(useForm): support built-in validation

.changeset/silly-bobcats-remember.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+feat(useForm): support built-in validation

examples/src/BasicForm/Controller.tsx

@@ -16,6 +16,7 @@ interface Props {
  defaultValue: any;
  controller: ControllerType<FormValues, ChangeEvent<HTMLInputElement>>;
  validate?: FieldValidator<FormValues>;
+ [k: string]: any;
 }
 
 const Controller = ({
@@ -25,6 +26,7 @@ const Controller = ({
  defaultValue,
  controller,
  validate,
+ ...rest
 }: Props) => {
  // console.log(`LOG ==> ${name} is re-rendered`);
 
@@ -48,6 +50,7 @@ const Controller = ({
  // console.log("LOG ===> onBlur: ", e);
  },
  })}
+ {...rest}
  />
  );
 };

examples/src/BasicForm/index.tsx

@@ -29,8 +29,8 @@ export interface FormValues {
 }
 
 const initialValues = {
- text: { nest: "test" },
- controller: "test",
+ text: { nest: "" },
+ controller: "",
  hiddenText: "test",
  password: "test",
  number: 5,
@@ -203,11 +203,12 @@ export default (): JSX.Element => {
  <Input
  label="Text:"
  name="text.nest"
- ref={validate(async (value) => {
+ /* ref={validate(async (value) => {
  // eslint-disable-next-line
  // await new Promise((resolve) => setTimeout(resolve, 1000));
  return value.length <= 5 ? "Field error" : "";
- })}
+ })} */
+ // required
  // data-rcf-ignore
  />
  <Controller
@@ -221,15 +222,16 @@ export default (): JSX.Element => {
  // console.log("LOG ===> validate: ", val, values);
  return val.length <= 5 ? "Field error" : "";
  }, [])} */
+ maxLength="3"
  />
  {showInput && (
  <div>
  <Input
  label="Hidden Text:"
  name="hiddenText"
- ref={validate(async (value) => {
+ /* ref={validate(async (value) => {
  return value.length <= 5 ? "Field error" : "";
- })}
+ })} */
  />
  </div>
  )}

src/useForm.ts

@@ -223,6 +223,23 @@ const useForm = <V extends FormValues = FormValues>({
  [setErrors, setStateRef, stateRef]
  );
 
+ const runBuiltInValidation = useCallback(
+ (name: string) =>
+ fieldsRef.current[name] &&
+ fieldsRef.current[name].field.validationMessage,
+ []
+ );
+
+ const runAllBuiltInsValidation = useCallback(
+ () =>
+ Object.keys(fieldsRef.current).reduce((errors, name) => {
+ const error = runBuiltInValidation(name);
+ errors = { ...errors, ...(error ? set({}, name, error) : {}) };
+ return errors;
+ }, {}),
+ [runBuiltInValidation]
+ );
+
  const runFieldValidation = useCallback(
  async (name: string): Promise<any> => {
  if (!fieldValidatorsRef.current[name]) return undefined;
@@ -246,10 +263,9 @@ const useForm = <V extends FormValues = FormValues>({
  const promises = Object.keys(fieldValidatorsRef.current).map((name) =>
  runFieldValidation(name)
  );
- const names = Object.keys(fieldValidatorsRef.current);
 
  return Promise.all(promises).then((errors) =>
- names.reduce((acc, cur, idx) => {
+ Object.keys(fieldValidatorsRef.current).reduce((acc, cur, idx) => {
  acc = { ...acc, ...(errors[idx] ? set({}, cur, errors[idx]) : {}) };
  return acc;
  }, {})
@@ -283,7 +299,9 @@ const useForm = <V extends FormValues = FormValues>({
 
  try {
  const error =
- (await runFormValidation(name)) || (await runFieldValidation(name));
+ (await runFormValidation(name)) ||
+ (await runFieldValidation(name)) ||
+ runBuiltInValidation(name);
 
  if (error) setStateRef(`errors.${name}`, error);
  setStateRef("isValidating", false);
@@ -292,21 +310,29 @@ const useForm = <V extends FormValues = FormValues>({
  return exception;
  }
  },
- [runFieldValidation, runFormValidation, setStateRef]
+ [runBuiltInValidation, runFieldValidation, runFormValidation, setStateRef]
  );
 
  const validateForm = useCallback<ValidateForm<V>>(() => {
  setStateRef("isValidating", true);
 
- return Promise.all([runAllFieldsValidation(), runFormValidation()]).then(
- (errors) => {
- const errs = deepMerge(...errors);
- setErrors(errs);
- setStateRef("isValidating", false);
- return errs;
- }
- );
- }, [runAllFieldsValidation, runFormValidation, setErrors, setStateRef]);
+ return Promise.all([
+ runAllBuiltInsValidation(),
+ runAllFieldsValidation(),
+ runFormValidation(),
+ ]).then((errors) => {
+ const errs = deepMerge(...errors);
+ setErrors(errs);
+ setStateRef("isValidating", false);
+ return errs;
+ });
+ }, [
+ runAllBuiltInsValidation,
+ runAllFieldsValidation,
+ runFormValidation,
+ setErrors,
+ setStateRef,
+ ]);
 
  const validateFormWithLowPriority = useCallback(
  () =>