Listening for changes

<inform-el /> exposes the following events

• inform-input: similar to the native input event
• inform-change: similar to the native change event

Both events contain a detail field, which is an object with the following fields:

• values : the current form values.
• changedField: the name of the field that changed.

Here is an example:

<inform-el>
    <form>
        <label>
            First Name
            <input type="text" name="firstName" />
        </label>
        <label>
            Last Name
            <input type="text" name="lastName" />
        </label>
        <button type="submit">Submit</button>
    </form>
</inform-el>

<script>
    document.querySelector('inform-el').addEventListener('inform-input', ({ detail: { values, changeField } }) => {
        // After typing 'a' in "First Name":
        console.log('Values:', values); // {firstName: 'a', lastName: ''}
        console.log('Changed field:', changeField); // "firstName"
    });
</script>