مكتبة نماذج Angular | ng-hub-ui-forms

حقول نماذج Angular يمكن الوصول إليها (input وtextarea وslider وselect وdatepicker) مع عرض تلقائي لأخطاء عنصر التحكم والمجموعة والنموذج، ونماذج تفاعلية ومتغيرات CSS.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

استخدم مكتبة نماذج Angular هذه عندما تحتاج إلى حقول يمكن الوصول إليها مع عرض تلقائي لأخطاء التحقق، ونسخة معدّلة من ng-select، وdatepicker مبني من الصفر، وتنسيق عبر متغيرات CSS في وقت التشغيل — دون Bootstrap.

التثبيت

npm install ng-hub-ui-forms

انتقل إلى

مثالي لـ

  • نماذج التسجيل والدفع
  • صفحات الإعدادات
  • الفلاتر والبحث
  • لوحات تحكم الإدارة

حول forms

توحّد ng-hub-ui-forms كل حقل نموذج خلف عقد واحد: اربطه بالنماذج التفاعلية وتظهر الأخطاء المطابقة تلقائيًا على مستوى عنصر التحكم والمجموعة والنموذج. الحقول standalone وتعمل بنمط OnPush وأصيلة لـ Signals؛ وحقل select هو نسخة معدّلة ومُصانة من ng-select منسّقة برموز hub؛ وحقل datepicker مبني على Date الأصلي وطبقة overlay الخاصة بـ Angular CDK. يُنسّق كل شيء عبر متغيرات CSS القانونية ‎--hub-*‎ مع وضع داكن في وقت التشغيل.

أدلّة الميزات

حقول النص

حقل `hub-input` مع ربط بالنماذج التفاعلية وعرض تلقائي للأخطاء دون أي تمديد. نص وبريد وكلمة مرور ورقم وعدّاد، إضافةً إلى التسميات العائمة وملحقات input-group.

أمثلة:
حقول النص والأخطاء التلقائية

حقول النص والأخطاء التلقائية

We'll never share it.
الأرقام والعدّاد واللون والمفتاح ومربع الاختيار

الأرقام والعدّاد واللون والمفتاح ومربع الاختيار

مجموعات الإدخال والملفات والتسمية العائمة

مجموعات الإدخال والملفات والتسمية العائمة

$.00
@
No file selected
أقنعة الأنماط (البطاقة، IBAN، الهاتف، التاريخ)

أقنعة الأنماط (البطاقة، IBAN، الهاتف، التاريخ)

Form value: { "card": "", "expiry": "", "iban": "", "phone": "", "date": "" }

إدخال رمز لمرة واحدة (OTP)

إدخال رمز لمرة واحدة (OTP)

Paste the 6-digit code we sent you.

Form value: { "code": "", "pin": "", "coupon": "" }

متعدّد الأسطر ونطاق

مناطق نصّية تنمو تلقائياً مع عدّادات أحرف، ومنزلقات نطاق بإبهام مفرد / مزدوج.

أمثلة:
منطقة نص مع عدّاد وتغيير حجم تلقائي

منطقة نص مع عدّاد وتغيير حجم تلقائي

0 / 160
Grows as you type.
Slider ونطاق بمقبضين

Slider ونطاق بمقبضين

Dual-thumb range.

الاختيار

محرّك ng-select المتفرّع المنسّق برموز hub، إضافةً إلى صيغ button وradio وcheckbox التي تعرض واجهتها الخاصة لنفس القيمة.

أمثلة:
التحديد والتحديد المتعدد

التحديد والتحديد المتعدد

Select a country
Pick some tags
خيارات مجمّعة

خيارات مجمّعة

Select a city
بحث فوري أثناء الكتابة

بحث فوري أثناء الكتابة

Type to filter…
Search and add…
قوالب مخصّصة للخيار والتسمية

قوالب مخصّصة للخيار والتسمية

Pick a teammate
تنسيقات الأزرار وأزرار الاختيار ومربعات الاختيار

تنسيقات الأزرار وأزرار الاختيار ومربعات الاختيار

انتقاء التاريخ

منتقي تاريخ / نطاق مبني من الصفر على Date الأصلي + CDK Overlay، مع حدود وتنقّل بلوحة المفاتيح وi18n كامل.

أمثلة:
Datepicker ونطاق

Datepicker ونطاق

No future dates.
Date range.

الحاويات والتحقّق

تُظهِر `form[hubForm]` و`hub-fieldset` و`hub-legend` أخطاء مستوى المجموعة ومستوى النموذج (عبر الحقول) تلقائياً — بنفس الطريقة التي تُظهِر بها الحقول أخطاء عناصر التحكّم.

أمثلة:
الحاويات وأخطاء الحقول المتقاطعة

الحاويات وأخطاء الحقول المتقاطعة

Password

الميزات الرئيسية

التغييرات الأخيرة

Version 21.0.0 - 6/13/26, 12:00 AM

added: Initial release: hub-input (10 formats), hub-textarea, hub-slider (single + range), hub-select (dropdown + buttons/radio/checkbox), hub-datepicker (single + range), hub-form/hub-fieldset/hub-legend containers.

added: Automatic validation-error display at control, group and form level, with provideHubForms() configuration.

المكتبات ذات الصلة

ng-hub-ui-utils ng-hub-ui-modal ng-hub-ui-calendar