fix(material): add support of text prefix / suffix

fix #3556
ngx-formly · Jan 20, 2023 · 2779cd2 · 2779cd2
1 parent 611a02f
commit 2779cd2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/demo/src/app/examples/other/material-prefix-suffix/addons.wrapper.ts b/demo/src/app/examples/other/material-prefix-suffix/addons.wrapper.ts
@@ -35,10 +35,12 @@ export class FormlyWrapperAddons extends FieldWrapper implements AfterViewInit {
 
   ngAfterViewInit() {
     if (this.matPrefix) {
+      // Note: for text use `textPrefix` property (only in Angular Material >= 15)
       this.props.prefix = this.matPrefix;
     }
 
     if (this.matSuffix) {
+      // Note: for text use `textSuffix` property (only in Angular Material >= 15)
       this.props.suffix = this.matSuffix;
     }
   }

diff --git a/src/ui/material/form-field/src/field.type.ts b/src/ui/material/form-field/src/field.type.ts
@@ -15,11 +15,21 @@ export abstract class FieldType<F extends FormlyFieldConfig<FormlyFieldProps>>
       this.props.prefix = prefix;
     }
   }
+  @ViewChild('matTextPrefix') set matTextPrefix(textPrefix: TemplateRef<any>) {
+    if (textPrefix) {
+      this.props.textPrefix = textPrefix;
+    }
+  }
   @ViewChild('matSuffix') set matSuffix(suffix: TemplateRef<any>) {
     if (suffix) {
       this.props.suffix = suffix;
     }
   }
+  @ViewChild('matTextSuffix') set matTextSuffix(textSuffix: TemplateRef<any>) {
+    if (textSuffix) {
+      this.props.textSuffix = textSuffix;
+    }
+  }
 
   @ViewChildren(MatFormFieldControl) set _controls(controls: QueryList<MatFormFieldControl<any>>) {
     this.attachControl(controls.length === 1 ? controls.first : this);
@@ -105,7 +115,7 @@ export abstract class FieldType<F extends FormlyFieldConfig<FormlyFieldProps>>
         ngControl.valueAccessor['_parentFormField'] = this.formField;
       }
 
-      ['prefix', 'suffix'].forEach((type) =>
+      ['prefix', 'suffix', 'textPrefix', 'textSuffix'].forEach((type) =>
         observe<TemplateRef<any>>(
           this.field,
           ['props', type],

diff --git a/src/ui/material/form-field/src/form-field.wrapper.ts b/src/ui/material/form-field/src/form-field.wrapper.ts
@@ -27,6 +27,8 @@ interface MatFormlyFieldConfig extends FormlyFieldConfig<FormlyFieldProps> {
 export interface FormlyFieldProps extends CoreFormlyFieldProps {
   prefix?: TemplateRef<any>;
   suffix?: TemplateRef<any>;
+  textPrefix?: TemplateRef<any>;
+  textSuffix?: TemplateRef<any>;
   hideLabel?: boolean;
   hideRequiredMarker?: boolean;
   hideFieldUnderline?: boolean;
@@ -60,10 +62,18 @@ export interface FormlyFieldProps extends CoreFormlyFieldProps {
         >
       </mat-label>
 
+      <ng-containe matTextPrefix *ngIf="props.textPrefix">
+        <ng-container [ngTemplateOutlet]="props.textPrefix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
+      </ng-containe>
+
       <ng-containe matPrefix *ngIf="props.prefix">
         <ng-container [ngTemplateOutlet]="props.prefix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
       </ng-containe>
 
+      <ng-containe matTextSuffix *ngIf="props.textSuffix">
+        <ng-container [ngTemplateOutlet]="props.textSuffix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
+      </ng-containe>
+
       <ng-containe matSuffix *ngIf="props.suffix">
         <ng-container [ngTemplateOutlet]="props.suffix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
       </ng-containe>