fix(core): remove additionalProps from FormlyFieldProps interface (#3295

) fix #3242
ngx-formly · May 14, 2022 · 05891df · 05891df
1 parent 82fdf9c
commit 05891df
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 22 deletions.
diff --git a/src/core/src/lib/extensions/core/core.ts b/src/core/src/lib/extensions/core/core.ts
@@ -58,10 +58,7 @@ export class CoreExtension implements FormlyExtension {
   }
 
   private initFieldProps(field: FormlyFieldConfigCache) {
-    if (!field.props) {
-      field.props = field.templateOptions;
-    }
-
+    field.props ??= field.templateOptions;
     Object.defineProperty(field, 'templateOptions', {
       get: () => field.props,
       set: (props) => (field.props = props),

diff --git a/src/core/src/lib/models/fieldconfig.ts b/src/core/src/lib/models/fieldconfig.ts
@@ -5,7 +5,7 @@ import { FieldWrapper } from '../templates/field.wrapper';
 import { ValidationMessageOption } from '../models';
 import { Type } from '@angular/core';
 
-export interface FormlyFieldConfig {
+export interface FormlyFieldConfig<Props = FormlyFieldProps & { [additionalProperties: string]: any }> {
   /**
    * The key that relates to the model. This will link the field value to the model
    */
@@ -34,10 +34,10 @@ export interface FormlyFieldConfig {
   /**
    * This is reserved for the templates. Any template-specific options go in here. Look at your specific template implementation to know the options required for this.
    */
-  props?: FormlyFieldProps;
+  props?: Props;
 
   /** @deprecated Use `props` instead. */
-  templateOptions?: FormlyFieldConfig['props'];
+  templateOptions?: FormlyTemplateOptions;
 
   /**
    * An object with a few useful properties
@@ -203,7 +203,9 @@ export interface FormlyFieldConfig {
 export type FormlyAttributeEvent = (field: FormlyFieldConfig, event?: any) => void;
 
 /**  @deprecated */
-export type FormlyTemplateOptions = FormlyFieldProps;
+export interface FormlyTemplateOptions extends FormlyFieldProps {
+  [additionalProperties: string]: any;
+}
 
 export interface FormlyFieldProps {
   type?: string;
@@ -239,7 +241,6 @@ export interface FormlyFieldProps {
   click?: FormlyAttributeEvent;
   change?: FormlyAttributeEvent;
   keypress?: FormlyAttributeEvent;
-  [additionalProperties: string]: any;
 }
 
 export type FormlyHookFn = (field?: FormlyFieldConfig) => void;

diff --git a/src/core/src/lib/templates/field.type.ts b/src/core/src/lib/templates/field.type.ts
@@ -2,14 +2,14 @@ import { Input, Directive } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '../models';
 
-export interface FieldTypeConfig extends FormlyFieldConfig {
+export interface FieldTypeConfig<T = FormlyFieldConfig['props']> extends FormlyFieldConfig<T> {
   formControl: FormControl;
-  props: NonNullable<Required<FormlyFieldConfig>['props']>;
+  props: NonNullable<T>;
 }
 
-export interface FieldGroupTypeConfig extends FormlyFieldConfig {
+export interface FieldGroupTypeConfig<T = FormlyFieldConfig['props']> extends FormlyFieldConfig<T> {
   formControl: FormGroup;
-  props: NonNullable<Required<FormlyFieldConfig>['props']>;
+  props: NonNullable<T>;
 }
 
 @Directive()

diff --git a/src/core/src/lib/templates/formly.attributes.ts b/src/core/src/lib/templates/formly.attributes.ts
@@ -9,7 +9,7 @@ import {
   Inject,
   OnDestroy,
 } from '@angular/core';
-import { FormlyFieldConfig, FormlyFieldConfigCache, FormlyFieldProps } from '../models';
+import { FormlyFieldConfig, FormlyFieldConfigCache } from '../models';
 import { defineHiddenProp, FORMLY_VALIDATORS, observe, IObserver } from '../utils';
 import { DOCUMENT } from '@angular/common';
 
@@ -51,7 +51,7 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
   };
 
   private get props() {
-    return this.field.props || ({} as FormlyFieldProps);
+    return this.field.props || ({} as FormlyFieldConfigCache['props']);
   }
 
   private get fieldAttrElements(): ElementRef[] {

diff --git a/src/ui/material/form-field/src/field.type.ts b/src/ui/material/form-field/src/field.type.ts
@@ -101,14 +101,13 @@ export abstract class FieldType<F extends FormlyFieldConfig = FormlyFieldConfig>
         (control.ngControl.valueAccessor as any)['_formField'] = this.formField;
       }
 
-      ['Prefix', 'Suffix'].forEach((type) =>
+      ['prefix', 'suffix'].forEach((type) =>
         observe<TemplateRef<any>>(
           this.field,
-          ['props', type.toLowerCase()],
+          ['props', type],
           ({ currentValue }) =>
             currentValue &&
             Promise.resolve().then(() => {
-              this.field.props![`_mat${type}`] = currentValue;
               this.options.detectChanges!(this.field);
             }),
         ),

diff --git a/src/ui/material/form-field/src/form-field.wrapper.ts b/src/ui/material/form-field/src/form-field.wrapper.ts
@@ -62,12 +62,12 @@ interface MatFormlyFieldProps extends FormlyFieldProps {
         >
       </mat-label>
 
-      <ng-container matPrefix *ngIf="props._matPrefix">
-        <ng-container [ngTemplateOutlet]="props._matPrefix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
+      <ng-container matPrefix *ngIf="props.prefix">
+        <ng-container [ngTemplateOutlet]="props.prefix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
       </ng-container>
 
-      <ng-container matSuffix *ngIf="props._matSuffix">
-        <ng-container [ngTemplateOutlet]="props._matSuffix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
+      <ng-container matSuffix *ngIf="props.suffix">
+        <ng-container [ngTemplateOutlet]="props.suffix" [ngTemplateOutletContext]="{ field: field }"></ng-container>
       </ng-container>
 
       <mat-error>