Pass form field to FieldError

Author: CodeStix

src/FieldError.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DefaultError, DefaultState, FormState } from "./form";
+import { DefaultError, DefaultState, ErrorType, FormState } from "./form";
 import { useListener } from "./hooks";
 import { ElementProps } from "./Field";
 
@@ -29,11 +29,11 @@ export function FieldError<
  * `<FieldError as={CustomError} {...} />`
  */
  as?: C;
- transformer?: (error: Error) => React.ReactNode;
- } & Omit<ElementProps<C>, "transformer" | "as" | "name" | "form" | "children">
+ transformer?: (error: ErrorType<T[K], Error>) => React.ReactNode;
+ } & Omit<ElementProps<C>, "transformer" | "as" | "name" | "form" | "children" | "field">
 ) {
  const { form, as = React.Fragment, transformer, ...rest } = props;
- const { error } = useListener(form, props.name);
- if (!error || typeof error === "object") return null;
- return React.createElement(as, { ...rest, children: String(transformer ? transformer(error as Error) : error) });
+ const field = useListener(form, props.name);
+ if (!field.error || typeof field.error === "object") return null;
+ return React.createElement(as, { ...rest, field, children: transformer ? transformer(field.error) : String(field.error) });
 }

testing/src/Fieldform.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useForm, Field, AnyListener, FieldError } from "typed-react-form";
+import { useForm, Field, AnyListener, FieldError, FormField } from "typed-react-form";
 
 function Input(props: { value?: string; onChange?: (value: string) => void; style: React.CSSProperties }) {
  return <input style={{ padding: "0.3em", ...props.style }} value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} />;
@@ -11,11 +11,12 @@ function validate(_: any) {
  };
 }
 
-function Error(props: { children: React.ReactNode }) {
+function Error(props: { children: React.ReactNode; field: FormField }) {
  return (
- <p>
- not epic:
- <strong>{props.children}</strong>
+ <p style={{ color: "red" }}>
+ <strong>
+ {props.children} ({props.field.dirty + ""})
+ </strong>
  </p>
  );
 }