forms/nested

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Property paths syntax for nested fields

Property paths are used as the first argument to form handlers to target nested properties. They use dot notation for object properties and numeric indices for arrays. For example, 'user.firstName' targets the firstName property of the user object, and 'fruits.1.name' targets the name property of the object at index 1 in the fruits array. Deeply nested structures use chained notation like 'deeply.nested.object.0.item'.

getInputProps with nested property path

The form.getInputProps() method accepts a property path string to target nested fields. For example, form.getInputProps('user.firstName') returns props for the input controlled by the firstName field nested within the user object.

setFieldValue for individual nested fields

The form.setFieldValue() method can set values for individual nested fields using property path syntax. For example, form.setFieldValue('user.name', 'John') sets the name property of the user object, and form.setFieldValue('fruits.1.name', 'Carrot') sets the name of the fruit at index 1.

setFieldValue for entire nested object

The form.setFieldValue() method can set an entire nested object at once. For example, form.setFieldValue('user', { name: 'Jane', occupation: 'Architect' }) replaces the entire user object with new values.

validateField for nested properties

The form.validateField() method accepts a property path to validate a single nested field. For example, await form.validateField('deeply.nested.object.0.item') validates the item property at index 0 of the deeply nested object array.

Nested object value validation configuration

The validate configuration option for useForm can define validation rules for nested objects using nested object structure. Rules are defined as a nested object matching the structure of initialValues. For example, validate: { user: { name: (value) => value.length < 2 ? 'Name is too short' : null } } validates the name field within the user object.

Nested object validation errors format

When validating nested objects with form.validate() or form.validateField(), error keys use property path notation. For example, validation errors for a nested user object appear as { 'user.name': 'Name is too short', 'user.occupation': 'Occupation is too short' }.

List item handlers in useForm

The useForm hook provides four handlers to manage list state: removeListItem removes a list item at the given index; insertListItem inserts a list item at the given index (appends to the end if index is not specified); reorderListItem reorders a list item with the given position at the specified field; replaceListItem replaces a list item at the given index with a new value.

Nested array value validation configuration

The validate configuration option for useForm can define validation rules for items in nested arrays. Rules are defined as a nested object under the array property name, with validation functions for each field. For example, validate: { users: { name: (value) => value.length < 2 ? 'Name should have at least 2 letters' : null, age: (value) => value < 18 ? 'User must be 18 or older' : null } } validates each field of every user object in the users array.

Nested array validation errors format

When validating nested arrays with form.validate() or form.validateField(), error keys use property path notation with array indices. For example, validation errors for a users array appear as { 'users.0.age': 'User must be 18 or older', 'users.1.name': 'Name should have at least 2 letters' } where the numeric index indicates which array item the error applies to.

Nested arrays example with useForm

Example showing useForm with nested array configuration: ```tsx import { useForm } from '@mantine/form'; const form = useForm({ mode: 'uncontrolled', initialValues: { users: [ { name: 'John', age: 12 }, { name: '', age: 22 }, ], }, validate: { users: { name: (value) => value.length < 2 ? 'Name should have at least 2 letters' : null, age: (value) => value < 18 ? 'User must be 18 or older' : null, }, }, }); await form.validateField('users.1.name'); await form.validate(); ``` This example demonstrates creating a form with nested array of user objects, configuring validation rules for each field, and validating individual array items or all fields.

Nested objects example with useForm

Example showing useForm with nested object configuration: ```tsx import { useForm } from '@mantine/form'; const form = useForm({ mode: 'uncontrolled', initialValues: { user: { firstName: 'John', lastName: 'Doe', }, fruits: [ { name: 'Banana', available: true }, { name: 'Orange', available: false }, ], deeply: { nested: { object: [{ item: 1 }, { item: 2 }], }, }, }, }); form.getInputProps('user.firstName'); form.setFieldValue('fruits.1.name', 'Carrot'); await form.validateField('deeply.nested.object.0.item'); ``` This example demonstrates creating a form with various nested structures including objects, arrays, and deeply nested combinations, and shows how to access, modify, and validate these nested fields.

Set nested object value example

Example showing different ways to set nested object values: ```tsx import { useForm } from '@mantine/form'; const form = useForm({ mode: 'uncontrolled', initialValues: { user: { name: '', occupation: '', }, }, }); form.setFieldValue('user.name', 'John'); form.setFieldValue('user.occupation', 'Engineer'); form.setFieldValue('user', { name: 'Jane', occupation: 'Architect' }); ``` This example shows both setting individual fields within a nested object and replacing the entire object at once.

Nested object value validation example

Example showing validation configuration for nested objects: ```tsx import { useForm } from '@mantine/form'; const form = useForm({ mode: 'uncontrolled', initialValues: { user: { name: '', occupation: '', }, }, validate: { user: { name: (value) => value.length < 2 ? 'Name is too short' : null, occupation: (value) => value.length < 2 ? 'Occupation is too short' : null, }, }, }); await form.validate(); form.errors; // -> { 'user.name': 'Name is too short', 'user.occupation': 'Occupation is too short' } ``` This example demonstrates defining validation rules for nested object properties and shows how validation errors are keyed with property paths.

Give your agent this brain