@ngx-formly/core 11.0.0 → 11.1.0-rc.0

package/fesm2022/ngx-formly-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, ContentChildren, DOCUMENT, DestroyRef, Directive, EventEmitter, Inject, Injectable, InjectionToken, Injector, Input, NgModule, Optional, Output, PendingTasks, Pipe, TemplateRef, Type, VERSION, ViewChild, ViewChildren, ViewContainerRef, inject, ɵNoopNgZone } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, ContentChildren, DOCUMENT, DestroyRef, Directive, EventEmitter, Inject, Injectable, InjectionToken, Injector, Input, NgModule, Optional, Output, PendingTasks, Pipe, TemplateRef, Type, VERSION, ViewChild, ViewChildren, ViewContainerRef, effect, inject, isWritableSignal, untracked, ɵNoopNgZone } from "@angular/core";
 import { Observable, Subject, Subscription, combineLatest, isObservable, merge, of } from "rxjs";
 import * as i2$1 from "@angular/forms";
 import { AbstractControl, FormControl, NgControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from "@angular/forms";
@@ -116,13 +116,16 @@ function isObject(x) {
 function isPromise(obj) {
 	return !!obj && typeof obj.then === "function";
 }
-function clone(value) {
-	if (!isObject(value) || isObservable(value) || isPromise(value) || value instanceof TemplateRef || value.changingThisBreaksApplicationSecurity || [
+function isKeptByReference(value) {
+	return !isObject(value) || isObservable(value) || isPromise(value) || value instanceof TemplateRef || value.changingThisBreaksApplicationSecurity || [
 		"RegExp",
 		"FileList",
 		"File",
 		"Blob"
-	].indexOf(value.constructor?.name) !== -1) return value;
+	].indexOf(value.constructor?.name) !== -1;
+}
+function clone(value) {
+	if (isKeptByReference(value)) return value;
 	if (value instanceof Set) return new Set(value);
 	if (value instanceof Map) return new Map(value);
 	if (value instanceof Uint8Array) return new Uint8Array(value);
@@ -142,6 +145,15 @@ function clone(value) {
 		return newVal;
 	}, c);
 }
+function isEqualValue(a, b) {
+	if (Object.is(a, b)) return true;
+	if (isKeptByReference(a) || isKeptByReference(b) || Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
+	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
+	if (a instanceof Map) return a.size === b.size && [...a].every(([k, v]) => b.has(k) && isEqualValue(v, b.get(k)));
+	if (a instanceof Set) return a.size === b.size && [...a].every((v) => b.has(v));
+	const keys = Object.keys(a);
+	return keys.length === Object.keys(b).length && keys.every((k) => Object.prototype.hasOwnProperty.call(b, k) && isEqualValue(a[k], b[k]));
+}
 function defineHiddenProp(field, prop, defaultValue) {
 	Object.defineProperty(field, prop, {
 		enumerable: false,
@@ -2378,6 +2390,7 @@ var FormlyFormBuilder = class FormlyFormBuilder {
 			subscription?.unsubscribe();
 		}
 		if (firstBuild && lastEmittedStatus !== field.form.status) field.form.statusChanges.emit(field.form.status);
+		if (!controlsForCheck) options._afterBuild?.forEach((afterBuild) => afterBuild());
 	}
 	_build(field) {
 		if (!field) return;
@@ -2477,6 +2490,12 @@ var FormlyForm = class FormlyForm {
 		return this.field.form;
 	}
 	set model(model) {
+		this.modelSignalEffect?.destroy();
+		this.modelSignal = void 0;
+		if (isWritableSignal(model)) {
+			this.bindModelSignal(model);
+			return;
+		}
 		if (this.config.extras.immutable && this._modelChangeValue === model) return;
 		this.setField({ model });
 	}
@@ -2490,6 +2509,7 @@ var FormlyForm = class FormlyForm {
 		return this.field.fieldGroup;
 	}
 	set options(options) {
+		this.field.options?._afterBuild?.delete(this.afterBuild);
 		this.setField({ options });
 	}
 	get options() {
@@ -2508,19 +2528,19 @@ var FormlyForm = class FormlyForm {
 		this.field = { type: "formly-group" };
 		this.destroyRef = inject(DestroyRef);
 		this.pendingTasks = inject(PendingTasks);
+		this.injector = inject(Injector);
 		this._modelChangeValue = {};
 		this.valueChangesUnsubscribe = () => {};
+		this.afterBuild = () => {
+			if (this.modelSignal) this.syncModelSignal(this.modelSignal);
+		};
 	}
 	ngDoCheck() {
 		if (this.config.extras.checkExpressionOn === "changeDetectionCheck") this.checkExpressionChange();
 	}
 	ngOnChanges(changes) {
 		if (changes.fields && this.form) clearControl(this.form);
-		if (changes.fields || changes.form || changes.model && this._modelChangeValue !== changes.model.currentValue) {
-			this.valueChangesUnsubscribe();
-			this.builder.build(this.field);
-			this.valueChangesUnsubscribe = this.valueChanges();
-		}
+		if (changes.fields || changes.form || changes.model && this._modelChangeValue !== changes.model.currentValue) this.build();
 		if (changes.fields || changes.form) this.pendingTasks.run(async () => {
 			await Promise.resolve();
 			if (!this.destroyRef.destroyed) this.fieldChange.emit({
@@ -2533,6 +2553,7 @@ var FormlyForm = class FormlyForm {
 	ngOnDestroy() {
 		this.valueChangesUnsubscribe();
 		this.config.clearRefs();
+		this.field.options?._afterBuild?.delete(this.afterBuild);
 	}
 	checkExpressionChange() {
 		this.field.options.checkExpressions?.(this.field);
@@ -2550,9 +2571,13 @@ var FormlyForm = class FormlyForm {
 			});
 		}
 		const fieldChangesDetection = [observeDeep(this.field.options, ["formState"], () => this.field.options.detectChanges(this.field))];
-		const valueChanges = this.field.options.fieldChanges.pipe(filter(({ field, type }) => hasKey(field) && type === "valueChanges"), switchMap(() => isNoopNgZone(this.ngZone) ? of(null) : this.ngZone.onStable.asObservable().pipe(take(1)))).subscribe(() => this.ngZone.runGuarded(() => {
+		const valueChanges = this.field.options.fieldChanges.pipe(filter(({ field, type }) => hasKey(field) && type === "valueChanges"), tap(() => {
+			if (this.modelSignal) this.syncModelSignal(this.modelSignal);
+		}), switchMap(() => isNoopNgZone(this.ngZone) ? of(null) : this.ngZone.onStable.asObservable().pipe(take(1)))).subscribe(() => this.ngZone.runGuarded(() => {
 			this.checkExpressionChange();
-			this.modelChange.emit(this._modelChangeValue = clone(this.model));
+			this._modelChangeValue = clone(this.model);
+			if (this.modelSignal) this.syncModelSignal(this.modelSignal, this._modelChangeValue);
+			this.modelChange.emit(this._modelChangeValue);
 		}));
 		return () => {
 			fieldChangesDetection.forEach((fnc) => fnc());
@@ -2567,6 +2592,42 @@ var FormlyForm = class FormlyForm {
 		};
 		else Object.keys(field).forEach((p) => this.field[p] = field[p]);
 	}
+	build() {
+		this.valueChangesUnsubscribe();
+		if (this.modelSignal) {
+			const options = this.field.options ??= {};
+			if (!options._afterBuild) defineHiddenProp(options, "_afterBuild", /* @__PURE__ */ new Set());
+			options._afterBuild.add(this.afterBuild);
+		}
+		this.builder.build(this.field);
+		this.valueChangesUnsubscribe = this.valueChanges();
+	}
+	bindModelSignal(model) {
+		this.modelSignal = model;
+		this.modelSignalValue = model();
+		this.useSignalValue(this.modelSignalValue);
+		this.modelSignalEffect = effect(() => {
+			const value = model();
+			if (value === this.modelSignalValue) return;
+			this.modelSignalValue = value;
+			untracked(() => {
+				this.useSignalValue(value);
+				this.build();
+			});
+		}, {
+			...ngDevMode ? { debugName: "modelSignalEffect" } : /* istanbul ignore next */ {},
+			injector: this.injector
+		});
+	}
+	syncModelSignal(modelSignal, copy) {
+		const current = untracked(modelSignal);
+		if (current !== this.modelSignalValue || isEqualValue(this.model, current ?? {})) return;
+		modelSignal.set(copy ?? clone(this.model));
+		this.modelSignalValue = untracked(modelSignal);
+	}
+	useSignalValue(model) {
+		this.setField({ model: this.config.extras.immutable ? model : clone(model) });
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",