Using the current value from input field?

[marko-x]

First at all: Thank you for providing this feature to the community!

I struggle a lot with using the current form values. I can't find any hook or function to get the field values from the form state.

Just a very simple example: While the user is typing, lets show the current length of the value.
Because the values are handled by the form i don't want to use a custom shadow state. I want to use the state the form is already handling.

import { withZod } from "@remix-validated-form/with-zod";
import { z } from "zod";
import {
  useControlField,
  useField,
  useFormContext,
  ValidatedForm,
} from "remix-validated-form";

const SimpleInput = ({
  name,
  label,
}: {
  name: string;
  label: string;
}) => {
  const { error, getInputProps } = useField(name);
  const { getValues } = useFormContext();
  const formData = getValues();
  const formDataValue = formData.get(name); // <-- tried this: updates 1(!) time after onBlur than its frozen
  const [value] = useControlField<string>(name); // <-- tried this:  is not updating
  return (
    <div>
      <span>{label}</span>
      <input
        {...getInputProps({ id: name, type: "text" })}
        className="w-full flex-1 rounded-md border-2 border-blue-500 py-2 px-3 text-lg leading-6"
      />
      <div>
        Length in controlField: <pre>{value.length}</pre>
      </div>
      <div>
        Length in FormData:{" "}
        <pre>{typeof formDataValue === "string" && formDataValue.length}</pre>
      </div>
      {error && <div>{error}</div>}
    </div>
  );
};

export const SimpleForm = () => {
  return (
    <ValidatedForm
      method="post"
      validator={withZod(
        z.object({
          title: z.string().min(1),
          details: z.object({
            fields: z.array(
              z.object({
                value: z.string().min(1),
              })
            ),
          }),
        })
      )}
      defaultValues={{
        title: "the title",
        details: {
          fields: [{ value: "detail field 1" }, { value: "detail field 2" }],
        },
      }}
      subaction="update-text"
    >
      <SimpleInput name="title" label="Title" />
      <SimpleInput name="details.fields[0].value" label="Field 1" />
      <SimpleInput name="details.fields[1].value" label="Field 2" />
      <button type="submit" />
    </ValidatedForm>
  );
};

see:

 // updates 1(!) time after onBlur than its frozen
 // i think because React not triggered a rerender on this component
 // and: always reading formData again? The form state already updated the fields value 
 const formDataValue = formData.get(name); 

 // i thought this one is the one. Reading the value from field with name.
 // but the value never changed. It's returning the defaultValue
 const [value] = useControlField<string>(name);

So the question is, how to access the current values in the form state?
How can i trigger a request to get the current state?

My first idea was to use my own state. but this feels realy wrong.

const SimpleInput = ({
  name,
  label,
}: {
  name: string;
  label: string;
}) => {
  const { error, getInputProps, defaultValue } = useField(name);
  const [myValue, setMyValue] = useState<string>(defaultValue);
  
  const {id, type, onChange, onBlur, ...restProps } = getInputProps({ id: name, type: "text" });

  return (
    <div>
      <span>{label}</span>
      <input
        {...restProps}
        id={id}
        type={type}
        onChange={(e) => {
          setMyValue(e.currentTarget.value)
          onChange(e);
        }}
        onBlur={(e) => {
          setMyValue(e.currentTarget.value)
          onBlur(e);
        }}
        className="w-full flex-1 rounded-md border-2 border-blue-500 py-2 px-3 text-lg leading-6"
      />
      <div>
        Length in controlField: <pre>{myValue.length}</pre>
      </div>
      {error && <div>{error}</div>}
    </div>
  );
};

If i want to read myValue from another component, i need to create a custom context and so on...

I think i missed something in the docs.

To be clear: I want not only read the value from the current component. I want to read the values from other components in the form, too. Like something form.getFieldValue("title") or form.getFieldsValue().title.

Hope somebody can point me in the right direction.
Thank you.

[airjp73]

Hi! You're really close with the last code snippet. Just replace the useState with useControlField. It's pretty similar to the "global tracking" example in the useControlField docs.

This library differs from other common form libraries in that it doesn't keep track of the field values. There's no API to observe the values because they're not stored anywhere. When you use useControlField, you don't just read the value, you also have to write the value yourself. This gives you some flexibility & control on how you store the value in state vs how you want to value to be serialized in the form.

[marko-x]

Thank you. useControlField is good for simple forms. When it comes to more complex situation (like repeatable fieldsets) its not.
I don't get the point, why there is no possibility to control the fields out of the box.

Just one example:
Having a Form with default values {items: [{title: "Lorem}, {title: "Ipsum"}]} and a repeatable List with fields. const[title, setTitle] = useControlField("items[0].title") and set the title to "Hello World". Then in another form component get all itemswith const [items] = useControlField("items") the title of item one will be "Lorem" (default value). Is this intended?

[zelid]

The useControlField can be used inside FieldArray with appropriate index like https://stackblitz.com/edit/node-9c2mh7?file=app%2Froutes%2Findex.tsx%3AL154 I had a need to show or hide "select state" drop-down based on selected country inside each element of persons array. Would it solve the more complex situations you have?

Seems useControlField is exactly to control the fields out of the box. Just use for both set and read form value inside ValidatedForm. Or inside any atom-component like custom select, input, etc.. The key is to provide full form input name with the right index/key for array fields. The tricky part that if you rely on reading useControlField state you MUST also set the state for that input field like onChange, in other case it would be empty which was also not obvious for me in my case (in your case the line marked as <-- tried this: is not updating)

Helped me to understand how useControlField works, including for FieldArrays:
#116 #166 #163
https://github.com/airjp73/remix-validated-form/blob/fieldarray/apps/test-app/app/routes/occasional-field-tracking.tsx
https://github.com/airjp73/remix-validated-form/blob/fieldarray/apps/test-app/app/routes/field-array.tsx