@angular/forms 21.2.0-next.3 → 21.2.0-rc.0

package/fesm2022/signals.mjs

@@ -1,11 +1,11 @@
 /**
- * @license Angular v21.2.0-next.3
+ * @license Angular v21.2.0-rc.0
  * (c) 2010-2026 Google LLC. https://angular.dev/
  * License: MIT
  */
 
 import * as i0 from '@angular/core';
-import { InjectionToken, ɵisPromise as _isPromise, resource, signal, linkedSignal, inject, ɵRuntimeError as _RuntimeError, untracked, input, Renderer2, DestroyRef, computed, Injector, ElementRef, afterRenderEffect, effect, Directive } from '@angular/core';
+import { InjectionToken, ɵisPromise as _isPromise, resource, linkedSignal, inject, ɵRuntimeError as _RuntimeError, untracked, input, Renderer2, DestroyRef, computed, Injector, ElementRef, signal, afterRenderEffect, effect, ɵformatRuntimeError as _formatRuntimeError, Directive } from '@angular/core';
 import { assertPathIsCurrent, FieldPathNode, addDefaultField, metadata, createMetadataKey, MAX, MAX_LENGTH, MIN, MIN_LENGTH, PATTERN, REQUIRED, createManagedMetadataKey, DEBOUNCER, signalErrorsToValidationErrors, submit } from './_validation_errors-chunk.mjs';
 export { MetadataKey, MetadataReducer, apply, applyEach, applyWhen, applyWhenValue, form, schema } from './_validation_errors-chunk.mjs';
 import { httpResource } from '@angular/common/http';
@@ -155,6 +155,9 @@ class PatternValidationError extends BaseNgValidationError {
 class EmailValidationError extends BaseNgValidationError {
   kind = 'email';
 }
+class NativeInputParseError extends BaseNgValidationError {
+  kind = 'parse';
+}
 const NgValidationError = BaseNgValidationError;
 
 const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
@@ -467,38 +470,53 @@ function immediate() {}
 
 const FORM_FIELD_PARSE_ERRORS = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD_PARSE_ERRORS' : '');
 
+function createParser(getValue, setValue, parse) {
+  const errors = linkedSignal({
+    ...(ngDevMode ? {
+      debugName: "errors"
+    } : {}),
+    source: getValue,
+    computation: () => []
+  });
+  const setRawValue = rawValue => {
+    const result = parse(rawValue);
+    errors.set(result.errors ?? []);
+    if (result.value !== undefined) {
+      setValue(result.value);
+    }
+  };
+  return {
+    errors: errors.asReadonly(),
+    setRawValue
+  };
+}
+
 function transformedValue(value, options) {
   const {
     parse,
     format
   } = options;
-  const parseErrors = signal([], ...(ngDevMode ? [{
-    debugName: "parseErrors"
-  }] : []));
-  const rawValue = linkedSignal(() => format(value()), ...(ngDevMode ? [{
-    debugName: "rawValue"
-  }] : []));
+  const parser = createParser(value, value.set, parse);
   const formFieldParseErrors = inject(FORM_FIELD_PARSE_ERRORS, {
     self: true,
     optional: true
   });
   if (formFieldParseErrors) {
-    formFieldParseErrors.set(parseErrors);
+    formFieldParseErrors.set(parser.errors);
   }
+  const rawValue = linkedSignal(() => format(value()), ...(ngDevMode ? [{
+    debugName: "rawValue"
+  }] : []));
   const result = rawValue;
+  result.parseErrors = parser.errors;
   const originalSet = result.set.bind(result);
   result.set = newRawValue => {
-    const result = parse(newRawValue);
-    parseErrors.set(result.errors ?? []);
-    if (result.value !== undefined) {
-      value.set(result.value);
-    }
+    parser.setRawValue(newRawValue);
     originalSet(newRawValue);
   };
   result.update = updateFn => {
     result.set(updateFn(rawValue()));
   };
-  result.parseErrors = parseErrors.asReadonly();
   return result;
 }
 
@@ -621,29 +639,46 @@ function isTextualFormElement(element) {
   return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
 }
 function getNativeControlValue(element, currentValue) {
+  let modelValue;
+  if (element.validity.badInput) {
+    return {
+      errors: [new NativeInputParseError()]
+    };
+  }
   switch (element.type) {
     case 'checkbox':
-      return element.checked;
+      return {
+        value: element.checked
+      };
     case 'number':
     case 'range':
     case 'datetime-local':
-      if (typeof untracked(currentValue) === 'number') {
-        return element.valueAsNumber;
+      modelValue = untracked(currentValue);
+      if (typeof modelValue === 'number' || modelValue === null) {
+        return {
+          value: element.value === '' ? null : element.valueAsNumber
+        };
       }
       break;
     case 'date':
     case 'month':
     case 'time':
     case 'week':
-      const value = untracked(currentValue);
-      if (value === null || value instanceof Date) {
-        return element.valueAsDate;
-      } else if (typeof value === 'number') {
-        return element.valueAsNumber;
+      modelValue = untracked(currentValue);
+      if (modelValue === null || modelValue instanceof Date) {
+        return {
+          value: element.valueAsDate
+        };
+      } else if (typeof modelValue === 'number') {
+        return {
+          value: element.valueAsNumber
+        };
       }
       break;
   }
-  return element.value;
+  return {
+    value: element.value
+  };
 }
 function setNativeControlValue(element, value) {
   switch (element.type) {
@@ -659,6 +694,9 @@ function setNativeControlValue(element, value) {
       if (typeof value === 'number') {
         setNativeNumberControlValue(element, value);
         return;
+      } else if (value === null) {
+        element.value = '';
+        return;
       }
       break;
     case 'date':
@@ -803,13 +841,12 @@ function isRelevantSelectMutation(mutation) {
   return false;
 }
 
-function nativeControlCreate(host, parent) {
+function nativeControlCreate(host, parent, parseErrorsSource) {
   let updateMode = false;
   const input = parent.nativeFormElement;
-  host.listenToDom('input', () => {
-    const state = parent.state();
-    state.controlValue.set(getNativeControlValue(input, state.value));
-  });
+  const parser = createParser(() => parent.state().value(), rawValue => parent.state().controlValue.set(rawValue), () => getNativeControlValue(input, parent.state().value));
+  parseErrorsSource.set(parser.errors);
+  host.listenToDom('input', () => parser.setRawValue(undefined));
   host.listenToDom('blur', () => parent.state().markAsTouched());
   parent.registerAsBinding();
   if (input.tagName === 'SELECT') {
@@ -843,15 +880,15 @@ function nativeControlCreate(host, parent) {
 const ɵNgFieldDirective = Symbol();
 const FORM_FIELD = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD' : '');
 class FormField {
-  fieldTree = input.required({
+  field = input.required({
     ...(ngDevMode ? {
-      debugName: "fieldTree"
+      debugName: "field"
     } : {}),
     alias: 'formField'
   });
   renderer = inject(Renderer2);
   destroyRef = inject(DestroyRef);
-  state = computed(() => this.fieldTree()(), ...(ngDevMode ? [{
+  state = computed(() => this.field()(), ...(ngDevMode ? [{
     debugName: "state"
   }] : []));
   injector = inject(Injector);
@@ -877,7 +914,7 @@ class FormField {
   }
   parseErrors = computed(() => this.parseErrorsSource()?.().map(err => ({
     ...err,
-    fieldTree: untracked(this.fieldTree),
+    fieldTree: untracked(this.state).fieldTree,
     formField: this
   })) ?? [], ...(ngDevMode ? [{
     debugName: "parseErrors"
@@ -917,12 +954,12 @@ class FormField {
   }
   registerAsBinding(bindingOptions) {
     if (this.isFieldBinding) {
-      throw new _RuntimeError(1913, ngDevMode && 'FormField already registered as a binding');
+      throw new _RuntimeError(1913, typeof ngDevMode !== 'undefined' && ngDevMode && 'FormField already registered as a binding');
     }
     this.isFieldBinding = true;
     this.installClassBindingEffect();
     if (bindingOptions?.focus) {
-      this.focuser = bindingOptions.focus;
+      this.focuser = focusOptions => bindingOptions.focus(focusOptions);
     }
     effect(onCleanup => {
       const fieldNode = this.state();
@@ -933,6 +970,17 @@ class FormField {
     }, {
       injector: this.injector
     });
+    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+      effect(() => {
+        const fieldNode = this.state();
+        if (fieldNode.hidden()) {
+          const path = fieldNode.structure.pathKeys().join('.') || '<root>';
+          console.warn(_formatRuntimeError(1916, `Field '${path}' is hidden but is being rendered. ` + `Hidden fields should be removed from the DOM using @if.`));
+        }
+      }, {
+        injector: this.injector
+      });
+    }
   }
   [ɵNgFieldDirective];
   ɵngControlCreate(host) {
@@ -944,9 +992,9 @@ class FormField {
     } else if (host.customControl) {
       this.ɵngControlUpdate = customControlCreate(host, this);
     } else if (this.elementIsNativeFormElement) {
-      this.ɵngControlUpdate = nativeControlCreate(host, this);
+      this.ɵngControlUpdate = nativeControlCreate(host, this, this.parseErrorsSource);
     } else {
-      throw new _RuntimeError(1914, ngDevMode && `${host.descriptor} is an invalid [formField] directive host. The host must be a native form control ` + `(such as <input>', '<select>', or '<textarea>') or a custom form control with a 'value' or ` + `'checked' model.`);
+      throw new _RuntimeError(1914, typeof ngDevMode !== 'undefined' && ngDevMode && `${host.descriptor} is an invalid [formField] directive host. The host must be a native form control ` + `(such as <input>', '<select>', or '<textarea>') or a custom form control with a 'value' or ` + `'checked' model.`);
     }
   }
   ɵngControlUpdate;
@@ -972,7 +1020,7 @@ class FormField {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     ngImport: i0,
     type: FormField,
     deps: [],
@@ -980,13 +1028,13 @@ class FormField {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     type: FormField,
     isStandalone: true,
     selector: "[formField]",
     inputs: {
-      fieldTree: {
-        classPropertyName: "fieldTree",
+      field: {
+        classPropertyName: "field",
         publicName: "formField",
         isSignal: true,
         isRequired: true,
@@ -1012,7 +1060,7 @@ class FormField {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.2.0-next.3",
+  version: "21.2.0-rc.0",
   ngImport: i0,
   type: FormField,
   decorators: [{
@@ -1033,7 +1081,7 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }],
   propDecorators: {
-    fieldTree: [{
+    field: [{
       type: i0.Input,
       args: [{
         isSignal: true,
@@ -1057,7 +1105,7 @@ class FormRoot {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     ngImport: i0,
     type: FormRoot,
     deps: [],
@@ -1065,7 +1113,7 @@ class FormRoot {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     type: FormRoot,
     isStandalone: true,
     selector: "form[formRoot]",
@@ -1091,7 +1139,7 @@ class FormRoot {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.2.0-next.3",
+  version: "21.2.0-rc.0",
   ngImport: i0,
   type: FormRoot,
   decorators: [{
@@ -1116,5 +1164,5 @@ i0.ɵɵngDeclareClassMetadata({
   }
 });
 
-export { BaseNgValidationError, EmailValidationError, FORM_FIELD, FormField, FormRoot, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, REQUIRED, RequiredValidationError, StandardSchemaValidationError, createManagedMetadataKey, createMetadataKey, debounce, disabled, email, emailError, hidden, max, maxError, maxLength, maxLengthError, metadata, min, minError, minLength, minLengthError, pattern, patternError, provideSignalFormsConfig, readonly, required, requiredError, standardSchemaError, submit, transformedValue, validate, validateAsync, validateHttp, validateStandardSchema, validateTree, ɵNgFieldDirective };
+export { BaseNgValidationError, EmailValidationError, FORM_FIELD, FormField, FormRoot, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MinLengthValidationError, MinValidationError, NativeInputParseError, NgValidationError, PATTERN, PatternValidationError, REQUIRED, RequiredValidationError, StandardSchemaValidationError, createManagedMetadataKey, createMetadataKey, debounce, disabled, email, emailError, hidden, max, maxError, maxLength, maxLengthError, metadata, min, minError, minLength, minLengthError, pattern, patternError, provideSignalFormsConfig, readonly, required, requiredError, standardSchemaError, submit, transformedValue, validate, validateAsync, validateHttp, validateStandardSchema, validateTree, ɵNgFieldDirective };
 //# sourceMappingURL=signals.mjs.map