This is normalized form field meta for internal usage. Usually not used by end users. It ensures the meta always has name/widget/viewWidget defined.

interface NormalizedFormField {
    children?: Function | ReactNode;
    clear?: "left" | "right" | "both";
    colSpan?: number;
    condition?: ((param0) => boolean);
    disabled?: boolean;
    extraNode?: ReactNode;
    fullWidth?: boolean;
    help?: ReactNode;
    initialValue?: any;
    key: string;
    label?: ReactNode;
    labelWidth?: string;
    name: string | string[];
    options?: {
        label: ReactNode;
        value: any;
        [key: string]: any;
    }[];
    render?: ((param0) => null | ReactElement<any, string | JSXElementConstructor<any>>);
    renderView?: ((value, param1) => null | ReactElement<any, string | JSXElementConstructor<any>>);
    required?: boolean;
    rowSpan?: number;
    viewMode?: boolean;
    viewWidget: string | ReactComponent;
    viewWidgetProps?: Record<string, any>;
    widget: string | ReactComponent;
    widgetProps?: NiceFormWidgetProps;
    widgetType?: null | string;
}

Hierarchy (view full)

Properties

children?: Function | ReactNode

If the field widget accepts the children, then you can specify it by this.

clear?: "left" | "right" | "both"

In the grid layout system, if the field allows other fields in left, right or both position. For example, if clear is right, then no other fields in the right even there's still space (by columns).

colSpan?: number

Nice form provides the grid layout system, colSpan is used to specify how many columns of the field.

condition?: ((param0) => boolean)

A function returns true or false to determine if the field should be rendered. It's convenient to show/hide fields dynamically.

If you need complex logic, you can modify meta fields directlly after meta is constructed.

Type declaration

Returns

disabled?: boolean

Whether the field is disabled.

extraNode?: ReactNode

The extra node of the field. Appended just after the field component. You usually need to use css to position it.

fullWidth?: boolean

Whether the field is full width of the space.

help?: ReactNode

Help information of the field, consumed by adapter.

initialValue?: any

The initial value of the field.

key: string

The field key. It's used to identify the field. It's used as the field name if the name is not defined. In this case, the name is generated by splitting the key by '.'. For example: if the key is 'user.name', the name will be ['user', 'name']. So it's convenient to support nested object.

Note: if you want a dot . to be part of the field name, you should specify the name explicitly. For example: name: ['user', 'name.with.dot']

label?: ReactNode

The label of the field, adapters should implement the support for labels.

labelWidth?: string

The label width.

name: string | string[]

The name of the field, its format may be different for different adapters. For example, in antd, it's an array of path. See API doc of the library you use.

options?: {
    label: ReactNode;
    value: any;
    [key: string]: any;
}[]

Only for field widget which consumes a list data. For example: select, checkbox group, radio group, etc.

Type declaration

  • [key: string]: any
  • label: ReactNode
  • value: any
render?: ((param0) => null | ReactElement<any, string | JSXElementConstructor<any>>)

You can use render method to render any content of the field in both edit and view mode. It will replaces the logic provided by adapters. You need to handle the edit/view mode in the function.

Type declaration

    • (param0): null | ReactElement<any, string | JSXElementConstructor<any>>
    • Parameters

      Returns null | ReactElement<any, string | JSXElementConstructor<any>>

Returns

renderView?: ((value, param1) => null | ReactElement<any, string | JSXElementConstructor<any>>)

You can use renderView method to render the widget (without label).

Type declaration

    • (value, param1): null | ReactElement<any, string | JSXElementConstructor<any>>
    • Parameters

      Returns null | ReactElement<any, string | JSXElementConstructor<any>>

Returns

required?: boolean

Whether the field is required.

rowSpan?: number

Nice form provides the grid layout system, colSpan is used to specify how many rows of the field.

viewMode?: boolean

If the field is in view mode, it will use viewWidget to render the field. Note that this is different with readOnly property which passes readOnly to the field component.

viewWidget: string | ReactComponent

The widget component or widget id in view mode.

viewWidgetProps?: Record<string, any>

The view mode widget component props.

widget: string | ReactComponent

The widget component or widget id in edit mode.

widgetProps?: NiceFormWidgetProps

The edit mode widget component props.

widgetType?: null | string

The widget type.

Generated using TypeDoc