@qlee/react-form

react-form

Create a form

Link to form example

Field Props -defaultValues?: Record<string, any>
The form default value

Form Api

• getFiled(fieldName: string): Field
  Get the field by field name

• Submit(): Promise<Record<string, any>>
  Return a promise
  resolve form data when validating successfully
  reject a map of ValidationError when validating failed

Create a field

Link to field example

Field Props

• name: string
  The field name

• defaultValue?: T
  The field default value

• validators?: Validator<T>[]
  The field validator array

Field Api

• validate(): Promise<void>
  Return a promise.
  resolve void when validating successfully
  reject a ValidationError when validating failed

• getValue(): T|undefined
  Return field value

• getValidValue(): Promise<T|undefined>
  Return a promise.
  resolve the field value when validating successfully
  reject a ValidationError when validating failed

• cleanError(): void
  Clean the field error

• getError(): ValidationError<T> | undefined
  Return the field error

• setValue(value: T): void
  Set the field value

• subscribe(changeSubscriber: ChangeSubscriber<T>, errorSubscriber: ErrorSubscriber<T>): void

  • changeSubscriber(change: {name: string, prev?: T,curr: T}) => void
    changeSubscribe is a function triggered when the value changed
  • errorSubscriber is a function triggered when the field error changed (the error is missed when clear error)
    (error?: {fieldName: string, value?: T, message: string}) => void

• unsubscribe(...subscriber: Array<ChangeSubscriber<T> | ErrorSubscriber<T>>): void
  Not trigger the subscribers when there is a change

Validation

Validator Constructor

    interface MessageGenerator {
      (fieldName: string, fieldValue: any): string
    }

    interface Validator<T> {
       validate: (value: T, form: Form) => boolean | Promise<boolean>
       message: MessageGenerator | string,
    }