Champ de base

Exemple montrant comment intégrer un champ de saisie de base avec prise en charge du label et vérification de validité, la valeur saisie sera vérifiée par rapport à 'ngsurvey' et le champ s'étendra en textarea si sa propriété height a été définie à plus de 1 dans le propriété answer page.

class BasicFieldSampleWidget 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 `
        <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 qui sera assigné à ce widget, notez que tous les 
      noms de classes des éléments seront scindés en portée à l'aide de l'id unique du widget */  
    static get style() {
        return `.ngs-widget-field-container {display:flex;flex-direction:row;align-items:center} .flex-auto{flex:1 1 auto}`
    }

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

    /* Permet de rendre la réponse obligatoire ou non
       depuis la page des paramètres de la réponse afin de
       rendre la réponse du widget obligatoire pendant le Sondage */
    static get required() {
        return true;
    }

    /* Propriétés qui peuvent être définies depuis le concepteur de formulaire pour chaque
     answer utilisant ce widget comme type de réponse dans les propriétés de réponse */
    static get propertiesDef() {
        return [{
            id: 'height',
            label: 'height',
            defaultValue: '1',
            type: 'text'
        }];
    }

    init() {
        // Récupérer l'élément input depuis le modèle
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');
        this.inputTextArea = this.widgetQuerySelector('.ngs-question__answer-field-comment');

        // Nous pouvons obtenir les changements de valeur des propriétés à tout moment
        this.getProperties$(prop => {
            this.inputField.style.display = prop.height > 1 ? 'none' : 'block';
            this.inputTextArea.style.display = prop.height > 1 ? 'block' : 'none';
        });

        // Obtenir le mode de rendu actuel 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;
        });

        // Récupère la valeur actuelle du widget
        this.getValue$(value => {
            this.inputField.value = value;
            this.inputTextArea.value = value;
        });

        // Définir la valeur initiale lorsque le widget est créé
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
            this.inputTextArea.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);
        });

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

    // Envoyer la valeur au formulaire
    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);
        }
    }

    // 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 && 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 'La valeur doit être égale à ngsurvey';
        } else {
            return null;
        }
    }
}