مرجع API

إليك العقد الكامل لـ forms: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.

المدخلات

اضبط forms عبر 14 مدخلات. اربطها مثل أي @Input في Angular.

الاسم	النوع	الافتراضي	الوصف
`formControlName / [formControl]`	`string \| FormControl`	—	يربط أي حقل بعنصر تحكم تفاعلي. تظهر الأخطاء تلقائيًا عندما يكون عنصر التحكم touched وغير صالح.
`label`	`string`	`''`	نص تسمية الحقل.
`labelType`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	موضع التسمية.
`placeholder`	`string`	`''`	نص العنصر النائب.
`formText`	`string`	—	نص مساعد يظهر أسفل عنصر التحكم.
`type (hub-input)`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	تنسيق hub-input.
`prepend / append (hub-input)`	`string \| string[]`	—	نص الإضافة لمجموعة الإدخال قبل / بعد عنصر التحكم.
`mask (hub-input)`	`string`	—	قناع نمط لتنسيقات النص. الرموز: 0 = رقم، A = حرف، * = أبجدي رقمي؛ الأحرف الأخرى فواصل حرفية. مثال: "0000 0000 0000 0000".
`unmaskValue (hub-input)`	`boolean`	`false`	عند ضبط قناع، خزّن الأحرف المكتوبة الخام (بلا فواصل) في النموذج بدلًا من النص المنسّق.
`range (hub-slider)`	`boolean`	`false`	شريط تمرير نطاق بمقبضين؛ تصبح القيمة صفًا [lower, upper].
`format (hub-select)`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	كيفية عرض select للقيمة ذاتها.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	الخيارات، وأسماء خصائص label/value لعناصر الكائنات، والاختيار المتعدد.
`mode (hub-datepicker)`	`'single' \| 'range'`	`'single'`	تاريخ مفرد أو نطاق تواريخ.
`min / max / disabledDates (hub-datepicker)`	`string \| Date / (date) => boolean`	—	حدود التواريخ القابلة للاختيار ودالة تعطيل لكل تاريخ.

المخرجات

تفاعل مع ما يفعله forms — 4 أحداث لربط منطقك بها.

الاسم	النوع	الوصف
`valueChange`	`EventEmitter<value>`	يُطلَق كلما تغيّرت قيمة الحقل.
`submit (form[hubForm])`	`EventEmitter<void>`	يُطلَق عند الإرسال، بعد وسم الشجرة بأنها touched.
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	أحداث دورة حياة التقويم والتنقل.
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	أحداث دورة حياة القائمة المنسدلة والوسوم/الإكمال التلقائي.

القوالب

اجعله خاصاً بك — 4 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.

الاسم	الوصف	مثال
`hubFormText`	اعرض محتوى نص مساعد غني.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	تجاوز الرسالة لمفتاح خطأ معيّن.	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	محتوى وسيلة إيضاح fieldset مخصص.	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	عرض مخصص لخيارات القائمة المنسدلة (موجِّه ng-select المُعاد تصديره).	`<ng-template ng-option-tmp let-item="item">…</ng-template>`

متغيّرات CSS

نسّق كل بكسل عبر 17 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.

رموز الحقول المشتركة

العناصر المشتركة بين كل حقل: التسمية والنص المساعد وتغذية التحقق الراجعة وحلقة التركيز.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium)`	string	وزن تسمية الحقل.
`--hub-form-feedback-color`	`var(--hub-sys-color-danger)`	color	لون نص خطأ التحقق.
`--hub-form-text-color`	`var(--hub-sys-text-muted)`	color	لون النص المساعد.
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color)`	color	لون حلقة التركيز.
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger)`	color	لون حدود عنصر التحكم غير الصالح.

input

مظهر عنصر التحكم النصي المشترك بين input وtextarea ومُشغِّل select.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-input-bg`	`var(--hub-sys-surface-page)`	color	خلفية عنصر التحكم.
`--hub-input-border-color`	`var(--hub-sys-border-color-default)`	color	لون حدود عنصر التحكم.
`--hub-input-border-radius`	`var(--hub-ref-radius-md)`	length	نصف قطر استدارة حدود عنصر التحكم.
`--hub-input-padding-y`	`0.375rem`	length	الحشو الرأسي لعنصر التحكم.
`--hub-input-padding-x`	`0.75rem`	length	الحشو الأفقي لعنصر التحكم.
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary)`	color	لون الحدود عند التركيز.

select وslider وdatepicker

تمييزات خاصة بالمكوّن ترتبط برموز النظام.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary)`	color	خلفية خيار القائمة المنسدلة المحدَّد.
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated)`	color	خلفية شريحة التحديد المتعدد.
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary)`	color	الجزء الممتلئ من مسار slider.
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary)`	color	لون مقبض slider.
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary)`	color	خلفية يوم التقويم المحدَّد.
`--hub-daterangepicker-in-range-bg`	`color-mix(in srgb, var(--hub-sys-color-primary) 14%, transparent)`	color	خلفية يوم التقويم ضمن النطاق.

التنسيق والسمات

لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.