Allow validators to return undefined

Author: CodeStix

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 1.2.14 (07/04/2021)
+
+-   Moved `yupValidator` to seperate package [`typed-react-form-yup`](https://www.npmjs.com/package/typed-react-form-yup)
+-   Child/array forms name prop only allows object fields now.
+-   Pass FormEvent through `form.handleSubmit`
+-   Allow string as argument to setErrors, which sets the error on the parent.
+-   Allow validators to return undefined.
+
 # 1.2.13 (07/04/2021)
 
 -   The `name` prop on FormTextArea and FormSelect did not get passed to their input element.

README.md

@@ -6,7 +6,7 @@ A fast, completely type-checked React form state manager, focussed on typescript
 
 - [Object fields](https://typed-react-form.codestix.nl/docs/Object-fields)
 - [Array fields](https://typed-react-form.codestix.nl/docs/Array-fields)
-- [Validation and yup integration](https://typed-react-form.codestix.nl/docs/Validation)
+- [Validation](https://typed-react-form.codestix.nl/docs/Validation)
 - [Easily toggle fields](https://typed-react-form.codestix.nl/docs/Toggling-a-field)
 - [Listeners (subscription based state updates)](https://typed-react-form.codestix.nl/docs/useListener)
 
@@ -30,9 +30,10 @@ This library is built from the ground up for React with typescript, but it also
 
 Contributions are always welcome!
 
-To begin developing yourself, clone this repo, and do the following:
-- `/`: contains the library source code. Use `yarn start` or `npm run start` to watch the files and build each time something changes. This way the testing application gets updated each time.
-- `example/`: contains the testing application. Use `yarn start` or `npm run start` in the example directory to start the application.
+1. Clone this repo
+2. Install deps using `yarn`. Yarn is required due to the resolutions field in package.json, npm does not support this.
+3. Open a new terminal and navigate to `example/`, run `yarn` and `yarn start` to start the testing application.
+4. Done! When you edit source code, it will be rebuilt and update the testing application.
 
 ## License
 

example/package.json

@@ -22,7 +22,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "link:../node_modules/react-scripts",
     "styled-components": "^5.2.1",
-    "typed-object-validator": "^1.0.1",
+    "typed-object-validator": "^1.0.2",
     "typed-react-form": "link:..",
     "typed-react-form-yup": "^1.0.0",
     "typescript": "link:../node_modules/typescript",

example/src/App.tsx

@@ -15,8 +15,9 @@ import {
     useArrayForm
 } from "typed-react-form";
 import { VisualRender } from "./VisualRender";
-import * as yup from "yup";
-import { yupValidator } from "typed-react-form-yup";
+// import * as yup from "yup";
+// import { yupValidator } from "typed-react-form-yup";
+import tv from "typed-object-validator";
 
 interface ExampleFormData {
     id: number;
@@ -82,16 +83,26 @@ const initialValues: ExampleFormData = {
     todos: [{ message: "This is a todo", priority: "normal" }]
 };
 
-const TodoListSchema = yup.object({
-    name: yup.string().required("Enter a name").min(5, "Enter a longer name"),
-    language: yup.string().oneOf(["en", "nl"], "Must be english or dutch"),
-    todos: yup.array().of(
-        yup.object({
-            message: yup.string().required("Enter a todo")
+const TodoListSchema = tv.object({
+    name: tv.string().min(5, "Enter a longer name"),
+    language: tv.value("en").or(tv.value("nl", "Must be english or dutch")),
+    todos: tv.array(
+        tv.object({
+            message: tv.string().min(1, "Enter a todo")
         })
     )
 });
 
+// const TodoListSchema = yup.object({
+//     name: yup.string().required("Enter a name").min(5, "Enter a longer name"),
+//     language: yup.string().oneOf(["en", "nl"], "Must be english or dutch"),
+//     todos: yup.array().of(
+//         yup.object({
+//             message: yup.string().required("Enter a todo")
+//         })
+//     )
+// });
+
 export function ArrayTest() {
     const [values, setValues] = useState({ name: "a list", items: ["asdf"] });
     const form = useForm(values);
@@ -128,7 +139,7 @@ export function ArrayTest() {
 export function Form() {
     const form = useForm(
         initialValues, // <- Default values, may change
-        yupValidator(TodoListSchema, { abortEarly: false }), // <- Validator (optional)
+        (values) => TodoListSchema.validate(values),
         false, // <- Validate on change (optional)
         false // <- Validate on mount (optional)
     );

example/yarn.lock

@@ -10308,10 +10308,10 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.1.0.tgz#9bdc22c648cf8cf86dd23d32336a41cfb6475e3f"
   integrity sha512-G9absDWvhAWCV2gmF1zKud3OyC61nZDwWvBL2DApaVFogI07CprggiQAOOjvp2NRjYWFzPyu7vwtDrQFq8jeSA==
 
-typed-object-validator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/typed-object-validator/-/typed-object-validator-1.0.1.tgz#524184eec5da5a37a90ea3011877b05189e9faee"
-  integrity sha512-6h0PJeLVW7J9O65HqgotnDxatlwY652+kuA+yU3CPtJTlP+TJAmLHQ4NrqXwSqnwvNTfd54OuUCTrV6if7g+Mw==
+typed-object-validator@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-object-validator/-/typed-object-validator-1.0.2.tgz#19ae734eedeca91a06f1535445ed8188509ba149"
+  integrity sha512-6A9qDfEViI7lB41LjAGsO7MvupvQJg6Yu1V8DWwEjfWhDuZZCD145UfZLMWM3Ani6a53jE2LbjLhn8FCXjejfg==
 
 typed-react-form-yup@^1.0.0:
   version "1.0.0"

src/form.ts

@@ -1,6 +1,6 @@
 export type ListenerCallback = () => void;
 export type ListenerMap = { [T in string]?: ListenerCallback };
-export type Validator<T, Error> = (values: T) => ErrorType<T, Error> | Promise<ErrorType<T, Error>>;
+export type Validator<T, Error> = (values: T) => ErrorType<T, Error> | undefined | Promise<ErrorType<T, Error> | undefined>;
 
 export type ChildFormMap<T extends object, State, Error extends string> = {
     [K in KeysOfType<T, object>]?: ChildFormState<T, K, State, Error>;
@@ -307,7 +307,7 @@ export class FormState<T extends object, State = DefaultState, Error extends str
         if (!this.validator) return true;
         let r = this.validator(this.values);
         if (r instanceof Promise) r = await r;
-        this.setErrors(r);
+        this.setErrors(r ?? ({} as ErrorType<T, Error>));
         return !this.error;
     }
 
@@ -320,7 +320,7 @@ export class FormState<T extends object, State = DefaultState, Error extends str
         let r = this.validator(this.values);
         if (r instanceof Promise)
             throw new Error("validateSync() was called on a form with an asynchronous validator set, please use `await form.validate()` instead.");
-        this.setErrors(r);
+        this.setErrors(r ?? ({} as ErrorType<T, Error>));
         return !this.error;
     }
 
@@ -371,7 +371,7 @@ export class FormState<T extends object, State = DefaultState, Error extends str
             if (notifyParent && this instanceof ChildFormState) {
                 this.parent.setError(this.name, errors, false, true);
             }
-            errors = {} as any;
+            errors = {} as ErrorType<T, Error>;
         } else {
             addDistinct(keys, Object.keys(errors));
         }
@@ -387,8 +387,9 @@ export class FormState<T extends object, State = DefaultState, Error extends str
                     false, // Will call this.parent.setError by itself after all values have been copied, see 3 lines down
                     false // Will call fireAnyListener by itself after all values have been copied, see 3 lines down
                 )
-            )
+            ) {
                 changed = true;
+            }
         }
         if (!changed) return false;