Mehrfach-Eingabetyp

Beispiel, das zeigt, wie ein grundlegendes Eingabefeld integriert wird, für das der Umfrage-Manager den Typ und eine Fehlermeldung aus den Antworteigenschaften auswählen kann.

class MultiTypeInputSampleWidget extends NGSWidget {
    /*  HTML-Vorlage, die generiert wird, bevor die Klasse erstellt wird
        Alle IDs und CSS-Klassennamen werden mit der uniqueId versehen
        bei der Erstellung des Widgets bereitgestellt */
    static get template() {
        return `<input class="ngs-question__answer-field" type="{{type}}" required id="myField">
      `;
    }

    /* Unterstützt dieses Widget eine Beschriftung? Die Beschriftung ist der Text, den ein Formular-
     Administrator im Formulardesign eingeben kann und der in die Vorlage eingefügt werden kann
     mithilfe des Tags <ngs-label></ngs-label>
     */
    static get hasLabel() {
        return true;
    }

    /* Eigenschaften, die vom Formulardesigner für jede
     Antwort festgelegt werden können, die dieses Widget als Antworttyp in den Antworteigenschaften verwendet */
    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() {
        // Das Eingabeelement aus der Vorlage abrufen
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');

        // Den aktuellen Render-Modus abrufen, um zu wissen, wie wir
        // den Zustand hier einrichten; deaktivieren, wenn das 
        // Widget im Nur-Lesen-Modus ist 
        this.isDisabled$(disabled => {
            this.inputField.disabled = disabled;
        });

        // Ruft den aktuellen Wert des Widgets ab
        this.getValue$(value => {
            this.inputField.value = value;
        });

        // Den Anfangswert setzen, wenn das Widget erstellt wird
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
        }

        // Wenn der Benutzer den Text ändert, sicherstellen, dass der Wert gespeichert wird
        // im Formular   
        this.inputField.addEventListener('input', (event) => {
            this.textChanged(this.inputField.value, this);
        });
    }

    // Den Wert an das Formular übermitteln
    textChanged(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // Wird vom Formular aufgerufen
    // um zu prüfen, ob der Wert gültig ist
    // Wenn nicht gültig, muss '' (keine Fehlermeldung anzeigen) oder die anzuzeigende Fehlermeldung zurückgegeben werden
    // Wenn er gültig ist, null zurückgeben 
    isValid() {
        if (!this.inputField.validity.valid) {
            return this.properties.invalidmessage;
        } else if (this.properties.required && !this.inputField.value) {
            return 'Bitte einen Wert eingeben';
        } else {
            return null;
        }
    }
}