@ngx-formly/core 7.0.0-alpha.1 → 7.0.0

package/fesm2022/ngx-formly-core.mjs

@@ -5,8 +5,8 @@ import * as i2 from '@angular/forms';
 import { AbstractControl, UntypedFormArray, UntypedFormGroup, FormControl, UntypedFormControl, Validators, NgControl } from '@angular/forms';
 import { tap, map, distinctUntilChanged, startWith, debounceTime, filter, switchMap, take } from 'rxjs/operators';
 import * as i1 from '@angular/platform-browser';
-import * as i1$1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/common';
+import { DOCUMENT, AsyncPipe, CommonModule } from '@angular/common';
 
 function disableTreeValidityCall(form, callback) {
     const _updateTreeValidity = form._updateTreeValidity.bind(form);
@@ -314,7 +314,7 @@ function isHiddenField(field) {
     return !setDefaultValue;
 }
 function isSignalRequired() {
-    return +VERSION.major >= 18 && +VERSION.minor >= 1;
+    return +VERSION.major > 18 || (+VERSION.major >= 18 && +VERSION.minor >= 1);
 }
 
 function evalStringExpression(expression, argNames) {
@@ -497,10 +497,6 @@ class FieldExpressionExtension {
                 }
                 checkLocked = false;
             };
-            field.options._checkField = (f, ignoreCache) => {
-                console.warn(`Formly: 'options._checkField' is deprecated since v6.0, use 'options.checkExpressions' instead.`);
-                field.options.checkExpressions(f, ignoreCache);
-            };
         }
     }
     parseExpressions(field, path, expr) {
@@ -737,10 +733,6 @@ class CoreExtension {
         if (!options._hiddenFieldsForCheck) {
             options._hiddenFieldsForCheck = [];
         }
-        options._markForCheck = (f) => {
-            console.warn(`Formly: 'options._markForCheck' is deprecated since v6.0, use 'options.detectChanges' instead.`);
-            options.detectChanges(f);
-        };
         options._detectChanges = (f) => {
             if (f._componentRefs) {
                 markFieldForCheck(f);
@@ -1194,6 +1186,7 @@ class FormlyConfig {
         this.extensions = {};
         this.presets = {};
         this.extensionsByPriority = {};
+        this.componentRefs = {};
     }
     addConfig(config) {
         if (Array.isArray(config)) {
@@ -1292,22 +1285,28 @@ class FormlyConfig {
         if (!type) {
             return null;
         }
-        if (!type.component || type._componentRef) {
-            return type._componentRef;
-        }
-        const { _viewContainerRef, _injector } = field.options;
-        if (!_viewContainerRef || !_injector) {
+        if (!type.component) {
             return null;
         }
-        const componentRef = _viewContainerRef.createComponent(type.component, { injector: _injector });
-        defineHiddenProp(type, '_componentRef', componentRef);
-        try {
-            componentRef.destroy();
-        }
-        catch (e) {
-            console.error(`An error occurred while destroying the Formly component type "${field.type}"`, e);
+        if (!this.componentRefs[type.name]) {
+            const { _viewContainerRef, _injector } = field.options;
+            if (!_viewContainerRef || !_injector) {
+                return null;
+            }
+            const componentRef = _viewContainerRef.createComponent(type.component, { injector: _injector });
+            this.componentRefs[type.name] = componentRef;
+            try {
+                componentRef.destroy();
+            }
+            catch (e) {
+                console.error(`An error occurred while destroying the Formly component type "${field.type}"`, e);
+            }
         }
-        return type._componentRef;
+        return this.componentRefs[type.name];
+    }
+    /** @ignore @internal */
+    clearRefs() {
+        this.componentRefs = {};
     }
     setWrapper(options) {
         this.wrappers[options.name] = options;
@@ -1661,7 +1660,7 @@ class FormlyField {
             }
             const { updateOn, debounce } = field.modelOptions;
             if ((!updateOn || updateOn === 'change') && debounce?.default > 0) {
-                valueChanges = control.valueChanges.pipe(debounceTime(debounce.default));
+                valueChanges = valueChanges.pipe(debounceTime(debounce.default));
             }
             const sub = valueChanges.subscribe((value) => {
                 // workaround for https://github.com/angular/angular/issues/13792
@@ -1711,17 +1710,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /** @ignore */
 class FormlyGroup extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyGroup, selector: "formly-group", host: { properties: { "class": "field.fieldGroupClassName || \"\"" } }, usesInheritance: true, ngImport: i0, template: `
-    <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormlyGroup, selector: "formly-group", host: { properties: { "class": "field.fieldGroupClassName || \"\"" } }, usesInheritance: true, ngImport: i0, template: `
+    @for (f of field.fieldGroup; track $index) {
+      <formly-field [field]="f"></formly-field>
+    }
     <ng-content></ng-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LegacyFormlyField, selector: "formly-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: LegacyFormlyField, selector: "formly-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-group',
                     template: `
-    <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+    @for (f of field.fieldGroup; track $index) {
+      <formly-field [field]="f"></formly-field>
+    }
     <ng-content></ng-content>
   `,
                     host: {
@@ -1765,7 +1768,9 @@ class FormlyFormBuilder {
         this.injector = injector;
         this.viewContainerRef = viewContainerRef;
         this.parentForm = parentForm;
-        configs.forEach((c) => config.addConfig(c));
+        if (configs) {
+            configs.forEach((c) => config.addConfig(c));
+        }
     }
     buildForm(form, fieldGroup = [], model, options) {
         this.build({ fieldGroup, model, form, options });
@@ -1815,10 +1820,6 @@ class FormlyFormBuilder {
             defineHiddenProp(options, '_injector', this.injector);
         }
         if (!options.build) {
-            options._buildForm = () => {
-                console.warn(`Formly: 'options._buildForm' is deprecated since v6.0, use 'options.build' instead.`);
-                this.build(field);
-            };
             options.build = (f = field) => {
                 this.build(f);
                 return f;
@@ -1920,6 +1921,7 @@ class FormlyForm {
     }
     ngOnDestroy() {
         this.valueChangesUnsubscribe();
+        this.config.clearRefs();
     }
     checkExpressionChange() {
         this.field.options.checkExpressions?.(this.field);
@@ -2166,12 +2168,13 @@ class FormlyAttributes {
         this.renderer.removeAttribute(this.elementRef.nativeElement, attr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyAttributes, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: { field: ["formlyAttributes", "field"], id: "id" }, host: { listeners: { "change": "onHostChange($event)" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FormlyAttributes, isStandalone: true, selector: "[formlyAttributes]", inputs: { field: ["formlyAttributes", "field"], id: "id" }, host: { listeners: { "change": "onHostChange($event)" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyAttributes, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formlyAttributes]',
+                    standalone: true,
                     host: {
                         '(change)': 'onHostChange($event)',
                     },
@@ -2185,6 +2188,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], id: [{
                 type: Input
             }] } });
+class LegacyFormlyAttributes extends FormlyAttributes {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegacyFormlyAttributes, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LegacyFormlyAttributes, selector: "[formlyAttributes]", host: { listeners: { "change": "onHostChange($event)" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegacyFormlyAttributes, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[formlyAttributes]',
+                    host: {
+                        '(change)': 'onHostChange($event)',
+                    },
+                }]
+        }] });
 
 /**
  * The `<formly-validation-message>` component renders the error message of a given `field`.
@@ -2234,7 +2250,7 @@ class FormlyValidationMessage {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyValidationMessage, deps: [{ token: FormlyConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyValidationMessage, selector: "formly-validation-message", inputs: { field: "field" }, usesOnChanges: true, ngImport: i0, template: '{{ errorMessage$ | async }}', isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyValidationMessage, isStandalone: true, selector: "formly-validation-message", inputs: { field: "field" }, usesOnChanges: true, ngImport: i0, template: '{{ errorMessage$ | async }}', isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyValidationMessage, decorators: [{
             type: Component,
@@ -2242,10 +2258,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: 'formly-validation-message',
                     template: '{{ errorMessage$ | async }}',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [AsyncPipe],
                 }]
         }], ctorParameters: () => [{ type: FormlyConfig }], propDecorators: { field: [{
                 type: Input
             }] } });
+class LegacyFormlyValidationMessage extends FormlyValidationMessage {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegacyFormlyValidationMessage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LegacyFormlyValidationMessage, selector: "formly-validation-message", usesInheritance: true, ngImport: i0, template: '{{ errorMessage$ | async }}', isInline: true, dependencies: [{ kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegacyFormlyValidationMessage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-validation-message',
+                    template: '{{ errorMessage$ | async }}',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
 
 class FieldArrayType extends FieldType {
     onPopulate(field) {
@@ -2369,15 +2399,15 @@ class FormlyModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FormlyModule, declarations: [FormlyTemplate,
             LegacyFormlyForm,
             LegacyFormlyField,
-            FormlyAttributes,
+            LegacyFormlyAttributes,
+            LegacyFormlyValidationMessage,
             FormlyGroup,
-            FormlyValidationMessage,
             FormlyTemplateType], imports: [CommonModule], exports: [FormlyTemplate,
             LegacyFormlyForm,
             LegacyFormlyField,
-            FormlyAttributes,
-            FormlyGroup,
-            FormlyValidationMessage] }); }
+            LegacyFormlyAttributes,
+            LegacyFormlyValidationMessage,
+            FormlyGroup] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyModule, decorators: [{
@@ -2387,18 +2417,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormlyTemplate,
                         LegacyFormlyForm,
                         LegacyFormlyField,
-                        FormlyAttributes,
+                        LegacyFormlyAttributes,
+                        LegacyFormlyValidationMessage,
                         FormlyGroup,
-                        FormlyValidationMessage,
                         FormlyTemplateType,
                     ],
                     exports: [
                         FormlyTemplate,
                         LegacyFormlyForm,
                         LegacyFormlyField,
-                        FormlyAttributes,
+                        LegacyFormlyAttributes,
+                        LegacyFormlyValidationMessage,
                         FormlyGroup,
-                        FormlyValidationMessage,
                     ],
                     imports: [CommonModule],
                 }]
@@ -2412,5 +2442,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FORMLY_CONFIG, FieldArrayType, FieldType, FieldWrapper, FormlyConfig, FormlyField, FormlyForm, FormlyFormBuilder, FormlyModule, LegacyFormlyField, LegacyFormlyForm, provideFormlyConfig, provideFormlyCore, FormlyAttributes as ɵFormlyAttributes, FormlyGroup as ɵFormlyGroup, FormlyTemplate as ɵFormlyTemplate, FormlyValidationMessage as ɵFormlyValidationMessage, clone as ɵclone, defineHiddenProp as ɵdefineHiddenProp, getFieldValue as ɵgetFieldValue, hasKey as ɵhasKey, observe as ɵobserve, reverseDeepMerge as ɵreverseDeepMerge };
+export { FORMLY_CONFIG, FieldArrayType, FieldType, FieldWrapper, FormlyAttributes, FormlyConfig, FormlyField, FormlyForm, FormlyFormBuilder, FormlyModule, FormlyValidationMessage, LegacyFormlyAttributes, LegacyFormlyField, LegacyFormlyForm, LegacyFormlyValidationMessage, provideFormlyConfig, provideFormlyCore, FormlyGroup as ɵFormlyGroup, FormlyTemplate as ɵFormlyTemplate, clone as ɵclone, defineHiddenProp as ɵdefineHiddenProp, getFieldValue as ɵgetFieldValue, hasKey as ɵhasKey, observe as ɵobserve, reverseDeepMerge as ɵreverseDeepMerge };
 //# sourceMappingURL=ngx-formly-core.mjs.map