React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • FAQ
  • Getting started
    • Installation
    • Creating fields
    • Creating form
    • Validation rules
    • Validation messages
    • Applying validation
    • Handle submit
  • Architecture
    • Argument properties
    • Referencing
    • Field lifecycle
    • Controlled fields
    • Reactive props
  • Validation
    • Getting started
    • Validation schema
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Definition
  • Examples
  • On submit failure
  • Form reference
  1. Components
  2. Form
  3. Methods

setErrors()

Applies the given error messages to the selected fields.

Accepts the delta fields object, where each field path is associated with the respective error messages. Validates any affected field as invalid.

Providing explicit null as error message value removes the error message, and restores the previous validity state of a field.

Definition

type SetErrors = (fieldsDelta: FieldsDelta) => Object

type Errors = string[] | string | null

type FieldsDelta = {
  [fieldName?]: Errors | FieldsDelta,
}

Examples

On submit failure

import React from 'react'
import { Form, Field } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class Example extends React.Component {
  handleRegisterFailure = ({ res, form }) => {
    const { errors } = res
    
    form.setErrors({
      username: errors.username,
      billingAddress: {
        firstName: errors.firstName,
      },
    })
  }
  
  render() {
    return (
      <Form onSubmitFailed={this.handleRegisterFailure}>
        <Input
          name="username"
          required />
        <Field.Group name="billingAddress">
          <Input
            name="firstName"
            required />
        </Field.Group>
      </Form>
    )
  }
}

Form reference

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class Example extends React.Component {
  handleButtonClick = () => {    
    this.formRef.setErrors({
      username: 'Error message'
    })
  }
  
  render() {
    return (
      <Form
        ref={form => this.formRef = form}
        onSubmitFailed={this.handleRegisterFailure}>
        <Input
          name="username"
          required />
        <button onClick={this.handleButtonClick}>Set error</button>
      </Form>
    )
  }
}
PrevioussetValues()Nextreset()

Last updated 6 years ago