Skip to content

Sections ​

A FieldDescription with section is a titled section instead of a registry-rendered leaf field: data[name] is one object shaped by the nested fields. It is the non-repeating sibling of a group, and every adapter's MultiFieldInput renders it as a <fieldset> with label as its <legend>.

ts
const fields: FieldDescription[] = [
  {
    name: 'address',
    type: 'section', // any type key works; only `section` matters
    label: 'Ship to',
    section: [
      { name: 'street', type: 'text', validate: validators.required() },
      { name: 'city', type: 'text' },
    ],
  },
];

validateFields(fields, { address: { city: 'Hue' } }).errors;
// { 'address.street': ['Field is required'] }
collectFieldPaths(fields, {});
// ['address.street', 'address.city']
  • Paths. Errors, pending rules and touched flags of the fields inside are keyed ${name}.${childName}; inside a group item that reads contacts[0].address.street. serverErrorsFrom already answers in these paths.
  • Conditions. appearCondition, disabled and disabledCondition on the section take all of it out of validation. Inside it, a rule or condition receives the section's object as data and the form as rootData.
  • Data that is not there yet. A section whose value is missing, or is not an object, is read as an empty one.
  • JSON Schema. fieldsFromJsonSchema turns a nested object into a section and fieldsToJsonSchema writes a section as a nested object, with its own properties and required.
  • A key of its own. A section is marked by section, not by a flag beside fields: an adapter that does not know sections then reports an unknown field type instead of rendering a list. When both keys are set, fields wins.

isFieldSection tells a section from the rest, and sectionPathMap(map, name) cuts an error or touched map down to one section, keyed from inside it - what an adapter hands the nested form.

Sections need core and the adapter at 1.11 or newer. With an older core the adapter still renders the section, but the form's validation does not look inside it.

Released under the MIT License.