apphouse/dist/models/Form/Field.interface.d.ts

Component library for React that uses observable state management and theme-able components.

import { InputProps } from '../../components/input/input.interface';
export type FormFieldOption = {
    label: string;
    value: string;
};
export type FormFieldOptions = FormFieldOption[];
/**
 * The type of the field.
 */
export type FormFieldType = 'text' | 'number' | 'date' | 'color' | 'json' | 'code' | 'email' | 'checkbox' | 'radio' | 'password' | 'file' | 'option';
export interface FieldType {
    /**
     * The id of the field. It must be unique for the form.
     */
    id: string;
    /**
     * The value of the field.
     */
    value: string;
    /**
     * The type of the field.
     * @default 'text'
     * @optional
     */
    type?: FormFieldType;
    /**
     * Options for the field if the field is of type `option`.
     * This holds the options for the field.
     * @optional
     * @default undefined
     * @example
     * ```ts
     * const options = [{ value: '1', label: 'One' }, { value: '2', label: 'Two' }];
     * ```
     */
    options?: FormFieldOptions;
    /**
     * The prop options for the input component.
     * @optional
     * @default undefined
     */
    input?: Partial<Omit<InputProps, 'value' | 'id' | 'type'>>;
    /**
     * A function to validate the value of the field.
     * If the function returns false, the field will be marked as invalid.
     * @optional
     * @param value the value of the field
     * @returns boolean whether the value is valid or not
     */
    validation?: ValidationFunction;
}
/**
 * The type of a validation function.
 */
export type ValidationFunction = (value?: string) => boolean;