Field.Group
A component responsible for form data separation on the layout level. Designed primarily for handling of complex forms and semantic representation of fields structure expected by a remote end-point.
Beware that grouping the fields affects how you reference them in the serialized object, or reactive resolvers.
Prop name | Type | Description |
name | string | The name of the field group. All the fields wrapped in Field.Group will be available by the following reference path: [...groupNames, fieldName] . |
exact | boolean | Prevents group names concatenation due to inheritance. |
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 {
render() {
return (
<Form>
<Field.Group name="primaryInfo">
<Input name="username" value="admin" />
<Input name="firstName" value="John" />
</Field.Group>
<Input name="city" value="London" />
</Form>
);
}
}
The form above serializes into the following JSON:
{
"city": "London",
"primaryInfo": {
"username": "admin",
"firstName": "John"
}
}
Tip:Field.Group
allows you to have multiple fields with the same name in a single Form, as long as there are no namespace collision within one group.
Nested
Field.Group
components cascade by their names as their appear in the tree: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 {
render() {
return(
<Form>
<Field.Group name="first">
<Input name="fieldOne" value="foo" />
<Field.Group name="second">
<Input name="fieldOne" value="bar" />
</Field.Group>
</Field.Group>
</Form>
)
}
}
Serializes into the following JSON:
{
"first": {
"fieldOne": "foo",
"second": {
"fieldOne": "bar"
}
}
}
Escaping of cascading is not currently supported.
One of the benefits of
Field.Group
is an ability to have multiple groups with the same name, which will group the elements under one property upon the serialization. This is particularly useful when UI was not, or cannot be designed according to the data structure expected by the remote end-point.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 {
render() {
return (
<Form>
<Input name="email" value="[email protected]" />
<Field.Group name="billingAddress">
<Input name="firstName" value="John" />
<Input name="lastName" value="Maverick" />
</Field.Group>
<Field.Group name="billingAddress">
<Input name="firstName" value="Kate" />
<Input name="lastName" value="Rosewood" />
</Field.Group>
<Field.Group name="billingAddress">
<Input name="phoneNumber" value="123456789" />
</Field.Group>
<Field.Group name="deliverAddress">
<Input name="address" value="Baker st." />
</Field.Group>
</Form>
)
}
}
Serialize into the following JSON:
{
"email": "[email protected]",
"billingAddress": {
"firstName": "John",
"lastName": "Maverick",
"phoneNumber": "123456789"
},
"deliveryAddress": {
"firstName": "Kate",
"lastName": "Rosewood",
"address": "Baker st."
}
}
It is possible to opt-out the Nested groups behavior by providing the
exact
prop to the Field.Group
that needs to be escaped. The nesting of the field group then has no effect over the serialized path.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 {
render() {
return (
<Form>
<Field.Group name="billingAddress">
<Input name="firstName" value="John" />
<Input name="lastName" value="Maverick" />
<Field.Group exact name="userInfo">
<Input name="phoneNumber" value="+123" />
</Field.Group>
</Field.Group>
<Field.Group name="userInfo">
<Input name="firstName" value="Kate" />
<Input name="lastName" value="Rosewood" />
</Field.Group>
</Form>
)
}
}
Serializes into the following JSON:
{
"billingAddress": {
"firstName": "John",
"lastName": "Maverick"
// no "userInfo" sub-group
},
"userInfo": {
"firstName": "Kate",
"lastName": "Rosewood",
// exact "userInfo" was merged as split groups
"phoneNumber": "+123"
}
}
Last modified 4yr ago