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

package/fesm2022/signals.mjs

@@ -1,15 +1,16 @@
 /**
- * @license Angular v22.0.0-next.3
+ * @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, ɵisPromise as _isPromise, resource, linkedSignal, inject, ɵRuntimeError as _RuntimeError, untracked, input, computed, Renderer2, DestroyRef, 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';
+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, 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 { Validators, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import '@angular/core/primitives/signals';
 
 const SIGNAL_FORMS_CONFIG = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'SIGNAL_FORMS_CONFIG' : '');
@@ -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
@@ -498,8 +507,6 @@ function debounceUntilBlur() {
 }
 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 ? {
@@ -528,7 +535,7 @@ function transformedValue(value, options) {
     format
   } = options;
   const parser = createParser(value, value.set, parse);
-  const formFieldParseErrors = inject(FORM_FIELD_PARSE_ERRORS, {
+  const formFieldParseErrors = inject(_FORM_FIELD_PARSE_ERRORS, {
     self: true,
     optional: true
   });
@@ -656,22 +663,9 @@ function bindingUpdated(bindings, key, value) {
   return false;
 }
 
-function isNativeFormElement(element) {
-  return element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA';
-}
-function isNumericFormElement(element) {
-  if (element.tagName !== 'INPUT') {
-    return false;
-  }
-  const type = element.type;
-  return type === 'date' || type === 'datetime-local' || type === 'month' || type === 'number' || type === 'range' || type === 'time' || type === 'week';
-}
-function isTextualFormElement(element) {
-  return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
-}
-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()
     };
@@ -707,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
   };
@@ -742,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) {
@@ -751,31 +774,11 @@ function setNativeNumberControlValue(element, value) {
     element.valueAsNumber = value;
   }
 }
-function setNativeDomProperty(renderer, element, name, value) {
-  switch (name) {
-    case 'name':
-      renderer.setAttribute(element, name, value);
-      break;
-    case 'disabled':
-    case 'readonly':
-    case 'required':
-      if (value) {
-        renderer.setAttribute(element, name, '');
-      } else {
-        renderer.removeAttribute(element, name);
-      }
-      break;
-    case 'max':
-    case 'min':
-    case 'minLength':
-    case 'maxLength':
-      if (value !== undefined) {
-        renderer.setAttribute(element, name, value.toString());
-      } else {
-        renderer.removeAttribute(element, name);
-      }
-      break;
-  }
+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) {
@@ -799,7 +802,7 @@ function customControlCreate(host, parent) {
       if (bindingUpdated(bindings, name, value)) {
         host.setInputOnDirectives(name, value);
         if (parent.elementAcceptsNativeProperty(name) && !host.customControlHasInput(name)) {
-          setNativeDomProperty(parent.renderer, parent.nativeFormElement, name, value);
+          _setNativeDomProperty(parent.renderer, parent.nativeFormElement, name, value);
         }
       }
     }
@@ -824,7 +827,7 @@ function cvaControlCreate(host, parent) {
         if (name === 'disabled' && parent.controlValueAccessor.setDisabledState) {
           untracked(() => parent.controlValueAccessor.setDisabledState(value));
         } else if (!propertyWasSet && parent.elementAcceptsNativeProperty(name)) {
-          setNativeDomProperty(parent.renderer, parent.nativeFormElement, name, value);
+          _setNativeDomProperty(parent.renderer, parent.nativeFormElement, name, value);
         }
       }
     }
@@ -872,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, () => {
@@ -900,7 +906,7 @@ function nativeControlCreate(host, parent, parseErrorsSource) {
       if (bindingUpdated(bindings, name, value)) {
         host.setInputOnDirectives(name, value);
         if (parent.elementAcceptsNativeProperty(name)) {
-          setNativeDomProperty(parent.renderer, input, name, value);
+          _setNativeDomProperty(parent.renderer, input, name, value);
         }
       }
     }
@@ -908,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 {
@@ -924,9 +1036,9 @@ class FormField {
   destroyRef = inject(DestroyRef);
   injector = inject(Injector);
   element = inject(ElementRef).nativeElement;
-  elementIsNativeFormElement = isNativeFormElement(this.element);
-  elementAcceptsNumericValues = isNumericFormElement(this.element);
-  elementAcceptsTextualValues = isTextualFormElement(this.element);
+  elementIsNativeFormElement = _isNativeFormElement(this.element);
+  elementAcceptsNumericValues = _isNumericFormElement(this.element);
+  elementAcceptsTextualValues = _isTextualFormElement(this.element);
   nativeFormElement = this.elementIsNativeFormElement ? this.element : undefined;
   focuser = options => this.element.focus(options);
   controlValueAccessors = inject(NG_VALUE_ACCESSOR, {
@@ -936,6 +1048,7 @@ class FormField {
   config = inject(SIGNAL_FORMS_CONFIG, {
     optional: true
   });
+  validityMonitor = inject(InputValidityMonitor);
   parseErrorsSource = signal(undefined, ...(ngDevMode ? [{
     debugName: "parseErrorsSource"
   }] : []));
@@ -1023,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.`);
     }
@@ -1051,7 +1164,7 @@ class FormField {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.3",
+    version: "22.0.0-next.5",
     ngImport: i0,
     type: FormField,
     deps: [],
@@ -1059,7 +1172,7 @@ class FormField {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.3",
+    version: "22.0.0-next.5",
     type: FormField,
     isStandalone: true,
     selector: "[formField]",
@@ -1079,7 +1192,7 @@ class FormField {
       provide: NgControl,
       useFactory: () => inject(FormField).interopNgControl
     }, {
-      provide: FORM_FIELD_PARSE_ERRORS,
+      provide: _FORM_FIELD_PARSE_ERRORS,
       useFactory: () => inject(FormField).parseErrorsSource
     }],
     exportAs: ["formField"],
@@ -1091,7 +1204,7 @@ class FormField {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.3",
+  version: "22.0.0-next.5",
   ngImport: i0,
   type: FormField,
   decorators: [{
@@ -1106,7 +1219,7 @@ i0.ɵɵngDeclareClassMetadata({
         provide: NgControl,
         useFactory: () => inject(FormField).interopNgControl
       }, {
-        provide: FORM_FIELD_PARSE_ERRORS,
+        provide: _FORM_FIELD_PARSE_ERRORS,
         useFactory: () => inject(FormField).parseErrorsSource
       }]
     }]
@@ -1132,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.3",
+    version: "22.0.0-next.5",
     ngImport: i0,
     type: FormRoot,
     deps: [],
@@ -1144,7 +1263,7 @@ class FormRoot {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.3",
+    version: "22.0.0-next.5",
     type: FormRoot,
     isStandalone: true,
     selector: "form[formRoot]",
@@ -1170,7 +1289,7 @@ class FormRoot {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.3",
+  version: "22.0.0-next.5",
   ngImport: i0,
   type: FormRoot,
   decorators: [{
@@ -1195,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