نوع إدخال متعدد

عينة توضح كيفية دمج حقل إدخال أساسي يمكن لمدير الاستبيان اختيار نوعه ورسالة خطأ من خصائص الإجابة.

class MultiTypeInputSampleWidget extends NGSWidget {
    /* قالب HTML سيتم إنشاؤه قبل إنشاء الكلاس
        سيتم إضافة لاحقة uniqueId إلى جميع المعرفات وأسماء فئات CSS
        المقدمة أثناء إنشاء الودجت */
    static get template() {
        return `<input class="ngs-question__answer-field" type="{{type}}" required id="myField">
      `;
    }

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

    /* الخصائص التي يمكن ضبطها بواسطة مصمم النموذج لكل
     إجابة تستخدم هذا الودجت كنوع إجابة في خصائص الإجابة */
    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() {
        // الحصول على عنصر الإدخال من القالب
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');

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

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

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

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

    // إرسال القيمة إلى النموذج
    textChanged(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // سيتم استدعاؤها بواسطة النموذج
    // لمعرفة ما إذا كانت القيمة صالحة
    // إذا لم تكن صالحة يجب إرجاع '' (لا تظهر رسالة خطأ) أو رسالة الخطأ المراد إظهارها
    // إذا كانت صالحة أرجع 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;
        }
    }
}