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

1
type SetErrors = (fieldsDelta: FieldsDelta) => Object
2
3
type Errors = string[] | string | null
4
5
type FieldsDelta = {
6
[fieldName?]: Errors | FieldsDelta,
7
}
Copied!

Examples

On submit failure

1
import React from 'react'
2
import { Form, Field } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
5
export default class Example extends React.Component {
6
handleRegisterFailure = ({ res, form }) => {
7
const { errors } = res
8
9
form.setErrors({
10
username: errors.username,
11
billingAddress: {
12
firstName: errors.firstName,
13
},
14
})
15
}
16
17
render() {
18
return (
19
<Form onSubmitFailed={this.handleRegisterFailure}>
20
<Input
21
name="username"
22
required />
23
<Field.Group name="billingAddress">
24
<Input
25
name="firstName"
26
required />
27
</Field.Group>
28
</Form>
29
)
30
}
31
}
Copied!

Form reference

1
import React from 'react'
2
import { Form } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
5
export default class Example extends React.Component {
6
handleButtonClick = () => {
7
this.formRef.setErrors({
8
username: 'Error message'
9
})
10
}
11
12
render() {
13
return (
14
<Form
15
ref={form => this.formRef = form}
16
onSubmitFailed={this.handleRegisterFailure}>
17
<Input
18
name="username"
19
required />
20
<button onClick={this.handleButtonClick}>Set error</button>
21
</Form>
22
)
23
}
24
}
Copied!
Last modified 3yr ago