Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
const textMachine = Machine({
    id: '1234',
    initial: 'untouched',
    states: {
      untouched: {
        on: {
          BLUR: {
            target: 'touched'
          },
        },
      },
      touched: {
        on: {
          RESET: {
            target: 'untouched',
          },
        },
      },
    }
  });

const validatingEntry = (c) => {
  c.fields.map(field => {
    if (field.type === "text") {
    console.log('sending event to', field)  
    return send('PING', {
    to: field.ref
  })
    }
  })
}
const formMachine = Machine({
    id: 'form',
    initial: 'form',
    context: {
      fieldConfig: [
{name: 'username', type: 'text'},
{name: 'password', type: 'text'},
      ]
    },
    states: {
      form: {
        entry: 'initFields',
        on: {
          VALIDATE: 'validating'
          
        }
      },
      validating: {
        entry: validatingEntry,
        on: {
          RESOLVE: 'valid',
          REJECT: 'invalid'
        }
      },
      valid: {
        type: 'final'
      },
      invalid: {
        type: 'final'
      },
    }
  },{
    actions: {
      'initFields': assign({
        fields: (c) => {
          return c.fieldConfig.map(field => {
            return {
              ...field,
              ref: spawn(textMachine, field.name)
              
            }
          })
        }
      })
    }
  });