feat: introduce template option 'inputClass' to set css classes at in…

…put/select/textarea tags in formly components
intershop · Dec 7, 2021 · 0a7ccaa · 0a7ccaa
1 parent bb1a47c
commit 0a7ccaa
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 7 deletions.
diff --git a/docs/guides/formly.md b/docs/guides/formly.md
@@ -252,6 +252,8 @@ Refer to the tables below for an overview of these parts.
 
 ### Field Types
 
+Template option `inputClass`: These css class(es) will be added to all input/select/textarea tags.
+
 | Name                 | Description                                                                                  | Relevant templateOptions                                                                                                      |
 | -------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | ish-text-input-field | Basic input field, supports all text types                                                   | type: 'text' (default),'email','tel','password'                                                                               |

diff --git a/...order-templates/shared/select-order-template-form/select-order-template-form.component.ts b/...order-templates/shared/select-order-template-form/select-order-template-form.component.ts
@@ -72,6 +72,7 @@ export class SelectOrderTemplateFormComponent implements OnInit {
               type: 'ish-radio-field',
               key: 'orderTemplate',
               templateOptions: {
+                inputClass: 'position-static',
                 fieldClass: ' ',
                 value: 'new',
               },

diff --git a/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts b/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts
@@ -70,6 +70,7 @@ export class SelectWishlistFormComponent implements OnInit {
               type: 'ish-radio-field',
               key: 'wishlist',
               templateOptions: {
+                inputClass: 'position-static',
                 fieldClass: ' ',
                 value: 'new',
               },

diff --git a/src/app/shared/formly/types/checkbox-field/checkbox-field.component.html b/src/app/shared/formly/types/checkbox-field/checkbox-field.component.html
@@ -2,6 +2,7 @@
   type="checkbox"
   [formControl]="formControl"
   [formlyAttributes]="field"
-  [attr.data-testing-id]="field.key"
   class="form-check-input"
+  [ngClass]="to.inputClass"
+  [attr.data-testing-id]="field.key"
 />
diff --git a/src/app/shared/formly/types/radio-field/radio-field.component.html b/src/app/shared/formly/types/radio-field/radio-field.component.html
@@ -1,9 +1,9 @@
 <input
-  class="form-check-input"
-  [ngClass]="{ 'position-static': !to.label }"
   type="radio"
   [formControl]="formControl"
   [value]="to.value"
   [id]="id"
+  class="form-check-input"
+  [ngClass]="to.inputClass"
   [attr.data-testing-id]="'radio-' + to.label"
 />
diff --git a/src/app/shared/formly/types/select-field/select-field.component.html b/src/app/shared/formly/types/select-field/select-field.component.html
@@ -1,9 +1,9 @@
 <select
-  class="form-control"
   [formControl]="formControl"
   [compareWith]="to.compareWith ? to.compareWith : defaultOptions.templateOptions.compareWith"
-  [class.custom-select]="to.customSelect"
   [formlyAttributes]="field"
+  class="form-control"
+  [ngClass]="to.inputClass"
   [attr.data-testing-id]="field.key"
 >
   <ng-container *ngIf="selectOptions && selectOptions | formlySelectOptions: field | async as opts">

diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.html b/src/app/shared/formly/types/text-input-field/text-input-field.component.html
@@ -1,7 +1,8 @@
 <input
   [type]="to.type"
   [formControl]="formControl"
-  class="form-control"
   [formlyAttributes]="field"
+  class="form-control"
+  [ngClass]="to.inputClass"
   [attr.data-testing-id]="field.key"
 />
diff --git a/src/app/shared/formly/types/textarea-field/textarea-field.component.html b/src/app/shared/formly/types/textarea-field/textarea-field.component.html
@@ -2,7 +2,8 @@
   [formControl]="formControl"
   [cols]="to.cols"
   [rows]="to.rows"
-  class="form-control"
   [formlyAttributes]="field"
+  class="form-control"
+  [ngClass]="to.inputClass"
   [attr.data-testing-id]="field.key"
 ></textarea>