# Field

Die Field-Component integriert die Form Controls von Flow nahtlos in das Formular-Management von React Hook Form.

## Overview

Die Field-Component nutzt dieselben Properties wie die
[Controller-Component](https://www.react-hook-form.com/api/usecontroller/controller/)
von React Hook Form – mit Ausnahme von `render`.

# Playground

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

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

  return (
    <Form form={form} onSubmit={console.log}>
      <Field
        name="name"
        rules={{
          required: "Bitte gib einen Namen ein",
        }}
      >
        <TextField>
          <Label>Name</Label>
        </TextField>
      </Field>
    </Form>
  );
}
```

---

# typedField

Die `typedField(form)`-Factory erzeugt eine Field-Component, die an den Typ des
jeweiligen Forms angepasst ist. Dadurch führen beispielsweise unbekannte
Field-Namen zu einem TypeScript-Fehler.

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

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>
  );
}
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `any` | - | - |
| `name` _(required)_ | `string` | - | - |
| `disabled` | `boolean` | - | - |
| `control` | `Control<T, any, T>` | - | - |
| `rules` | `Omit<RegisterOptions<T, Path<T>>, "disabled" \| "valueAsNumber" \| "valueAsDate" \| "setValueAs">` | - | - |
| `shouldUnregister` | `boolean` | - | - |
| `exact` | `boolean` | - | - |
| `children` | `ReactNode` | - | - |