FieldListener

Every time a field is registered with the widget a new FieldListener object is created. This object is what sets up the DOM for the field as well as holding the field's state. It contains several properties and methods that can be used for very low-level access to the field.

_error

This property will be set to false when no errors are present or it will be set to a string containing a relevant​ error message.

_lastValue

This property is used to prevent reverifying an email that has just been verified. Every time an API request is made the value that's being verified is set in this property. The next time the field is changed we'll verify the contents of the field is different than the value of this property.

_request

When an API request is currently being transmitted the request object will live here. To cancel an active request this property can be called as a function.

// Cancel an active request if it exists
if (obj._request) 
  obj._request();

_response

Initially, this property will be set to false. After a request to the API is attempted it will contain a Result object.

_timeout

This property contains the timeout used to defer the API requests until the user has stopped typing. If a timeout isn't currently active the property will be set to false.

The deferment time is set by the inputLatency option during setup.

id

The id is a universally unique identifier generated for this particular field. It can be used to find the DOM node for the field or the form containing the field.

// Get the field
let field = document.querySelector('[data-nb-id="' + event.detail.id + '"]');

// Get the form
var form = document.querySelector('form[data-nb-form="' + id + '"]');

forceUpdate()

This method allows you to programmatically invoke the onChange handler attached to the field. This will skip any inputLatency checks that the onChange handler typically performs. Below is an excerpt containing the private method that forceUpdate invokes.

/**
 * Handles the actual event actions
 * Typically called after doing some input filtering from the onChange 
 * event emitted by the field, but can also be called by forceUpdate()
 *
 * @param app The instance of FieldListener for the field
 * @param ele The DOM node for the field were working with
 */
function onChangeHandler(app, ele) {
    const value = ele.value;

    // Perform soft regex test before attempting api call
    const rgx = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (rgx.test(value)) {

        // If this is the same email as the last request, lets skip the check
        if (app._response( === false || app._lastValue !== value) {

            ele.dispatchEvent(nbEvent('loading', app));
            app._lastValue = value;
            app._request = api.getValidatePublic(value,
                function (result) {
                    app._response = result;
                    app._error = false;
                    ele.dispatchEvent(nbEvent('result', app));
                }.bind(app),
                function (err) {
                    app._response = new Result({result: 'error'});
                    app._error = err;
                    ele.dispatchEvent(nbEvent'clear', app));
                }.bind(app)
            );

        } else {
            ele.dispatchEvent(nbEvent('result', app));
        }
    } else {
        ele.dispatchEvent(nbEvent('soft-result', app));
    }
}

destroy()

This method will remove the event listeners the widget attached to the field and form as well as remove changes it made to the DOM.

This method is called by fields.unregisterListener(ele).