form2.js

import { Button, ButtonRow, Code, Input, Label } from 'optimizely-oui';
import Immutable from 'optly/immutable';
import PropTypes from 'prop-types';
import React from 'react';
import regexUtils from 'optly/utils/regex';
import { toImmutable } from 'nuclear-js';

import VariationFieldRow from './VariationFieldRow'

@Form({
})
class MyForm extends React.Component {
  constructor(props) {
    super(props);

    const { form } = this.props
    form.field('name')
      .validators({
        isRequired: (name) => {
          if (!name) {
            return 'Is Required'
          }
        },
      })
  }

  render() {
    const { form } = this.props

    const nameField =  form.field('name')
    return (
      <form action="">
        <Input
          type="text"
          testSection="oasis-config-event-key"
          value={ nameField.getValue() }
          onChange={ (e) => nameField.setValue(e.target.value) }
          label='Event Key'
          displayError={ hasError }
          note={ message }
        />
        <VariationsTable field={form.repeatedField('variations') }/>
      </form>
    );
  }
}

class VariationsTable extends React.Component {
  constructor(props) {
    super(props);

    const { field } = this.props;

    /**
     * ['variations',0,'name']: {
     *   hasError: true,
     *   details: {
     *     isRequired: 'This is required'
     *   }
     * }
     */
    field.setupItemValidators(item => {
      // item.field.validators => parentNode's itemValidators
      // ['variations', 0, 'name']
      item.field('name').validators({
        isRequired: (name) => {
          if (!name) {
            return 'Is Required'
          }
        }
      })

      // its probably fine to not support this use case
      // ['variations', 0, 'tags', 0]
      item.repeatedField('tags').setupItemValidators(field => {
        field.field('name').validators({

        })
      })
    })

    field.itemValidators({
      name: {
        isRequired: (name) => {
          if (!name) {
            return 'Is Required'
          }
        }
      },
    })
  }

  render() {
    return (
      <div>
        { field.mapItems((value, ind, wrapper) => (
          <VariationRow field={wrapper}></VariationRow>
        )) }
      </div>
    )
  }
}