Field (React Hook Form)

Die Field Komponente "verbindet" Flow Eingabefelder mit React Hook Form.GitHub

Die Field Komponente verwendet die gleichen Properties (ausschließlich render) wie die Controller Komponente von React Hook Form.

Beispiel

import { useForm } from "react-hook-form";
import {
  Field,
  Form,
} from "@mittwald/flow-react-components/react-hook-form";
import { TextField } from "@mittwald/flow-react-components/TextField";
import { Label } from "@mittwald/flow-react-components/Label";
import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription";

export default () => {
  interface Values {
    name: string;
  }
  const form = useForm<Values>();

  return (
    <Form form={form} onSubmit={console.log}>
      <Field
        name="name"
        rules={{
          required: "The project name is required",
        }}
      >
        <TextField>
          <Label>Name</Label>
          <FieldDescription>
            The name of the project
          </FieldDescription>
        </TextField>
      </Field>
    </Form>
  );
}

Typed Field

Die typedField(form) Factory erzeugt eine auf den Type der jeweilige Form angepasste Field Komponente. So führen z.B. unbekannte Feld-Namen zu einem TypeScript-Fehler.

import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { TextField } from "@mittwald/flow-react-components/TextField";
import { Label } from "@mittwald/flow-react-components/Label";

export default () => {
  interface Values {
    myField: string;
  }
  const form = useForm<Values>();

  // Only `myField` is allowed for name prop
  const Field = typedField(form);

  return (
    <Form form={form} onSubmit={console.log}>
      <Field name="myField">
        <TextField>
          <Label>Name</Label>
        </TextField>
      </Field>
    </Form>
  );
}

Feedback geben

Components

Field (React Hook Form)

Beispiel

Typed Field