redgeoff

import Component from 'mson/lib/component';

class MyComponent extends Component {
  _className = 'MyComponent';

  _create(props) {
    super._create(props);
    this.set({
      schema: {
        component: 'Form',

redgeoff

{
  component: 'RecordList', label: 'Contacts',
  baseFormFactory: {
    component: 'Factory',
    product: {
      component: 'Form',
      fields: [{ name: 'fullName', component: 'PersonFullNameField' }]
    }
  },
  store: { component: 'LocalStorageStore', storeName: 'contacts' }

redgeoff

-- Move up
SET order = order + 1
WHERE
  order >= newOrder
  AND order < oldOrder

-- Move down
SET order = order - 1
WHERE
  order > oldOrder

redgeoff

handleSubmit = () => {
  const { form } = this.state;

  // TODO: Contact some API with the data
  console.log("submitting", form.getValues());

  // Simulate response from API saying that email address is already in use and report this error
  // to the user
  if (form.get("fields.email.value") === "taken@example.com") {

redgeoff

loadValues(form) {
  // Load any initial data, e.g. from an API
  form.setValues({
    id: 'abc123',
    firstName: "Bob",
    lastName: "Marley",
    email: "bob@example.com"
  });
}

redgeoff

  
componentDidMount() {
  const form = compiler.newComponent(definition);
  this.setState({ form });

  this.loadValues(form);
  form.on("submit", this.handleSubmit);
  form.on("reset", this.handleReset);
}

redgeoff

  
validators: [
  {
    where: {
      "fields.email.value": "nope@example.com"
    },
    error: {
      field: "email",
      error: "must not be {{fields.email.value}}"
    }

redgeoff

ReactDOM.render(
  <Component component={form} />,
  document.getElementById("root")
);

redgeoff

form.on("submit", () => alert(JSON.stringify(form.getValues())));

redgeoff

const form = compiler.newComponent({
  component: "Form",
  fields: [
    {
      name: "heading",
      component: "Text",
      text: "# Form using [MSON](https://github.com/redgeoff/mson)"
    },
    {
      name: "fullName",