Render Form Fields

RenderFormFields is the core form rendering component. It reads entity column metadata and renders the appropriate form control for each field type automatically.

Import


import { RenderFormFields } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/RenderFormFields";

How It Works

Each field’s columnTypeEnum determines which input component is rendered:

Column Type	Rendered Component
`TEXT`	Input
`TEXTAREA`	Textarea
`TEXT_EDITOR`	TextEditor
`NUMBER`	Input (type=number)
`BOOLEAN`	BooleanToggle
`SELECT`	Combobox (async)
`MANY_TO_MANY`	Combobox (isMulti)
`DATE`	CalendarInput
`TIME`	TimePicker
`COLOR`	ColorPicker
`COUNTRY`	CountrySelector
`STATE`	StateSelector
`CITY`	CitySelector

Props

Prop	Type	Description
`fields`	`FieldConfig[]`	Field definitions from entity metadata
`form`	`UseFormReturn`	React Hook Form instance
`disabled`	`boolean`	Disable all fields
`locale`	`string`	Active locale (for translatable fields)

Usage


import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Form";
import { RenderFormFields } from "...";
 
export function AddEntityForm({ fields, schema }) {
  const form = useForm({ resolver: zodResolver(schema) });
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <RenderFormFields fields={fields} form={form} />
        <Button type="submit">Save</Button>
      </form>
    </Form>
  );
}

In generated CRUD pages, RenderFormFields is already wired up. You only need to use it directly when building custom form layouts.

Conditional Fields

Fields can be shown/hidden based on other field values using the showWhen config in entity metadata:


{
  "fields": {
    "vatNumber": {
      "showWhen": { "field": "isBusiness", "value": true }
    }
  }
}