@angular/forms 21.0.0-next.7 → 21.0.0-next.9

package/fesm2022/signals.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v21.0.0-next.7
+ * @license Angular v21.0.0-next.9
  * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
@@ -7,6 +7,7 @@
 import { httpResource } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { computed, untracked, InjectionToken, inject, Injector, input, ɵCONTROL as _CONTROL, effect, Directive, runInInjectionContext, linkedSignal, signal, APP_ID, ɵisPromise as _isPromise, resource } from '@angular/core';
+import { Validators, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
 /**
@@ -1425,23 +1426,105 @@ function validateHttp(path, opts) {
 }
 
 /**
- * Lightweight DI token provided by the {@link Control} directive.
+ * A fake version of `NgControl` provided by the `Field` directive. This allows interoperability
+ * with a wider range of components designed to work with reactive forms, in particular ones that
+ * inject the `NgControl`. The interop control does not implement *all* properties and methods of
+ * the real `NgControl`, but does implement some of the most commonly used ones that have a clear
+ * equivalent in signal forms.
  */
-const CONTROL = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ? 'CONTROL' : '');
+class InteropNgControl {
+    field;
+    constructor(field) {
+        this.field = field;
+    }
+    control = this;
+    get value() {
+        return this.field().value();
+    }
+    get valid() {
+        return this.field().valid();
+    }
+    get invalid() {
+        return this.field().invalid();
+    }
+    get pending() {
+        return this.field().pending();
+    }
+    get disabled() {
+        return this.field().disabled();
+    }
+    get enabled() {
+        return !this.field().disabled();
+    }
+    get errors() {
+        const errors = this.field().errors();
+        if (errors.length === 0) {
+            return null;
+        }
+        const errObj = {};
+        for (const error of errors) {
+            errObj[error.kind] = error;
+        }
+        return errObj;
+    }
+    get pristine() {
+        return !this.field().dirty();
+    }
+    get dirty() {
+        return this.field().dirty();
+    }
+    get touched() {
+        return this.field().touched();
+    }
+    get untouched() {
+        return !this.field().touched();
+    }
+    get status() {
+        if (this.field().disabled()) {
+            return 'DISABLED';
+        }
+        if (this.field().valid()) {
+            return 'VALID';
+        }
+        if (this.field().invalid()) {
+            return 'INVALID';
+        }
+        if (this.field().pending()) {
+            return 'PENDING';
+        }
+        throw Error('AssertionError: unknown form control status');
+    }
+    valueAccessor = null;
+    hasValidator(validator) {
+        // This addresses a common case where users look for the presence of `Validators.required` to
+        // determine whether or not to show a required "*" indicator in the UI.
+        if (validator === Validators.required) {
+            return this.field().property(REQUIRED)();
+        }
+        return false;
+    }
+    updateValueAndValidity() {
+        // No-op since value and validity are always up to date in signal forms.
+        // We offer this method so that reactive forms code attempting to call it doesn't error.
+    }
+}
+
+/**
+ * Lightweight DI token provided by the {@link Field} directive.
+ */
+const FIELD = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ? 'FIELD' : '');
 /**
  * Binds a form `FieldTree` to a UI control that edits it. A UI control can be one of several things:
  * 1. A native HTML input or textarea
  * 2. A signal forms custom control that implements `FormValueControl` or `FormCheckboxControl`
- * 3. TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131712274. A
- *    component that provides a ControlValueAccessor. This should only be used to backwards
+ * 3. A component that provides a `ControlValueAccessor`. This should only be used for backwards
  *    compatibility with reactive forms. Prefer options (1) and (2).
  *
  * This directive has several responsibilities:
  * 1. Two-way binds the field's value with the UI control's value
  * 2. Binds additional forms related state on the field to the UI control (disabled, required, etc.)
  * 3. Relays relevant events on the control to the field (e.g. marks field touched on blur)
- * 4. TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131712274.
- *    Provides a fake `NgControl` that implements a subset of the features available on the
+ * 4. Provides a fake `NgControl` that implements a subset of the features available on the
  *    reactive forms `NgControl`. This is provided to improve interoperability with controls
  *    designed to work with reactive forms. It should not be used by controls written for signal
  *    forms.
@@ -1449,31 +1532,74 @@ const CONTROL = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ?
  * @category control
  * @experimental 21.0.0
  */
-class Control {
+class Field {
     injector = inject(Injector);
-    field = input.required(...(ngDevMode ? [{ debugName: "field", alias: 'control' }] : [{ alias: 'control' }]));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
     state = computed(() => this.field()(), ...(ngDevMode ? [{ debugName: "state" }] : []));
     [_CONTROL] = undefined;
+    /** Any `ControlValueAccessor` instances provided on the host element. */
+    controlValueAccessors = inject(NG_VALUE_ACCESSOR, { optional: true, self: true });
+    /** A lazily instantiated fake `NgControl`. */
+    interopNgControl;
+    /** A `ControlValueAccessor`, if configured, for the host component. */
+    get controlValueAccessor() {
+        return this.controlValueAccessors?.[0] ?? this.interopNgControl?.valueAccessor ?? undefined;
+    }
+    get ɵhasInteropControl() {
+        return this.controlValueAccessor !== undefined;
+    }
+    /** Lazily instantiates a fake `NgControl` for this field. */
+    ɵgetOrCreateNgControl() {
+        return (this.interopNgControl ??= new InteropNgControl(this.state));
+    }
+    ɵinteropControlCreate() {
+        const controlValueAccessor = this.controlValueAccessor;
+        controlValueAccessor.registerOnChange((value) => {
+            const state = this.state();
+            state.value.set(value);
+            state.markAsDirty();
+        });
+        controlValueAccessor.registerOnTouched(() => this.state().markAsTouched());
+    }
+    ɵinteropControlUpdate() {
+        const controlValueAccessor = this.controlValueAccessor;
+        // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131711472
+        // * check if values changed since last update before writing.
+        controlValueAccessor.writeValue(this.state().value());
+        controlValueAccessor.setDisabledState?.(this.state().disabled());
+    }
     // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131861631
-    register() {
+    ɵregister() {
         // Register this control on the field it is currently bound to. We do this at the end of
         // initialization so that it only runs if we are actually syncing with this control
-        // (as opposed to just passing the field through to its `control` input).
+        // (as opposed to just passing the field through to its `field` input).
         effect((onCleanup) => {
             const fieldNode = this.state();
-            fieldNode.nodeState.controls.update((controls) => [...controls, this]);
+            fieldNode.nodeState.fieldBindings.update((controls) => [
+                ...controls,
+                this,
+            ]);
             onCleanup(() => {
-                fieldNode.nodeState.controls.update((controls) => controls.filter((c) => c !== this));
+                fieldNode.nodeState.fieldBindings.update((controls) => controls.filter((c) => c !== this));
             });
         }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: Control, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0-next.7", type: Control, isStandalone: true, selector: "[control]", inputs: { field: { classPropertyName: "field", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: CONTROL, useExisting: Control }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: Field, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0-next.9", type: Field, isStandalone: true, selector: "[field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: FIELD, useExisting: Field },
+            { provide: NgControl, useFactory: () => inject(Field).ɵgetOrCreateNgControl() },
+        ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: Control, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: Field, decorators: [{
             type: Directive,
-            args: [{ selector: '[control]', providers: [{ provide: CONTROL, useExisting: Control }] }]
-        }] });
+            args: [{
+                    selector: '[field]',
+                    providers: [
+                        { provide: FIELD, useExisting: Field },
+                        { provide: NgControl, useFactory: () => inject(Field).ɵgetOrCreateNgControl() },
+                    ],
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
 
 /**
  * `FieldContext` implementation, backed by a `FieldNode`.
@@ -2083,8 +2209,8 @@ class FieldNode {
     get readonly() {
         return this.nodeState.readonly;
     }
-    get controls() {
-        return this.nodeState.controls;
+    get fieldBindings() {
+        return this.nodeState.fieldBindings;
     }
     get submitting() {
         return this.submitState.submitting;
@@ -2092,23 +2218,26 @@ class FieldNode {
     get name() {
         return this.nodeState.name;
     }
+    propertyOrUndefined(prop) {
+        return this.hasProperty(prop) ? this.property(prop) : undefined;
+    }
     get max() {
-        return this.property(MAX);
+        return this.propertyOrUndefined(MAX);
     }
     get maxLength() {
-        return this.property(MAX_LENGTH);
+        return this.propertyOrUndefined(MAX_LENGTH);
     }
     get min() {
-        return this.property(MIN);
+        return this.propertyOrUndefined(MIN);
     }
     get minLength() {
-        return this.property(MIN_LENGTH);
+        return this.propertyOrUndefined(MIN_LENGTH);
     }
     get pattern() {
-        return this.property(PATTERN);
+        return this.propertyOrUndefined(PATTERN);
     }
     get required() {
-        return this.property(REQUIRED);
+        return this.propertyOrUndefined(REQUIRED);
     }
     property(prop) {
         return this.propertyState.get(prop);
@@ -2203,8 +2332,8 @@ class FieldNodeState {
     markAsUntouched() {
         this.selfTouched.set(false);
     }
-    /** The UI controls the field is currently bound to. */
-    controls = signal([], ...(ngDevMode ? [{ debugName: "controls" }] : []));
+    /** The {@link Field} directives that bind this field to a UI control. */
+    fieldBindings = signal([], ...(ngDevMode ? [{ debugName: "fieldBindings" }] : []));
     constructor(node) {
         this.node = node;
     }
@@ -3190,5 +3319,5 @@ function standardIssueToFormTreeError(field, issue) {
     return addDefaultField(standardSchemaError(issue), target);
 }
 
-export { AggregateProperty, CONTROL, Control, CustomValidationError, EmailValidationError, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, Property, REQUIRED, RequiredValidationError, StandardSchemaValidationError, aggregateProperty, andProperty, apply, applyEach, applyWhen, applyWhenValue, createProperty, customError, disabled, email, emailError, form, hidden, listProperty, max, maxError, maxLength, maxLengthError, maxProperty, min, minError, minLength, minLengthError, minProperty, orProperty, pattern, patternError, property, readonly, reducedProperty, required, requiredError, schema, standardSchemaError, submit, validate, validateAsync, validateHttp, validateStandardSchema, validateTree };
+export { AggregateProperty, CustomValidationError, EmailValidationError, FIELD, Field, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, Property, REQUIRED, RequiredValidationError, StandardSchemaValidationError, aggregateProperty, andProperty, apply, applyEach, applyWhen, applyWhenValue, createProperty, customError, disabled, email, emailError, form, hidden, listProperty, max, maxError, maxLength, maxLengthError, maxProperty, min, minError, minLength, minLengthError, minProperty, orProperty, pattern, patternError, property, readonly, reducedProperty, required, requiredError, schema, standardSchemaError, submit, validate, validateAsync, validateHttp, validateStandardSchema, validateTree };
 //# sourceMappingURL=signals.mjs.map