feat(bootstrap): support floating labels

fix #3265 BREAKING CHANGE: To customize style of bootstrap types rely on `formly-wrapper-form-field` instead of the following selectors: - `formly-wrapper-addons` - `formly-field-checkbox` - `formly-field-input` - `formly-field-multicheckbox` - `formly-field-radio` - `formly-field-select` - `formly-field-textarea`
ngx-formly · May 21, 2022 · 7c4c64c · 7c4c64c
1 parent 8f9d9aa
commit 7c4c64c
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 168 deletions.
diff --git a/UPGRADE-6.0.md b/UPGRADE-6.0.md
@@ -241,7 +241,14 @@ export class AppModule {}
   + onClick: (field, $event) => ...,
   ```
 
-
+- The following selectors are no longer used to customize bootstrap types instead rely on `formly-wrapper-form-field`:
+  - `formly-wrapper-addons`
+  - `formly-field-checkbox`
+  - `formly-field-input`
+  - `formly-field-multicheckbox`
+  - `formly-field-radio`
+  - `formly-field-select`
+  - `formly-field-textarea`
 
 @ngx-formly/ionic
 -----------------

diff --git a/src/ui/bootstrap/addons/src/addons.component.html b/src/ui/bootstrap/addons/src/addons.component.html
@@ -1,23 +1,23 @@
-<div class="input-group" [class.has-validation]="showError">
-  <div
-    class="input-group-text"
-    *ngIf="props.addonLeft"
-    [class.input-group-btn]="props.addonLeft.onClick"
-    (click)="addonLeftClick($event)"
-  >
-    <i [ngClass]="props.addonLeft.class" *ngIf="props.addonLeft.class"></i>
-    <span *ngIf="props.addonLeft.text">{{ props.addonLeft.text }}</span>
-  </div>
-  <div class="input-addons">
+<ng-template #fieldTypeTemplate>
+  <div class="input-group" [class.has-validation]="showError">
+    <div
+      class="input-group-text"
+      *ngIf="props.addonLeft"
+      [class.input-group-btn]="props.addonLeft.onClick"
+      (click)="addonLeftClick($event)"
+    >
+      <i [ngClass]="props.addonLeft.class" *ngIf="props.addonLeft.class"></i>
+      <span *ngIf="props.addonLeft.text">{{ props.addonLeft.text }}</span>
+    </div>
     <ng-container #fieldComponent></ng-container>
+    <div
+      class="input-group-text"
+      *ngIf="props.addonRight"
+      [class.input-group-btn]="props.addonRight.onClick"
+      (click)="addonRightClick($event)"
+    >
+      <i [ngClass]="props.addonRight.class" *ngIf="props.addonRight.class"></i>
+      <span *ngIf="props.addonRight.text">{{ props.addonRight.text }}</span>
+    </div>
   </div>
-  <div
-    class="input-group-text"
-    *ngIf="props.addonRight"
-    [class.input-group-btn]="props.addonRight.onClick"
-    (click)="addonRightClick($event)"
-  >
-    <i [ngClass]="props.addonRight.class" *ngIf="props.addonRight.class"></i>
-    <span *ngIf="props.addonRight.text">{{ props.addonRight.text }}</span>
-  </div>
-</div>
+</ng-template>
diff --git a/src/ui/bootstrap/addons/src/addons.component.scss b/src/ui/bootstrap/addons/src/addons.component.scss
@@ -1,20 +1,3 @@
-:host ::ng-deep .input-group > {
-  .input-group-btn {
-    cursor: pointer;
-  }
-
-  :not(:first-child) .form-control {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  :not(:last-child) .form-control {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .input-addons {
-    position: relative;
-    flex: 1 1 auto;
-    width: 1%;
-    margin-bottom: 0;
-  }
+formly-wrapper-form-field .input-group-btn {
+  cursor: pointer;
 }
diff --git a/src/ui/bootstrap/addons/src/addons.component.ts b/src/ui/bootstrap/addons/src/addons.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { FormlyFieldConfig, FieldTypeConfig, FieldWrapper } from '@ngx-formly/core';
 import { FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
 
@@ -19,8 +19,19 @@ interface AddonsProps extends FormlyFieldProps {
   selector: 'formly-wrapper-addons',
   templateUrl: './addons.component.html',
   styleUrls: ['./addons.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class FormlyWrapperAddons extends FieldWrapper<FieldTypeConfig<AddonsProps>> {
+  @ViewChild('fieldTypeTemplate', { static: true }) set content(templateRef: TemplateRef<any>) {
+    if (templateRef && this.hostContainerRef) {
+      this.hostContainerRef.createEmbeddedView(templateRef);
+    }
+  }
+
+  constructor(private hostContainerRef?: ViewContainerRef) {
+    super();
+  }
+
   addonRightClick($event: any) {
     this.props.addonRight.onClick?.(this.field, $event);
   }

diff --git a/src/ui/bootstrap/checkbox/src/checkbox.type.ts b/src/ui/bootstrap/checkbox/src/checkbox.type.ts
@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, Type } from '@angular/core';
-import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
-import { FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType, FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
 
 interface CheckboxProps extends FormlyFieldProps {
   formCheck?: 'default' | 'inline' | 'switch' | 'inline-switch' | 'nolabel';
@@ -14,27 +14,29 @@ export interface FormlyCheckboxFieldConfig extends FormlyFieldConfig<CheckboxPro
 @Component({
   selector: 'formly-field-checkbox',
   template: `
-    <div
-      class="form-check"
-      [ngClass]="{
-        'form-check-inline': props.formCheck === 'inline' || props.formCheck === 'inline-switch',
-        'form-switch': props.formCheck === 'switch' || props.formCheck === 'inline-switch'
-      }"
-    >
-      <input
-        type="checkbox"
-        [class.is-invalid]="showError"
-        class="form-check-input"
-        [class.position-static]="props.formCheck === 'nolabel'"
-        [indeterminate]="props.indeterminate && formControl.value == null"
-        [formControl]="formControl"
-        [formlyAttributes]="field"
-      />
-      <label *ngIf="props.formCheck !== 'nolabel'" [for]="id" class="form-check-label">
-        {{ props.label }}
-        <span *ngIf="props.required && props.hideRequiredMarker !== true" aria-hidden="true">*</span>
-      </label>
-    </div>
+    <ng-template #fieldTypeTemplate>
+      <div
+        class="form-check"
+        [ngClass]="{
+          'form-check-inline': props.formCheck === 'inline' || props.formCheck === 'inline-switch',
+          'form-switch': props.formCheck === 'switch' || props.formCheck === 'inline-switch'
+        }"
+      >
+        <input
+          type="checkbox"
+          [class.is-invalid]="showError"
+          class="form-check-input"
+          [class.position-static]="props.formCheck === 'nolabel'"
+          [indeterminate]="props.indeterminate && formControl.value == null"
+          [formControl]="formControl"
+          [formlyAttributes]="field"
+        />
+        <label *ngIf="props.formCheck !== 'nolabel'" [for]="id" class="form-check-label">
+          {{ props.label }}
+          <span *ngIf="props.required && props.hideRequiredMarker !== true" aria-hidden="true">*</span>
+        </label>
+      </div>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/src/ui/bootstrap/form-field/src/field.type.ts b/src/ui/bootstrap/form-field/src/field.type.ts
@@ -0,0 +1,15 @@
+import { Directive, Optional, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { FieldType as CoreFieldType, FormlyFieldConfig } from '@ngx-formly/core';
+
+@Directive()
+export abstract class FieldType<F extends FormlyFieldConfig = FormlyFieldConfig> extends CoreFieldType<F> {
+  @ViewChild('fieldTypeTemplate', { static: true }) set content(templateRef: TemplateRef<any>) {
+    if (templateRef && this.hostContainerRef) {
+      this.hostContainerRef.createEmbeddedView(templateRef);
+    }
+  }
+
+  constructor(@Optional() private hostContainerRef?: ViewContainerRef) {
+    super();
+  }
+}
diff --git a/src/ui/bootstrap/form-field/src/form-field.wrapper.ts b/src/ui/bootstrap/form-field/src/form-field.wrapper.ts
@@ -4,19 +4,30 @@ import { FieldWrapper, FormlyFieldConfig, FormlyFieldProps as CoreFormlyFieldPro
 export interface FormlyFieldProps extends CoreFormlyFieldProps {
   hideLabel?: boolean;
   hideRequiredMarker?: boolean;
+  labelPosition?: 'floating';
 }
 
 @Component({
   selector: 'formly-wrapper-form-field',
   template: `
-    <div class="mb-3" [class.has-error]="showError">
+    <ng-template #labelTemplate>
       <label *ngIf="props.label && props.hideLabel !== true" [attr.for]="id" class="form-label">
         {{ props.label }}
         <span *ngIf="props.required && props.hideRequiredMarker !== true" aria-hidden="true">*</span>
       </label>
+    </ng-template>
+
+    <div class="mb-3" [class.form-floating]="props.labelPosition === 'floating'" [class.has-error]="showError">
+      <ng-container *ngIf="props.labelPosition !== 'floating'">
+        <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+      </ng-container>
 
       <ng-template #fieldComponent></ng-template>
 
+      <ng-container *ngIf="props.labelPosition === 'floating'">
+        <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+      </ng-container>
+
       <div *ngIf="showError" class="invalid-feedback" [style.display]="'block'">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>

diff --git a/src/ui/bootstrap/form-field/src/public_api.ts b/src/ui/bootstrap/form-field/src/public_api.ts
@@ -1,2 +1,3 @@
 export { FormlyBootstrapFormFieldModule } from './form-field.module';
 export { FormlyFieldProps } from './form-field.wrapper';
+export { FieldType } from './field.type';
diff --git a/src/ui/bootstrap/input/src/input.type.ts b/src/ui/bootstrap/input/src/input.type.ts
@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, Type } from '@angular/core';
-import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
-import { FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType, FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
 
 interface InputProps extends FormlyFieldProps {}
 
@@ -11,22 +11,24 @@ export interface FormlyInputFieldConfig extends FormlyFieldConfig<InputProps> {
 @Component({
   selector: 'formly-field-input',
   template: `
-    <input
-      *ngIf="type !== 'number'; else numberTmp"
-      [type]="type"
-      [formControl]="formControl"
-      class="form-control"
-      [formlyAttributes]="field"
-      [class.is-invalid]="showError"
-    />
-    <ng-template #numberTmp>
+    <ng-template #fieldTypeTemplate>
       <input
-        type="number"
+        *ngIf="type !== 'number'; else numberTmp"
+        [type]="type"
         [formControl]="formControl"
         class="form-control"
         [formlyAttributes]="field"
         [class.is-invalid]="showError"
       />
+      <ng-template #numberTmp>
+        <input
+          type="number"
+          [formControl]="formControl"
+          class="form-control"
+          [formlyAttributes]="field"
+          [class.is-invalid]="showError"
+        />
+      </ng-template>
     </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/src/ui/bootstrap/multicheckbox/src/multicheckbox.type.ts b/src/ui/bootstrap/multicheckbox/src/multicheckbox.type.ts
@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, Type } from '@angular/core';
-import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
-import { FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType, FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
 
 interface MultiCheckboxProps extends FormlyFieldProps {
   formCheck: 'default' | 'inline' | 'switch' | 'inline-switch';
@@ -13,28 +13,30 @@ export interface FormlyMultiCheckboxFieldConfig extends FormlyFieldConfig<MultiC
 @Component({
   selector: 'formly-field-multicheckbox',
   template: `
-    <div
-      *ngFor="let option of props.options | formlySelectOptions: field | async; let i = index"
-      class="form-check"
-      [ngClass]="{
-        'form-check-inline': props.formCheck === 'inline' || props.formCheck === 'inline-switch',
-        'form-switch': props.formCheck === 'switch' || props.formCheck === 'inline-switch'
-      }"
-    >
-      <input
-        type="checkbox"
-        [id]="id + '_' + i"
-        class="form-check-input"
-        [value]="option.value"
-        [checked]="isChecked(option)"
-        [formlyAttributes]="field"
-        [disabled]="formControl.disabled || option.disabled"
-        (change)="onChange(option.value, $any($event.target).checked)"
-      />
-      <label class="form-check-label" [for]="id + '_' + i">
-        {{ option.label }}
-      </label>
-    </div>
+    <ng-template #fieldTypeTemplate>
+      <div
+        *ngFor="let option of props.options | formlySelectOptions: field | async; let i = index"
+        class="form-check"
+        [ngClass]="{
+          'form-check-inline': props.formCheck === 'inline' || props.formCheck === 'inline-switch',
+          'form-switch': props.formCheck === 'switch' || props.formCheck === 'inline-switch'
+        }"
+      >
+        <input
+          type="checkbox"
+          [id]="id + '_' + i"
+          class="form-check-input"
+          [value]="option.value"
+          [checked]="isChecked(option)"
+          [formlyAttributes]="field"
+          [disabled]="formControl.disabled || option.disabled"
+          (change)="onChange(option.value, $any($event.target).checked)"
+        />
+        <label class="form-check-label" [for]="id + '_' + i">
+          {{ option.label }}
+        </label>
+      </div>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/src/ui/bootstrap/radio/src/radio.type.ts b/src/ui/bootstrap/radio/src/radio.type.ts
@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, Type } from '@angular/core';
-import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
-import { FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType, FormlyFieldProps } from '@ngx-formly/bootstrap/form-field';
 
 interface RadioProps extends FormlyFieldProps {
   formCheck?: 'default' | 'inline';
@@ -13,27 +13,29 @@ export interface FormlyRadioFieldConfig extends FormlyFieldConfig<RadioProps> {
 @Component({
   selector: 'formly-field-radio',
   template: `
-    <div
-      *ngFor="let option of props.options | formlySelectOptions: field | async; let i = index"
-      class="form-check"
-      [class.form-check-inline]="props.formCheck === 'inline'"
-    >
-      <input
-        type="radio"
-        [id]="id + '_' + i"
-        class="form-check-input"
-        [name]="field.name || id"
-        [class.is-invalid]="showError"
-        [attr.value]="option.value"
-        [value]="option.value"
-        [formControl]="formControl"
-        [formlyAttributes]="field"
-        [attr.disabled]="option.disabled || formControl.disabled ? true : null"
-      />
-      <label class="form-check-label" [for]="id + '_' + i">
-        {{ option.label }}
-      </label>
-    </div>
+    <ng-template #fieldTypeTemplate>
+      <div
+        *ngFor="let option of props.options | formlySelectOptions: field | async; let i = index"
+        class="form-check"
+        [class.form-check-inline]="props.formCheck === 'inline'"
+      >
+        <input
+          type="radio"
+          [id]="id + '_' + i"
+          class="form-check-input"
+          [name]="field.name || id"
+          [class.is-invalid]="showError"
+          [attr.value]="option.value"
+          [value]="option.value"
+          [formControl]="formControl"
+          [formlyAttributes]="field"
+          [attr.disabled]="option.disabled || formControl.disabled ? true : null"
+        />
+        <label class="form-check-label" [for]="id + '_' + i">
+          {{ option.label }}
+        </label>
+      </div>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })