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,
    }