Message

Form <Message> displays error state for a field or set of fields. They can be rendered anywhere under a <Form> and styled to suit your application.

Overview

<Message>s like <Field>s associate and subscribe to paths with the form data. Following the api for HTML <label> the for prop is used instead of name. Messages only render when there are errors.

<Form errors={{ name: "I am an Error" }}>
  <Form.Message for="name" />
</Form>;

<Form errors={{ name: "I am an Error" }}>
  <Form.Message for="name" />
</Form>;

Messages can be configured to display one, or all errors pertaining to a field

<Form errors={{ name: ["I am an Error", "I am a second error!"] }}>
  <Form.Message for="name" />

  <hr className="my-3" />

  <Form.Message for="name">
    {errors => <span>{errors.pop()}</span>}
  </Form.Message>
</Form>;

<Form errors={{ name: ["I am an Error", "I am a second error!"] }}>
  <Form.Message for="name" />
  <hr className="my-3" />
  <Form.Message for="name">
    {errors => <span>{errors.pop()}</span>}
  </Form.Message>
</Form>;

Messages are also not limited to a single field:

<Form errors={{ name: "Name is required", age: "age is required" }}>
  <Form.Message for={["name", "age"]} />
</Form>;

<Form errors={{ name: "Name is required", age: "age is required" }}>
  <Form.Message for={["name", "age"]} />
</Form>;

React formal is unopinionated about how errors should be styled. You can easily add your own styles to the Message or create a wrapper component for your application.

function InfoMessage(props) {
  return <Form.Message className="text-warning font-bold ml-4" {...props} />;
}

<Form errors={{ name: "Required" }}>
  <Form.Message
    for="name"
    className="text-danger bg-danger-light px-4 py-3 rounded border border-danger"
  />

  <InfoMessage for="name" />
</Form>;

function InfoMessage(props) {
  return <Form.Message className="text-warning font-bold ml-4" {...props} />;
}
<Form errors={{ name: "Required" }}>
  <Form.Message
    for="name"
    className="text-danger bg-danger-light px-4 py-3 rounded border border-danger"
  />
  <InfoMessage for="name" />
</Form>;

API

import Form from 'react-formal';const Message = Form.Message

Represents a Form validation error message. Only renders when the value that it is for is invalid.

children

A function that maps an array of message strings and returns a renderable string or ReactElement.

<Message>
 {errors => errors.join(', ')}
</Message>

type:(errors: any[], props: any) => ReactReactNode

default:

(errors: any[], msgProps: any) => (
  <span {...msgProps}>{errors.join(', ')}</span>
)

className

type:string

errors

type:Errors

extract

Map the passed in message object for the field to a string to display

type:(errors: any, props: any) => any

default:(error: any) => error.message || error

filter

type:(item: any, i: number, list: any[]) => boolean

default:uniq

forrequired

type:stringstring[]

Message

#Overview

#API

#children

#className

#errors

#extract

#filter

#forrequired