fix(material): allow re-use internal prefix & suffix (#2796)

fix #2775
ngx-formly · Apr 9, 2021 · bb9df21 · bb9df21
1 parent 896c965
commit bb9df21
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/material/datepicker/src/datepicker.type.ts b/src/material/datepicker/src/datepicker.type.ts
@@ -1,5 +1,4 @@
 import { Component, ViewChild, AfterViewInit, TemplateRef } from '@angular/core';
-import { ɵdefineHiddenProp as defineHiddenProp } from '@ngx-formly/core';
 import { FieldType } from '@ngx-formly/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatDatepickerInput } from '@angular/material/datepicker';
@@ -64,7 +63,16 @@ export class FormlyDatepickerTypeComponent extends FieldType implements AfterVie
     (<any> this.datepickerInput)._formField = this.formField;
 
     setTimeout(() => {
-      defineHiddenProp(this.field, '_mat' + this.to.datepickerOptions.datepickerTogglePosition, this.datepickerToggle);
+      switch (this.to.datepickerOptions.datepickerTogglePosition) {
+        case 'suffix':
+          this.to._matSuffix = this.datepickerToggle;
+          break;
+
+        case 'prefix':
+          this.to._matPrefix = this.datepickerToggle;
+          break;
+      }
+
       (<any> this.options)._markForCheck(this.field);
     });
   }

diff --git a/src/material/form-field/src/form-field.wrapper.ts b/src/material/form-field/src/form-field.wrapper.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit, OnDestroy, Renderer2, AfterViewInit, AfterContentChecked, TemplateRef, ElementRef, ViewContainerRef } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy, Renderer2, AfterViewInit, AfterContentChecked, ElementRef, ViewContainerRef } from '@angular/core';
 import { FieldWrapper, ɵdefineHiddenProp as defineHiddenProp, FormlyFieldConfig, FormlyConfig } from '@ngx-formly/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -7,8 +7,6 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { FieldType } from './field.type';
 
 interface MatFormlyFieldConfig extends FormlyFieldConfig {
-  _matprefix: TemplateRef<any>;
-  _matsuffix: TemplateRef<any>;
   __formField__: FormlyWrapperFormField;
 }
 
@@ -28,12 +26,12 @@ interface MatFormlyFieldConfig extends FormlyFieldConfig {
         <span *ngIf="to.required && to.hideRequiredMarker !== true" class="mat-form-field-required-marker">*</span>
       </mat-label>
 
-      <ng-container matPrefix *ngIf="to.prefix || formlyField._matprefix">
-        <ng-container *ngTemplateOutlet="to.prefix ? to.prefix : formlyField._matprefix"></ng-container>
+      <ng-container matPrefix *ngIf="to.prefix || to._matPrefix">
+        <ng-container *ngTemplateOutlet="to.prefix ? to.prefix : to._matPrefix"></ng-container>
       </ng-container>
 
-      <ng-container matSuffix *ngIf="to.suffix || formlyField._matsuffix">
-        <ng-container *ngTemplateOutlet="to.suffix ? to.suffix : formlyField._matsuffix"></ng-container>
+      <ng-container matSuffix *ngIf="to.suffix || to._matSuffix">
+        <ng-container *ngTemplateOutlet="to.suffix ? to.suffix : to._matSuffix"></ng-container>
       </ng-container>
 
       <mat-error>