Basisfeld

Beispiel, das zeigt, wie ein einfaches Eingabefeld mit Beschriftungsunterstützung und Gültigkeitsprüfung integriert wird. Der eingegebene Wert wird gegen 'ngsurvey' geprüft und das Feld erweitert sich zu einem Textbereich, wenn seine height-Eigenschaft im answer property Seite finden.

class BasicFieldSampleWidget extends NGSWidget {
    /*  HTML-Vorlage, die generiert wird, bevor die Klasse erstellt wird
        Alle IDs und CSS-Klassennamen werden mit der uniqueId versehen,
        die bei der Erstellung des Widgets übergeben wird */
    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>
      `;
    }

    /* Stil, der diesem Widget zugewiesen wird. Beachten Sie, dass alle 
      Elementklassen mit der eindeutigen Widget-ID abgegrenzt werden */  
    static get style() {
        return `.ngs-widget-field-container {display:flex;flex-direction:row;align-items:center} .flex-auto{flex:1 1 auto}`
    }

    /* Unterstützt dieses Widget eine Beschriftung? Die Beschriftung ist der Text, den ein Formularadministrator
     im Formular-Designer eingeben kann und der in
     der Vorlage mit dem <ngs-label></ngs-label>-Tag eingefügt werden kann
     */
    static get hasLabel() {
        return true;
    }

    /* Ermöglicht, die Antwort als erforderlich festzulegen oder nicht,
       über die Antwort-Einstellungsseite, um
       die Widget-Antwort während der Umfrage erforderlich zu machen */
    static get required() {
        return true;
    }

    /* Eigenschaften, die im Formular-Designer für jede
     Antwort gesetzt werden können, die diesen Widget-Typ als Antwort verwendet, in den Antwort-Eigenschaften */
    static get propertiesDef() {
        return [{
            id: 'height',
            label: 'height',
            defaultValue: '1',
            type: 'text'
        }];
    }

    init() {
        // Holen Sie das Eingabeelement aus der Vorlage
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');
        this.inputTextArea = this.widgetQuerySelector('.ngs-question__answer-field-comment');

        // Wir können jederzeit Änderungen der Eigenschaftswerte erhalten
        this.getProperties$(prop => {
            this.inputField.style.display = prop.height > 1 ? 'none' : 'block';
            this.inputTextArea.style.display = prop.height > 1 ? 'block' : 'none';
        });

        // Ermitteln Sie den aktuellen Render-Modus, um zu wissen, wie wir
        // hier den Zustand einstellen sollten; machen Sie ihn deaktiviert, wenn 
        // das Widget im Nur-Lese-Modus ist 
        this.isDisabled$(disabled => {
            this.inputField.disabled = disabled;
        });

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

        // Setzen Sie den Anfangswert, wenn das Widget erstellt wird
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
            this.inputTextArea.value = this.initialValue;
        }

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

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

    // Übermittle den Wert an das Formular
    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);
        }
    }

    // Wird vom Formular aufgerufen,
    // um zu prüfen, ob der Wert gültig ist
    // Wenn nicht gültig, muss '' zurückgegeben werden (keine Fehlermeldung wird angezeigt) oder die anzuzeigende Fehlermeldung
    // Wenn gültig, geben Sie null zurück 
    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;
        }
    }
}