# Multiple input type

Sample that shows how to integrate an basic input field for which the survey manager can chose the type and an error message from the answer properties.

```javascript
class MultiTypeInputSampleWidget 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 `<input class="ngs-question__answer-field" type="{{type}}" required id="myField">
      `;
    }

    /* 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;
    }

    /* 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: 'required',
            label: 'Required',
            defaultValue: false,
            type: 'boolean'
        }, {
            id: 'type',
            label: 'type',
            defaultValue: 'text',
            type: 'list',
            list: [{
                    name: 'text',
                    value: 'text'
                },
                {
                    name: 'color',
                    value: 'color'
                },
                {
                    name: 'date',
                    value: 'date'
                },
                {
                    name: 'datetime-local',
                    value: 'datetime-local'
                },
                {
                    name: 'email',
                    value: 'email'
                },
                {
                    name: 'month',
                    value: 'month'
                },
                {
                    name: 'number',
                    value: 'number'
                },
                {
                    name: 'range',
                    value: 'range'
                },
                {
                    name: 'search',
                    value: 'search'
                },
                {
                    name: 'tel',
                    value: 'tel'
                },
                {
                    name: 'time',
                    value: 'time'
                },
                {
                    name: 'url',
                    value: 'url'
                },
                {
                    name: 'week',
                    value: 'week'
                },
            ]
        }, {
            id: 'invalidmessage',
            label: 'Invalid message',
            defaultValue: 'Invalid value',
            type: 'text'
        }];
    }

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

        // 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;
        });

        // Set the inital value when the widget gets created
        if (this.initialValue) {
            this.inputField.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);
        });
    }

    // Post the value to the form
    textChanged(value, widget) {
        widget.setAnswer(this.inputField.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.validity.valid) {
            return this.properties.invalidmessage;
        } else if (this.properties.required && !this.inputField.value) {
            return 'please enter a value';
        } else {
            return null;
        }
    }
}
```