zj.js

/*
 * Form data structure:
 * {
 *     first_name: '',
 *     address: {
 *         street_address: '',
 *         city: '',
 *         state: '',
 *         zip_code: '',
 *     },
 *     favorite_colors: [
 *         'blue',
 *         'green',
 *     ],
 *
 *     variations: [
 *       { id, name },
 *     ]
 * }
 */

// To access a normal field
const firstNameField = form.field('first_name');

// To access a nested field
const streetAddressField = form.field(['address', 'street_address']);

// To access a repeated, nested field
const firstFavoriteColorField = form.field(['address', 'street_address', 0]);

// add valiation, get values, validate
const streetAddressField = form.field(['address', 'street_address']);

// all of these interfaces should be similiar
form
form.field('address')
form.field('address').field('street_address')
// errors
{
    hasError: true,

    details: {
      address: {
        street_address: {
          invalidThing: 'some error message'
        }
      }
      'address.street_address': {
        hasError: bool,
        message: '',
        details: {
        }
      }
    }
}

// at the root level
{
    hasError: true,
    message: '',//wtf
    details: {
      // it means that validators were put on the root
    },
    childErrors: {
      [keyToChild]: {
        details,
        message,
        hasError
      }
    }
}
// the form and field have different error object

// how are people going to use `getErrors` called at
// 1. root
// 2. first child
// 3. deep child
//
const firstFavoriteColorField = form.field(['variations', 0]);
form.field(['variations', 0]).validators;
form.field(['variations', 0, 'name']).validators;