@angular/forms - npm Package Compare versions

Comparing version 21.2.0-next.3 to 21.2.0-rc.0

fesm2022/_validation_errors-chunk.mjs

 /**
- * @license Angular v21.2.0-next.3
+ * @license Angular v21.2.0-rc.0
  * (c) 2010-2026 Google LLC. https://angular.dev/
@@ -4,0 +4,0 @@ * License: MIT

fesm2022/signals-compat.mjs

 /**
- * @license Angular v21.2.0-next.3
+ * @license Angular v21.2.0-rc.0
  * (c) 2010-2026 Google LLC. https://angular.dev/
@@ -28,6 +28,4 @@ * License: MIT
   return () => {
-    if (destroy$) {
-      destroy$.next();
-      destroy$.complete();
-    }
+    destroy$.next();
+    destroy$.complete();
     return destroy$ = new ReplaySubject(1);
@@ -34,0 +32,0 @@ };

fesm2022/signals.mjs

 /**
- * @license Angular v21.2.0-next.3
+ * @license Angular v21.2.0-rc.0
  * (c) 2010-2026 Google LLC. https://angular.dev/
@@ -8,3 +8,3 @@ * 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';
@@ -159,2 +159,5 @@ export { MetadataKey, MetadataReducer, apply, applyEach, applyWhen, applyWhenValue, form, schema } from './_validation_errors-chunk.mjs';
 }
+class NativeInputParseError extends BaseNgValidationError {
+  kind = 'parse';
+}
 const NgValidationError = BaseNgValidationError;
@@ -472,2 +475,23 @@
 
+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) {
@@ -478,8 +502,3 @@ const {
   } = 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, {
@@ -490,12 +509,12 @@ self: 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);
@@ -506,3 +525,2 @@ };
   };
-  result.parseErrors = parseErrors.asReadonly();
   return result;
@@ -630,10 +648,21 @@ }
 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
+        };
       }
@@ -645,11 +674,17 @@ break;
     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
+  };
 }
@@ -670,2 +705,5 @@ function setNativeControlValue(element, value) {
         return;
+      } else if (value === null) {
+        element.value = '';
+        return;
       }
@@ -815,9 +853,8 @@ break;
 
-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());
@@ -856,5 +893,5 @@ parent.registerAsBinding();
 class FormField {
-  fieldTree = input.required({
+  field = input.required({
     ...(ngDevMode ? {
-      debugName: "fieldTree"
+      debugName: "field"
     } : {}),
@@ -865,3 +902,3 @@ alias: 'formField'
   destroyRef = inject(DestroyRef);
-  state = computed(() => this.fieldTree()(), ...(ngDevMode ? [{
+  state = computed(() => this.field()(), ...(ngDevMode ? [{
     debugName: "state"
@@ -892,3 +929,3 @@ }] : []));
     ...err,
-    fieldTree: untracked(this.fieldTree),
+    fieldTree: untracked(this.state).fieldTree,
     formField: this
@@ -933,3 +970,3 @@ })) ?? [], ...(ngDevMode ? [{
     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');
     }
@@ -939,3 +976,3 @@ this.isFieldBinding = true;
     if (bindingOptions?.focus) {
-      this.focuser = bindingOptions.focus;
+      this.focuser = focusOptions => bindingOptions.focus(focusOptions);
     }
@@ -951,2 +988,13 @@ effect(onCleanup => {
     });
+    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
+      });
+    }
   }
@@ -963,5 +1011,5 @@ [ɵNgFieldDirective];
     } 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.`);
     }
@@ -992,3 +1040,3 @@ }
     minVersion: "12.0.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     ngImport: i0,
@@ -1001,3 +1049,3 @@ type: FormField,
     minVersion: "17.1.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     type: FormField,
@@ -1007,4 +1055,4 @@ isStandalone: true,
     inputs: {
-      fieldTree: {
-        classPropertyName: "fieldTree",
+      field: {
+        classPropertyName: "field",
         publicName: "formField",
@@ -1035,3 +1083,3 @@ isSignal: true,
   minVersion: "12.0.0",
-  version: "21.2.0-next.3",
+  version: "21.2.0-rc.0",
   ngImport: i0,
@@ -1057,3 +1105,3 @@ type: FormField,
   propDecorators: {
-    fieldTree: [{
+    field: [{
       type: i0.Input,
@@ -1082,3 +1130,3 @@ args: [{
     minVersion: "12.0.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     ngImport: i0,
@@ -1091,3 +1139,3 @@ type: FormRoot,
     minVersion: "17.1.0",
-    version: "21.2.0-next.3",
+    version: "21.2.0-rc.0",
     type: FormRoot,
@@ -1118,3 +1166,3 @@ isStandalone: true,
   minVersion: "12.0.0",
-  version: "21.2.0-next.3",
+  version: "21.2.0-rc.0",
   ngImport: i0,
@@ -1144,3 +1192,3 @@ type: FormRoot,
 
-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

package.json

 {
   "name": "@angular/forms",
-  "version": "21.2.0-next.3",
+  "version": "21.2.0-rc.0",
   "description": "Angular - directives and services for creating forms",
@@ -15,5 +15,5 @@ "author": "angular",
   "peerDependencies": {
-    "@angular/core": "21.2.0-next.3",
-    "@angular/common": "21.2.0-next.3",
-    "@angular/platform-browser": "21.2.0-next.3",
+    "@angular/core": "21.2.0-rc.0",
+    "@angular/common": "21.2.0-rc.0",
+    "@angular/platform-browser": "21.2.0-rc.0",
     "rxjs": "^6.5.3 || ^7.4.0"
@@ -20,0 +20,0 @@ },

types/signals-compat.d.ts

 /**
- * @license Angular v21.2.0-next.3
+ * @license Angular v21.2.0-rc.0
  * (c) 2010-2026 Google LLC. https://angular.dev/
@@ -4,0 +4,0 @@ * License: MIT

types/signals.d.ts

 /**
- * @license Angular v21.2.0-next.3
+ * @license Angular v21.2.0-rc.0
  * (c) 2010-2026 Google LLC. https://angular.dev/
@@ -10,3 +10,3 @@ * License: MIT
 import { PathKind, SchemaPath, SchemaPathRules, LogicFn, OneOrMany, ValidationError, FieldValidator, FieldContext, TreeValidationResult, TreeValidator, WithOptionalFieldTree, DisabledReason, Debouncer, FieldTree } from './_structure-chunk.js';
-export { AsyncValidationResult, BaseNgValidationError, ChildFieldContext, CompatFieldState, CompatSchemaPath, EmailValidationError, FORM_FIELD, FieldState, FormField, FormFieldBindingOptions, FormOptions, FormSubmitOptions, IgnoreUnknownProperties, ItemFieldContext, ItemType, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MaybeFieldTree, MaybeSchemaPathTree, MetadataKey, MetadataReducer, MetadataSetterType, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, REQUIRED, ReadonlyArrayLike, RemoveStringIndexUnknownKey, RequiredValidationError, RootFieldContext, Schema, SchemaFn, SchemaOrSchemaFn, SchemaPathTree, SignalFormsConfig, StandardSchemaValidationError, Subfields, ValidationErrorOptions, ValidationResult, ValidationSuccess, Validator, WithField, WithFieldTree, WithOptionalField, WithoutField, WithoutFieldTree, apply, applyEach, applyWhen, applyWhenValue, createManagedMetadataKey, createMetadataKey, emailError, form, maxError, maxLengthError, metadata, minError, minLengthError, patternError, provideSignalFormsConfig, requiredError, schema, standardSchemaError, submit, validateStandardSchema, ɵNgFieldDirective } from './_structure-chunk.js';
+export { AsyncValidationResult, BaseNgValidationError, ChildFieldContext, CompatFieldState, CompatSchemaPath, EmailValidationError, FORM_FIELD, Field, FieldState, FormField, FormFieldBindingOptions, FormOptions, FormSubmitOptions, IgnoreUnknownProperties, ItemFieldContext, ItemType, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MaybeFieldTree, MaybeSchemaPathTree, MetadataKey, MetadataReducer, MetadataSetterType, MinLengthValidationError, MinValidationError, NativeInputParseError, NgValidationError, PATTERN, PatternValidationError, REQUIRED, ReadonlyArrayLike, RemoveStringIndexUnknownKey, RequiredValidationError, RootFieldContext, Schema, SchemaFn, SchemaOrSchemaFn, SchemaPathTree, SignalFormsConfig, StandardSchemaValidationError, Subfields, ValidationErrorOptions, ValidationResult, ValidationSuccess, Validator, WithField, WithFieldTree, WithOptionalField, WithoutField, WithoutFieldTree, apply, applyEach, applyWhen, applyWhenValue, createManagedMetadataKey, createMetadataKey, emailError, form, maxError, maxLengthError, metadata, minError, minLengthError, patternError, provideSignalFormsConfig, requiredError, schema, standardSchemaError, submit, validateStandardSchema, ɵNgFieldDirective } from './_structure-chunk.js';
 import { HttpResourceRequest, HttpResourceOptions } from '@angular/common/http';
@@ -393,3 +393,3 @@ import '@angular/forms';
  */
-interface FormUiControl<TValue> {
+interface FormUiControl {
     /**
@@ -496,3 +496,3 @@ * An input to receive the errors for the field. If implemented, the `Field` directive will
  */
-interface FormValueControl<TValue> extends FormUiControl<TValue> {
+interface FormValueControl<TValue> extends FormUiControl {
     /**
@@ -521,3 +521,3 @@ * The value is the only required property in this contract. A component that wants to integrate
  */
-interface FormCheckboxControl extends FormUiControl<boolean> {
+interface FormCheckboxControl extends FormUiControl {
     /**
@@ -551,2 +551,15 @@ * The checked is the only required property in this contract. A component that wants to integrate
 /**
+ * Result of parsing a raw value into a model value.
+ */
+interface ParseResult<TValue> {
+    /**
+     * The parsed value, if parsing was successful.
+     */
+    readonly value?: TValue;
+    /**
+     * Errors encountered during parsing, if any.
+     */
+    readonly errors?: readonly ValidationError.WithoutFieldTree[];
+}
+/**
  * Options for `transformedValue`.
@@ -564,6 +577,3 @@ *
      */
-    parse: (rawValue: TRaw) => {
-        value?: TValue;
-        errors?: readonly ValidationError.WithoutFieldTree[];
-    };
+    parse: (rawValue: TRaw) => ParseResult<TValue>;
     /**
@@ -652,2 +662,2 @@ * Format the model value into the raw value.
 export { Debouncer, DisabledReason, FieldContext, FieldTree, FieldValidator, FormRoot, LogicFn, OneOrMany, PathKind, SchemaPath, SchemaPathRules, TreeValidationResult, TreeValidator, ValidationError, WithOptionalFieldTree, debounce, disabled, email, hidden, max, maxLength, min, minLength, pattern, readonly, required, transformedValue, validate, validateAsync, validateHttp, validateTree };
-export type { AsyncValidatorOptions, FormCheckboxControl, FormUiControl, FormValueControl, HttpValidatorOptions, MapToErrorsFn, TransformedValueOptions, TransformedValueSignal };
+export type { AsyncValidatorOptions, FormCheckboxControl, FormUiControl, FormValueControl, HttpValidatorOptions, MapToErrorsFn, ParseResult, TransformedValueOptions, TransformedValueSignal };

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1573100

0.6%

Lines of code

16730

0.44%

No dependency changes