apphouse/dist/models/Form/Field.interface.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';
// | 'number'
// | 'date'
// | 'time'
// | 'datetime-local'
// | 'email'
// | 'month'
// | 'password'
// | 'search'
// | 'tel'
// | 'url'
// | 'week'
// | 'file'
// | 'checkbox'
// | 'radio'
// | 'range'
// | 'hidden'
// | 'image'
// | 'reset'
// | 'submit'
// | 'button'
// | 'select'
// | 'textarea'
// | 'select-multiple'
// | 'select-one'
// | 'tel'
// | 'url'
// | 'week'
// | 'file'
// | 'checkbox'
// | 'radio'
// | 'range'
// | 'hidden'
// | 'image'
// | 'reset'
// | 'submit'
// | 'button'
// | 'select'
// | 'textarea'
// | 'select-multiple'
// | 'select-one';

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;