form_example_complex.js

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import { Input, Button } from 'optimizely-oui'

import { fns as ComponentModuleFns } from 'bundles/p13n/sections/oasis_experiment_manager/components/experiment_dialog/component_module';

function isRequired(val) {
  if (!val) {
    return {
      hasError: true,
      details: {
        msg: 'API Name is required',
      }
    }
  }
}

function isValidApiName(val) {
  const isValid = ComponentModuleFns.ensureExperimentKeyValid(val);
  if (!isValid) {
    return {
      hasError: true,
      details: {
        msg: 'API Name in invalid',
      }
    }
  }
}


/**
 * A wrapped OUI <Input> that handles common api name validation
 */
export default class ApiNameFormInput extends React.Component {
  static propTypes = {
    formField: PropTypes.shape({
      addValidationFn: PropTypes.func,
      getValue: PropTypes.func,
      setValue: PropTypes.func,
      getErrors: PropTypes.func,
    }),
  }

  constructor(props) {
    super(props);
    // form validation is defined at the input level
    props.formField
      // for validation fns that override the same key this is the order they will happen
      .addValidationFn(isRequired)
      .addValidationFn(isValidApiName)
  }

  render() {
    const { formField } = this.props;
    const errors = formField.getErrors();

    // form validation is defined at the input level
    return (
      <div>
        <Input
          label='API Name'
          displayError={ errors.hasError }
          note={ errors.details.msg }
          value={ formField.getValue() }
          onChange={ (e) => formField.setValue(e.target.value) }
        />
      </div>
    )
  }
}