Type de saisie multiple

Exemple montrant comment intégrer un champ de saisie basique pour lequel le gestionnaire de Sondage peut choisir le type et un message d'erreur depuis les propriétés de la réponse.

class MultiTypeInputSampleWidget extends NGSWidget {
    /*  Modèle HTML qui sera généré avant la création de la classe
        Tous les id et noms de classes CSS seront suffixés par l'uniqueId
        fourni lors de la création du widget */
    static get template() {
        return `<input class="ngs-question__answer-field" type="{{type}}" required id="myField">
      `;
    }

    /* Ce widget prend-il en charge un label, le label est le texte qu'un
     administrateur de formulaire peut saisir via le concepteur de formulaire et qui peut être injecté dans
     le modèle en utilisant la balise <ngs-label></ngs-label>
     */
    static get hasLabel() {
        return true;
    }

    /* Propriétés qui peuvent être définies par le concepteur de formulaire pour chaque
     réponse utilisant ce widget comme type de réponse dans les propriétés de réponse */
    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() {
        // Récupérer l'élément input depuis le modèle
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');

        // Récupérer le mode de rendu courant pour savoir comment nous devons
        // configurer l'état ici, le rendre désactivé si le 
        // widget est en mode lecture seule 
        this.isDisabled$(disabled => {
            this.inputField.disabled = disabled;
        });

        // Obtient la valeur actuelle du widget
        this.getValue$(value => {
            this.inputField.value = value;
        });

        // Définir la valeur initiale lorsque le widget est créé
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
        }

        // Si l'utilisateur modifie le texte, assurez-vous d'enregistrer la valeur
        // dans le formulaire   
        this.inputField.addEventListener('input', (event) => {
            this.textChanged(this.inputField.value, this);
        });
    }

    // Poster la valeur au formulaire
    textChanged(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // Sera appelé par le formulaire
    // pour vérifier si la valeur est valide
    // Si non valide doit retourner '' (aucun message d'erreur affiché) ou le message d'erreur à afficher
    // Si c'est valide retourner 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;
        }
    }
}