حقل أساسي

مثال يوضح كيفية دمج حقل إدخال أساسي مع دعم التسمية وفحص الصلاحية. سيتم فحص القيمة المدخلة مقابل 'ngsurvey' وسيتوسع الحقل إلى منطقة نص إذا تم تعيين الخاصية height إلى قيمة أكبر من 1 في خاصية الإجابة الصفحة.

class BasicFieldSampleWidget extends NGSWidget {
    /* قالب HTML الذي سيتم إنشاؤه قبل إنشاء الفئة
        ستتم إضافة لاحقة uniqueId إلى جميع المعرفات وأسماء فئات CSS
        المقدمة أثناء إنشاء الودجة */
    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>
      `;
    }

    /* الأنماط التي سيتم تعيينها لهذه الودجة، لاحظ أن أسماء فئات 
      العناصر سيتم تحديد نطاقها باستخدام المعرف الفريد للودجة */  
    static get style() {
        return `.ngs-widget-field-container {display:flex;flex-direction:row;align-items:center} .flex-auto{flex:1 1 auto}`
    }

    /* هل تدعم هذه الودجة التسمية؛ التسمية هي النص الذي
     يمكن لمسؤول النموذج إدخاله باستخدام مصمم النموذج ويمكن حقنه في
     القالب باستخدام الوسم <ngs-label></ngs-label>
     */
    static get hasLabel() {
        return true;
    }

    /* يسمح بجعل الإجابة مطلوبة أو لا
       من صفحة إعدادات الإجابة لجعل
       إجابة الودجة مطلوبة أثناء الاستبيان */
    static get required() {
        return true;
    }

    /* الخصائص التي يمكن تعيينها من مصمم النموذج لكل
     إجابة تستخدم هذه الودجة كنمط إجابة في خصائص الإجابة */
    static get propertiesDef() {
        return [{
            id: 'height',
            label: 'height',
            defaultValue: '1',
            type: 'text'
        }];
    }

    init() {
        // الحصول على عنصر الإدخال من القالب
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');
        this.inputTextArea = this.widgetQuerySelector('.ngs-question__answer-field-comment');

        // يمكننا الحصول على تغييرات قيم الخصائص في أي وقت
        this.getProperties$(prop => {
            this.inputField.style.display = prop.height > 1 ? 'none' : 'block';
            this.inputTextArea.style.display = prop.height > 1 ? 'block' : 'none';
        });

        // الحصول على وضع العرض الحالي لمعرفة كيفية
        // إعداد الحالة هنا وجعلها معطلة إذا 
        // كانت الودجة في وضع القراءة فقط 
        this.isDisabled$(disabled => {
            this.inputField.disabled = disabled;
        });

        // الحصول على القيمة الحالية للودجة
        this.getValue$(value => {
            this.inputField.value = value;
            this.inputTextArea.value = value;
        });

        // تعيين القيمة الابتدائية عند إنشاء الودجة
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
            this.inputTextArea.value = this.initialValue;
        }

        // إذا غيّر المستخدم النص تأكد من حفظ القيمة
        // في النموذج   
        this.inputField.addEventListener('input', (event) => {
            this.textChanged(this.inputField.value, this);
        });

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

    // إرسال القيمة إلى النموذج
    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);
        }
    }

    // سيتم استدعاؤها بواسطة النموذج
    // لمعرفة ما إذا كانت القيمة صالحة
    // إذا لم تكن صالحة يجب إرجاع '' (لا يتم عرض رسالة خطأ) أو رسالة الخطأ لعرضها
    // إذا كانت صالحة أعد 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 'Value must be equal to ngsurvey';
        } else {
            return null;
        }
    }
}