Events & Hooks

• Backend Hooks & Events
  • Defining Hooks
  • Subscribing To Events
  • Pushing Response
  • Available Hooks & Events
• Frontend Events & Hooks
  • Subscribe To Events
  • Unsubscribe
  • Registering Element Hooks
  • Custom Events

#Backend Hooks & Events

As we've already discussed in Submitting Data chapter, Laraform has certain hooks and events that are triggered during its data processing. Events and hooks are basically the same, the only thing differentiates them is how they are defined.

#Defining Hooks

To define a hook, simply create a new method with its name in your form class:

<?php

namespace App\Forms;

class Form extends \Laraform
{
  public function schema() {
    // ...
  }

  public function validated() {
    // do something
  }
}

The validated() method will be called once the form's data is validated.

#Subscribing To Events

Subscribing for events has the same effect as creating hooks, but they can be defined inline using on() method:

<?php

namespace App\Forms;

class Form extends \Laraform
{
  public function schema() {
    // ...
  }

  public function boot() {
    $this->on('validated', function(){
      // do something
    });
  }
}

This anonym function will be called when the form's data is validated.

#Pushing Response

In every hooks and event you can anytime send an instant response by using Laravel's send() function on fail() which actually calls Laravel's response() method:

<?php

namespace App\Forms;

class Form extends \Laraform
{
  public function schema() {
    // ...
  }

  public function validated() {
    // ...

    $this->fail('Additional validation failed.')->send();
  }
}

# Available Hooks & Events

The following events are triggered within Laraform:

• validating - before validation starts
• validated - after validation ended
• saving - before data starts being saved
• saved - after data is saved
• inserting - before data starts being inserted
• inserted - after data is inserted
• updating - before data starts being updated
• updated - after data is updated
• loading - before data starts being loaded
• loaded - after data is loaded

#Frontend Events & Hooks

As we've seen in Submitting Data we can listen to certain events on the frontend. Let's look into that a little bit further.

#Subscribe To Events

To register an event listener for the Laraform component or any element, you can simply call the component's .on(event, callback) method.

<script>
  export default {
    mixins: [Laraform],
    data() {
      return {
        schema: {
          name: {
            type: 'text',
            label: 'Name'
          },
          email: {
            type: 'text',
            label: 'Email'
          }
        }
      }
    }
    }),
    mounted() {
      this.on('change', () => {
        // `this.data` has changed
        console.log('data changed')
      })

      this.el$('name').on('change', () => {
        // name element's `data` has changed
        console.log('name changed')
      })
    }
  }
</script>

Via Schema

Alternatively, elements can also register listeners via their schema by using the event name after 'on' (eg. onChange). This will have exactly the same effect as if they were registered with .on() method.

schema: {
  name: {
    type: 'text',
    label: 'Name',
    onChange() {
      // `this.data` has changed
    }
  }
}

Preventing Further Execution

Some events can prevent further execution of the code if they return false.

export default {
  mixins: [Laraform],
  data() {
    return {
      schema: {
        name: {
          type: 'text',
          label: 'Name'
        }
      }
    }
  },
  created() {
    this.on('submit', () => {
      // implement your own submission logic

      return false
    })
  }
}

#Unsubscribe

To unsubscribe all listeners from an event you can call .off(event). This will remove all listeners registered for the event.

#Registering Element Hooks

Hooks are essential parts of each Vue component, known as Instance Lifecycle Hooks.

At a Laraform component these hooks are available just like at any other components as Laraform does not changes the core behavior of any of their components.

Elements however, as they are rendered by Laraform based on their schema involves no actual templates or components created by the user (unless using custom elements), so element hooks can't be created on their template. To still have hooks for elements you can define them in the schema property of any element as if they were at the component:

export default {
  mixins: [Laraform],
  data() {
    return {
      schema: {
        name: {
          type: 'text',
          label: 'Name',
          created() {
            console.log('The element is created')
          }
        }
      }
    }
  },
  created() {
    console.log('The form is created')
  }
}

#Custom Events

Laraform and element components can not only use their built-in events, but you can create your own ones using .on(event, callback) method, while calling .fire(event) to call all callbacks registered for the event.

schema: {
  terms: {
    type: 'checkbox',
    text: 'Accept Terms and Conditions',
    created() {
      this.on('checked', () => {
        console.log('Checkbox was checked')
      })

      this.on('unchecked', () => {
        console.log('Checkbox was unchecked')
      })

      this.on('change', () => {
        if (this.value == true) {
          this.fire('checked')
        } else {
          this.fire('unchecked')
        }
      })
    }
  }
}