The form field meta. Note that this is the base meta that should be implmented by all adapters. But different adapters may extend the basic meta to have more options.

interface AntdNiceFormField {
    addItemButtonLabel?: ReactNode;
    children?: Function | ReactNode;
    className?: string;
    clear?: "left" | "right" | "both";
    colSpan?: number;
    colon?: boolean;
    condition?: ((param0) => boolean);
    dependencies?: any[];
    disabled?: boolean;
    extra?: ReactNode;
    extraNode?: ReactNode;
    fieldId?: string;
    fieldKey?: Key | Key[];
    fullWidth?: boolean;
    getListItemMeta?: ((fields, __namedParameters, __namedParameters, index) => any);
    getValueFromEvent?: ((...args) => any);
    getValueProps?: ((value) => Record<string, unknown>);
    hasFeedback?: boolean | {
        icons: FeedbackIcons;
    };
    help?: ReactNode;
    hidden?: boolean;
    htmlFor?: string;
    id?: string;
    initialValue?: any;
    isList?: boolean;
    isListField?: boolean;
    key: string;
    label?: ReactNode;
    labelAlign?: FormLabelAlign;
    labelCol?: ColProps;
    labelWidth?: string;
    messageVariables?: Record<string, string>;
    name?: string | string[];
    noStyle?: boolean;
    normalize?: ((value, prevValue, allValues) => any);
    onMetaChange?: ((meta) => void);
    onReset?: (() => void);
    options?: any[];
    prefixCls?: string;
    preserve?: boolean;
    render?: ((param0) => null | ReactElement<any, string | JSXElementConstructor<any>>);
    renderView?: ((value, param1) => null | ReactElement<any, string | JSXElementConstructor<any>>);
    required?: boolean;
    rootClassName?: string;
    rowSpan?: number;
    rules?: Rule[];
    shouldUpdate?: ShouldUpdate<any>;
    status?: "" | "success" | "warning" | "error" | "validating";
    style?: CSSProperties;
    tooltip?: LabelTooltipType;
    trigger?: string;
    validateDebounce?: number;
    validateFirst?: boolean | "parallel";
    validateStatus?: "" | "success" | "warning" | "error" | "validating";
    validateTrigger?: string | false | string[];
    valuePropName?: string;
    viewMode?: boolean;
    viewWidget?: null | string | ReactComponent;
    viewWidgetProps?: Record<string, any>;
    widget?: null | string | ReactComponent;
    widgetProps?: NiceFormWidgetProps;
    widgetType?: null | string;
    wrapperCol?: ColProps;
}

Hierarchy (view full)

  • NiceFormField
  • Omit<FormItemProps, "children" | "name">
    • AntdNiceFormField

Properties

addItemButtonLabel?: ReactNode
children?: Function | ReactNode

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

className?: string
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.

colon?: boolean
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

dependencies?: any[]

Set up dependencies field. When dependencies field update and current field is touched, will trigger validate rules and render.

disabled?: boolean

Whether the field is disabled.

extra?: ReactNode
extraNode?: ReactNode

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

fieldId?: string
fieldKey?: Key | Key[]

Deprecated

No need anymore

fullWidth?: boolean

Whether the field is full width of the space.

getListItemMeta?: ((fields, __namedParameters, __namedParameters, index) => any)

Type declaration

    • (fields, __namedParameters, __namedParameters, index): any
    • Parameters

      • fields: FormListFieldData[]
      • __namedParameters: FormListOperation
      • __namedParameters: {
            errors: any[];
        }
        • errors: any[]
      • index: number

      Returns any

getValueFromEvent?: ((...args) => any)

Type declaration

    • (...args): any
    • Parameters

      • Rest ...args: EventArgs

      Returns any

getValueProps?: ((value) => Record<string, unknown>)

Type declaration

    • (value): Record<string, unknown>
    • Parameters

      • value: any

      Returns Record<string, unknown>

hasFeedback?: boolean | {
    icons: FeedbackIcons;
}

Type declaration

  • icons: FeedbackIcons
help?: ReactNode

Help information of the field, consumed by adapter.

hidden?: boolean
htmlFor?: string
id?: string
initialValue?: any

The initial value of the field.

isList?: boolean

Passed by Form.List props. Do not use since it will break by path check.

isListField?: boolean

Passed by Form.List props. Do not use since it will break by path check.

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.

labelAlign?: FormLabelAlign
labelCol?: ColProps
labelWidth?: string

The label width.

messageVariables?: Record<string, string>
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.

noStyle?: boolean
normalize?: ((value, prevValue, allValues) => any)

Type declaration

    • (value, prevValue, allValues): any
    • Parameters

      • value: any
      • prevValue: any
      • allValues: Store

      Returns any

onMetaChange?: ((meta) => void)

Type declaration

    • (meta): void
    • Parameters

      • meta: MetaEvent

      Returns void

onReset?: (() => void)

Type declaration

    • (): void
    • Returns void

options?: any[]

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

prefixCls?: string
preserve?: boolean
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.

rootClassName?: string
rowSpan?: number

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

rules?: Rule[]
shouldUpdate?: ShouldUpdate<any>
status?: "" | "success" | "warning" | "error" | "validating"
style?: CSSProperties
tooltip?: LabelTooltipType
trigger?: string
validateDebounce?: number

Trigger will after configured milliseconds.

validateFirst?: boolean | "parallel"
validateStatus?: "" | "success" | "warning" | "error" | "validating"
validateTrigger?: string | false | string[]
valuePropName?: string
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?: null | string | ReactComponent

The widget component or widget id in view mode.

viewWidgetProps?: Record<string, any>

The view mode widget component props.

widget?: null | 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.

wrapperCol?: ColProps

Generated using TypeDoc