Basic Field

Sample that shows how to integrate a basic input field with label support and validity check ,the value entered will be checked against 'ngsurvey' and the field will expand to a textarea if its height property has been set to higher than 1 in the answer property page.

class BasicFieldSampleWidget extends NGSWidget {
    /*  Html template that will generate before class gets created
        All id's and css classes name will be suffixed by the uniqueId
        provided during creation of the widget */
    static get template() {
        return `
        <ngs-label></ngs-label>
      <div class="ngs-widget-field-container">
        <input class="ngs-question__answer-field" type="text" id="myField">
        <textarea rows="{{height}}" class="ngs-question__answer-field ngs-question__answer-field-comment"></textarea>
      </div>
      `;
    }

    /* Style that will be assigned to this widget, note that all 
      elements class names will be scoped using the widget unique id */  
    static get style() {
        return `.ngs-widget-field-container {display:flex;flex-direction:row;align-items:center} .flex-auto{flex:1 1 auto}`
    }

    /* Does this widget support label, the label is the text a form
     admin can enter using the form design and can be injected in
     the template using the <ngs-label></ngs-label> tag
     */
    static get hasLabel() {
        return true;
    }

    /* Allows the answer to be set required or not
       from the answer settings page to make
       the widget answer required during survey */
    static get required() {
        return true;
    }

    /* Properties that can be set in from the form designer for each
     answer using this widget as an answer type in the answer properties */
    static get propertiesDef() {
        return [{
            id: 'height',
            label: 'height',
            defaultValue: '1',
            type: 'text'
        }];
    }

    init() {
        // Get the input element from the template
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');
        this.inputTextArea = this.widgetQuerySelector('.ngs-question__answer-field-comment');

        // We can get property value changes at any time
        this.getProperties$(prop => {
            this.inputField.style.display = prop.height > 1 ? 'none' : 'block';
            this.inputTextArea.style.display = prop.height > 1 ? 'block' : 'none';
        });

        // Get the current render mode to know how we should
        // setup the state here make it disabled if the 
        // widget is in read only mode 
        this.isDisabled$(disabled => {
            this.inputField.disabled = disabled;
        });

        // Gets the current value of the wdiget
        this.getValue$(value => {
            this.inputField.value = value;
            this.inputTextArea.value = value;
        });

        // Set the inital value when the widget gets created
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
            this.inputTextArea.value = this.initialValue;
        }

        // If the user changes the text make sure to save the value
        // in the form   
        this.inputField.addEventListener('input', (event) => {
            this.textChanged(this.inputField.value, this);
        });

        this.inputTextArea.addEventListener('input', (event) => {
            this.textChanged(this.inputTextArea.value, this);
        });
    }

    // Post the value to the form
    textChanged(value, widget) {
        if (widget.inputField && widget.inputField.style.display == 'block') {
            widget.setAnswer(this.inputField.value);
        } else if (widget.inputTextArea && widget.inputTextArea.style.display == 'block') {
            widget.setAnswer(this.inputTextArea.value);
        }
    }

    // Will be called by the form
    // to see if the value is valid
    // If not valid must return '' (no error message shown) or the error message to show
    // If its valid return null 
    isValid() {
        if ((this.inputField && this.inputField.style.display == 'block' && this.inputField.value && this.inputField.value != 'ngsurvey') ||
            (this.inputTextArea && this.inputTextArea.style.display == 'block' && this.inputTextArea.value && this.inputTextArea.value != 'ngsurvey')) {
            return 'Value must be equal to ngsurvey';
        } else {
            return null;
        }
    }
}