Field.Group

Specification
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.
Props
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.
Basic
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
  render() {
7
    return (
8
      <Form>
9
        <Field.Group name="primaryInfo">
10
          <Input name="username" value="admin" />
11
          <Input name="firstName" value="John" />
12
        </Field.Group>
13
​
14
        <Input name="city" value="London" />
15
      </Form>
16
    );
17
  }
18
}
Copied!
The form above serializes into the following JSON:
1
{
2
  "city": "London",
3
  "primaryInfo": {
4
    "username": "admin",
5
    "firstName": "John"
6
  }
7
}
Copied!
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 groups
Nested Field.Group components cascade by their names as their appear in the tree:
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
  render() {
7
    return(
8
      <Form>
9
        <Field.Group name="first">
10
          <Input name="fieldOne" value="foo" />
11
          <Field.Group name="second">
12
            <Input name="fieldOne" value="bar" />
13
          </Field.Group>
14
        </Field.Group>
15
      </Form>
16
    )
17
  }
18
}
Copied!
Serializes into the following JSON:
1
{
2
  "first": {
3
    "fieldOne": "foo",
4
    "second": {
5
      "fieldOne": "bar"
6
    }
7
  }
8
}
Copied!
Escaping of cascading is not currently supported.
Split groups
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.
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
  render() {
7
    return (
8
      <Form>
9
        <Input name="email" value="[email protected]" />
10
​
11
        <Field.Group name="billingAddress">
12
          <Input name="firstName" value="John" />
13
          <Input name="lastName" value="Maverick" />
14
        </Field.Group>
15
​
16
        <Field.Group name="billingAddress">
17
          <Input name="firstName" value="Kate" />
18
          <Input name="lastName" value="Rosewood" />
19
        </Field.Group>
20
​
21
        <Field.Group name="billingAddress">
22
          <Input name="phoneNumber" value="123456789" />
23
        </Field.Group>
24
        
25
        <Field.Group name="deliverAddress">
26
          <Input name="address" value="Baker st." />
27
        </Field.Group>
28
      </Form>
29
    )
30
  }
31
}
Copied!
Serialize into the following JSON:
1
{
2
    "email": "[email protected]",
3
    "billingAddress": {
4
        "firstName": "John",
5
        "lastName": "Maverick",
6
        "phoneNumber": "123456789"
7
    },
8
    "deliveryAddress": {
9
        "firstName": "Kate",
10
        "lastName": "Rosewood",
11
        "address": "Baker st."
12
    }
13
}
Copied!
Exact groups
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.
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
  render() {
7
    return (
8
      <Form>
9
        <Field.Group name="billingAddress">
10
          <Input name="firstName" value="John" />
11
          <Input name="lastName" value="Maverick" />
12
          
13
          <Field.Group exact name="userInfo">
14
            <Input name="phoneNumber" value="+123" />
15
          </Field.Group>
16
        </Field.Group>
17
​
18
        <Field.Group name="userInfo">
19
          <Input name="firstName" value="Kate" />
20
          <Input name="lastName" value="Rosewood" />
21
        </Field.Group>
22
      </Form>
23
    )
24
  }
25
}
Copied!
Serializes into the following JSON:
1
{
2
  "billingAddress": {
3
    "firstName": "John",
4
    "lastName": "Maverick"
5
    // no "userInfo" sub-group
6
  },
7
  "userInfo": {
8
    "firstName": "Kate",
9
    "lastName": "Rosewood",
10
    // exact "userInfo" was merged as split groups
11
    "phoneNumber": "+123"
12
  }
13
}
Copied!

onSubmitEnd

Next - Components

Field

Last modified 2yr ago

Copy link

Contents