@angular/forms 22.0.0-next.4 → 22.0.0-next.5

package/fesm2022/signals-compat.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v22.0.0-next.4
+ * @license Angular v22.0.0-next.5
  * (c) 2010-2026 Google LLC. https://angular.dev/
  * License: MIT
  */

package/fesm2022/signals.mjs

@@ -1,14 +1,15 @@
 /**
- * @license Angular v22.0.0-next.4
+ * @license Angular v22.0.0-next.5
  * (c) 2010-2026 Google LLC. https://angular.dev/
  * License: MIT
  */
 
 import * as i0 from '@angular/core';
-import { InjectionToken, resource, ɵisPromise as _isPromise, linkedSignal, inject, ɵRuntimeError as _RuntimeError, untracked, input, computed, Renderer2, DestroyRef, Injector, ElementRef, signal, afterRenderEffect, effect, ɵformatRuntimeError as _formatRuntimeError, Directive } from '@angular/core';
+import { InjectionToken, debounced, resource, ɵisPromise as _isPromise, linkedSignal, inject, ɵRuntimeError as _RuntimeError, untracked, CSP_NONCE, PLATFORM_ID, Injectable, forwardRef, input, computed, Renderer2, DestroyRef, Injector, ElementRef, signal, afterRenderEffect, effect, ɵformatRuntimeError as _formatRuntimeError, Directive } from '@angular/core';
 import { ɵFORM_FIELD_PARSE_ERRORS as _FORM_FIELD_PARSE_ERRORS, Validators, ɵsetNativeDomProperty as _setNativeDomProperty, ɵisNativeFormElement as _isNativeFormElement, ɵisNumericFormElement as _isNumericFormElement, ɵisTextualFormElement as _isTextualFormElement, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { assertPathIsCurrent, FieldPathNode, addDefaultField, metadata, createMetadataKey, MAX, MAX_LENGTH, MIN, MIN_LENGTH, PATTERN, REQUIRED, createManagedMetadataKey, DEBOUNCER, signalErrorsToValidationErrors, submit } from './_validation_errors-chunk.mjs';
+import { assertPathIsCurrent, FieldPathNode, addDefaultField, metadata, createMetadataKey, MAX, MAX_LENGTH, MIN, MIN_LENGTH, PATTERN, REQUIRED, createManagedMetadataKey, IS_ASYNC_VALIDATION_RESOURCE, DEBOUNCER, signalErrorsToValidationErrors, submit } from './_validation_errors-chunk.mjs';
 export { MetadataKey, MetadataReducer, apply, applyEach, applyWhen, applyWhenValue, form, schema } from './_validation_errors-chunk.mjs';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { httpResource } from '@angular/common/http';
 import '@angular/core/primitives/signals';
 
@@ -344,7 +345,14 @@ function required(path, config) {
 function validateAsync(path, opts) {
   assertPathIsCurrent(path);
   const pathNode = FieldPathNode.unwrapFieldPath(path);
-  const RESOURCE = createManagedMetadataKey(opts.factory);
+  const RESOURCE = createManagedMetadataKey((_state, params) => {
+    if (opts.debounce !== undefined) {
+      const debouncedResource = debounced(() => params(), opts.debounce);
+      return opts.factory(debouncedResource.value);
+    }
+    return opts.factory(params);
+  });
+  RESOURCE[IS_ASYNC_VALIDATION_RESOURCE] = true;
   metadata(path, RESOURCE, ctx => {
     const node = ctx.stateOf(path);
     const validationState = node.validationState;
@@ -445,6 +453,7 @@ class StandardSchemaValidationError extends BaseNgValidationError {
 function validateHttp(path, opts) {
   validateAsync(path, {
     params: opts.request,
+    debounce: opts.debounce,
     factory: request => httpResource(request, opts.options),
     onSuccess: opts.onSuccess,
     onError: opts.onError
@@ -654,9 +663,9 @@ function bindingUpdated(bindings, key, value) {
   return false;
 }
 
-function getNativeControlValue(element, currentValue) {
+function getNativeControlValue(element, currentValue, validityMonitor) {
   let modelValue;
-  if (element.validity.badInput) {
+  if (isInput(element) && validityMonitor.isBadInput(element)) {
     return {
       error: new NativeInputParseError()
     };
@@ -692,6 +701,25 @@ function getNativeControlValue(element, currentValue) {
       }
       break;
   }
+  if (element.tagName === 'INPUT' && element.type === 'text') {
+    modelValue ??= untracked(currentValue);
+    if (typeof modelValue === 'number' || modelValue === null) {
+      if (element.value === '') {
+        return {
+          value: null
+        };
+      }
+      const parsed = Number(element.value);
+      if (Number.isNaN(parsed)) {
+        return {
+          error: new NativeInputParseError()
+        };
+      }
+      return {
+        value: parsed
+      };
+    }
+  }
   return {
     value: element.value
   };
@@ -727,6 +755,16 @@ function setNativeControlValue(element, value) {
         return;
       }
   }
+  if (element.tagName === 'INPUT' && element.type === 'text') {
+    if (typeof value === 'number') {
+      element.value = isNaN(value) ? '' : String(value);
+      return;
+    }
+    if (value === null) {
+      element.value = '';
+      return;
+    }
+  }
   element.value = value;
 }
 function setNativeNumberControlValue(element, value) {
@@ -736,6 +774,12 @@ function setNativeNumberControlValue(element, value) {
     element.valueAsNumber = value;
   }
 }
+function isInput(element) {
+  return element.tagName === 'INPUT';
+}
+function inputRequiresValidityTracking(input) {
+  return input.type === 'date' || input.type === 'datetime-local' || input.type === 'month' || input.type === 'time' || input.type === 'week';
+}
 
 function customControlCreate(host, parent) {
   host.listenToCustomControlModel(value => parent.state().controlValue.set(value));
@@ -831,13 +875,16 @@ function isRelevantSelectMutation(mutation) {
   return false;
 }
 
-function nativeControlCreate(host, parent, parseErrorsSource) {
+function nativeControlCreate(host, parent, parseErrorsSource, validityMonitor) {
   let updateMode = false;
   const input = parent.nativeFormElement;
-  const parser = createParser(() => parent.state().value(), rawValue => parent.state().controlValue.set(rawValue), () => getNativeControlValue(input, parent.state().value));
+  const parser = createParser(() => parent.state().value(), rawValue => parent.state().controlValue.set(rawValue), _rawValue => getNativeControlValue(input, parent.state().value, validityMonitor));
   parseErrorsSource.set(parser.errors);
   host.listenToDom('input', () => parser.setRawValue(undefined));
   host.listenToDom('blur', () => parent.state().markAsTouched());
+  if (isInput(input) && inputRequiresValidityTracking(input)) {
+    validityMonitor.watchValidity(input, () => parser.setRawValue(undefined));
+  }
   parent.registerAsBinding();
   if (input.tagName === 'SELECT') {
     observeSelectMutations(input, () => {
@@ -867,6 +914,112 @@ function nativeControlCreate(host, parent, parseErrorsSource) {
   };
 }
 
+class InputValidityMonitor {
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "22.0.0-next.5",
+    ngImport: i0,
+    type: InputValidityMonitor,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Injectable
+  });
+  static ɵprov = i0.ɵɵngDeclareInjectable({
+    minVersion: "12.0.0",
+    version: "22.0.0-next.5",
+    ngImport: i0,
+    type: InputValidityMonitor,
+    providedIn: 'root',
+    useClass: i0.forwardRef(() => AnimationInputValidityMonitor)
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "22.0.0-next.5",
+  ngImport: i0,
+  type: InputValidityMonitor,
+  decorators: [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root',
+      useClass: forwardRef(() => AnimationInputValidityMonitor)
+    }]
+  }]
+});
+class AnimationInputValidityMonitor extends InputValidityMonitor {
+  document = inject(DOCUMENT);
+  cspNonce = inject(CSP_NONCE, {
+    optional: true
+  });
+  isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  injectedStyles = new WeakMap();
+  watchValidity(element, callback) {
+    if (!this.isBrowser) {
+      return;
+    }
+    const rootNode = element.getRootNode();
+    if (!this.injectedStyles.has(rootNode)) {
+      this.injectedStyles.set(rootNode, this.createTransitionStyle(rootNode));
+    }
+    element.addEventListener('animationstart', event => {
+      const animationEvent = event;
+      if (animationEvent.animationName === 'ng-valid' || animationEvent.animationName === 'ng-invalid') {
+        callback();
+      }
+    });
+  }
+  isBadInput(element) {
+    return element.validity?.badInput ?? false;
+  }
+  createTransitionStyle(rootNode) {
+    const element = this.document.createElement('style');
+    if (this.cspNonce) {
+      element.nonce = this.cspNonce;
+    }
+    element.textContent = `
+      @keyframes ng-valid {}
+      @keyframes ng-invalid {}
+      input:valid, textarea:valid {
+        animation: ng-valid 0.001s;
+      }
+      input:invalid, textarea:invalid {
+        animation: ng-invalid 0.001s;
+      }
+    `;
+    if (rootNode.nodeType === 9) {
+      rootNode.head?.appendChild(element);
+    } else {
+      rootNode.appendChild(element);
+    }
+    return element;
+  }
+  ngOnDestroy() {
+    this.injectedStyles.get(this.document)?.remove();
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "22.0.0-next.5",
+    ngImport: i0,
+    type: AnimationInputValidityMonitor,
+    deps: null,
+    target: i0.ɵɵFactoryTarget.Injectable
+  });
+  static ɵprov = i0.ɵɵngDeclareInjectable({
+    minVersion: "12.0.0",
+    version: "22.0.0-next.5",
+    ngImport: i0,
+    type: AnimationInputValidityMonitor
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "22.0.0-next.5",
+  ngImport: i0,
+  type: AnimationInputValidityMonitor,
+  decorators: [{
+    type: Injectable
+  }]
+});
+
 const ɵNgFieldDirective = Symbol();
 const FORM_FIELD = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD' : '');
 class FormField {
@@ -895,6 +1048,7 @@ class FormField {
   config = inject(SIGNAL_FORMS_CONFIG, {
     optional: true
   });
+  validityMonitor = inject(InputValidityMonitor);
   parseErrorsSource = signal(undefined, ...(ngDevMode ? [{
     debugName: "parseErrorsSource"
   }] : []));
@@ -982,7 +1136,7 @@ class FormField {
     } else if (host.customControl) {
       this.ɵngControlUpdate = customControlCreate(host, this);
     } else if (this.elementIsNativeFormElement) {
-      this.ɵngControlUpdate = nativeControlCreate(host, this, this.parseErrorsSource);
+      this.ɵngControlUpdate = nativeControlCreate(host, this, this.parseErrorsSource, this.validityMonitor);
     } else {
       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.`);
     }
@@ -1010,7 +1164,7 @@ class FormField {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.4",
+    version: "22.0.0-next.5",
     ngImport: i0,
     type: FormField,
     deps: [],
@@ -1018,7 +1172,7 @@ class FormField {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.4",
+    version: "22.0.0-next.5",
     type: FormField,
     isStandalone: true,
     selector: "[formField]",
@@ -1050,7 +1204,7 @@ class FormField {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.4",
+  version: "22.0.0-next.5",
   ngImport: i0,
   type: FormField,
   decorators: [{
@@ -1091,11 +1245,17 @@ class FormRoot {
   });
   onSubmit(event) {
     event.preventDefault();
-    submit(this.fieldTree());
+    untracked(() => {
+      const fieldTree = this.fieldTree();
+      const node = fieldTree();
+      if (node.structure.fieldManager.submitOptions) {
+        submit(fieldTree);
+      }
+    });
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.4",
+    version: "22.0.0-next.5",
     ngImport: i0,
     type: FormRoot,
     deps: [],
@@ -1103,7 +1263,7 @@ class FormRoot {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.4",
+    version: "22.0.0-next.5",
     type: FormRoot,
     isStandalone: true,
     selector: "form[formRoot]",
@@ -1129,7 +1289,7 @@ class FormRoot {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.4",
+  version: "22.0.0-next.5",
   ngImport: i0,
   type: FormRoot,
   decorators: [{
@@ -1154,5 +1314,5 @@ i0.ɵɵngDeclareClassMetadata({
   }
 });
 
-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 };
+export { BaseNgValidationError, EmailValidationError, FORM_FIELD, FormField, FormRoot, IS_ASYNC_VALIDATION_RESOURCE, 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