@angular/forms 21.2.0-next.1 → 21.2.0-next.3

package/fesm2022/signals.mjs

@@ -1,15 +1,15 @@
 /**
- * @license Angular v21.2.0-next.1
+ * @license Angular v21.2.0-next.3
  * (c) 2010-2026 Google LLC. https://angular.dev/
  * License: MIT
  */
 
 import * as i0 from '@angular/core';
-import { InjectionToken, ɵRuntimeError as _RuntimeError, inject, ElementRef, Injector, input, computed, signal, ɵCONTROL as _CONTROL, untracked, effect, Directive, ɵɵcontrolCreate as __controlCreate, ɵcontrolUpdate as _controlUpdate, ɵisPromise as _isPromise, resource } from '@angular/core';
-import { Validators, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { assertPathIsCurrent, FieldPathNode, addDefaultField, metadata, createMetadataKey, MAX, MAX_LENGTH, MIN, MIN_LENGTH, PATTERN, REQUIRED, createManagedMetadataKey, DEBOUNCER } from './_structure-chunk.mjs';
-export { MetadataKey, MetadataReducer, apply, applyEach, applyWhen, applyWhenValue, form, schema, submit } from './_structure-chunk.mjs';
+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 { 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';
+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' : '');
@@ -21,212 +21,6 @@ function provideSignalFormsConfig(config) {
   }];
 }
 
-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 new _RuntimeError(1910, ngDevMode && 'Unknown form control status');
-  }
-  valueAccessor = null;
-  hasValidator(validator) {
-    if (validator === Validators.required) {
-      return this.field().required();
-    }
-    return false;
-  }
-  updateValueAndValidity() {}
-}
-
-const FORM_FIELD = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD' : '');
-const controlInstructions = {
-  create: __controlCreate,
-  update: _controlUpdate
-};
-class FormField {
-  element = inject(ElementRef).nativeElement;
-  injector = inject(Injector);
-  fieldTree = input.required({
-    ...(ngDevMode ? {
-      debugName: "fieldTree"
-    } : {}),
-    alias: 'formField'
-  });
-  state = computed(() => this.fieldTree()(), ...(ngDevMode ? [{
-    debugName: "state"
-  }] : []));
-  bindingOptions = signal(undefined, ...(ngDevMode ? [{
-    debugName: "bindingOptions"
-  }] : []));
-  parseErrors = computed(() => this.bindingOptions()?.parseErrors?.().map(err => ({
-    ...err,
-    fieldTree: this.fieldTree(),
-    formField: this
-  })) ?? [], ...(ngDevMode ? [{
-    debugName: "parseErrors"
-  }] : []));
-  errors = computed(() => this.state().errors().filter(err => !err.formField || err.formField === this), ...(ngDevMode ? [{
-    debugName: "errors"
-  }] : []));
-  [_CONTROL] = controlInstructions;
-  config = inject(SIGNAL_FORMS_CONFIG, {
-    optional: true
-  });
-  classes = Object.entries(this.config?.classes ?? {}).map(([className, computation]) => [className, computed(() => computation(this))]);
-  controlValueAccessors = inject(NG_VALUE_ACCESSOR, {
-    optional: true,
-    self: true
-  });
-  interopNgControl;
-  get ɵinteropControl() {
-    return this.controlValueAccessors?.[0] ?? this.interopNgControl?.valueAccessor ?? undefined;
-  }
-  getOrCreateNgControl() {
-    return this.interopNgControl ??= new InteropNgControl(this.state);
-  }
-  registerAsBinding(bindingOptions) {
-    if (untracked(this.bindingOptions)) {
-      throw new _RuntimeError(1913, ngDevMode && 'FormField already registered as a binding');
-    }
-    this.bindingOptions.set(bindingOptions);
-    effect(onCleanup => {
-      const fieldNode = this.state();
-      fieldNode.nodeState.formFieldBindings.update(controls => [...controls, this]);
-      onCleanup(() => {
-        fieldNode.nodeState.formFieldBindings.update(controls => controls.filter(c => c !== this));
-      });
-    }, {
-      injector: this.injector
-    });
-  }
-  focus(options) {
-    const bindingOptions = untracked(this.bindingOptions);
-    if (bindingOptions?.focus) {
-      bindingOptions.focus(options);
-    } else {
-      this.element.focus(options);
-    }
-  }
-  static ɵfac = i0.ɵɵngDeclareFactory({
-    minVersion: "12.0.0",
-    version: "21.2.0-next.1",
-    ngImport: i0,
-    type: FormField,
-    deps: [],
-    target: i0.ɵɵFactoryTarget.Directive
-  });
-  static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.1.0",
-    version: "21.2.0-next.1",
-    type: FormField,
-    isStandalone: true,
-    selector: "[formField]",
-    inputs: {
-      fieldTree: {
-        classPropertyName: "fieldTree",
-        publicName: "formField",
-        isSignal: true,
-        isRequired: true,
-        transformFunction: null
-      }
-    },
-    providers: [{
-      provide: FORM_FIELD,
-      useExisting: FormField
-    }, {
-      provide: NgControl,
-      useFactory: () => inject(FormField).getOrCreateNgControl()
-    }],
-    exportAs: ["formField"],
-    ngImport: i0
-  });
-}
-i0.ɵɵngDeclareClassMetadata({
-  minVersion: "12.0.0",
-  version: "21.2.0-next.1",
-  ngImport: i0,
-  type: FormField,
-  decorators: [{
-    type: Directive,
-    args: [{
-      selector: '[formField]',
-      exportAs: 'formField',
-      providers: [{
-        provide: FORM_FIELD,
-        useExisting: FormField
-      }, {
-        provide: NgControl,
-        useFactory: () => inject(FormField).getOrCreateNgControl()
-      }]
-    }]
-  }],
-  propDecorators: {
-    fieldTree: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "formField",
-        required: true
-      }]
-    }]
-  }
-});
-
 function disabled(path, logic) {
   assertPathIsCurrent(path);
   const pathNode = FieldPathNode.unwrapFieldPath(path);
@@ -304,10 +98,7 @@ function patternError(pattern, options) {
 function emailError(options) {
   return new EmailValidationError(options);
 }
-function standardSchemaError(issue, options) {
-  return new StandardSchemaValidationError(issue, options);
-}
-class _NgValidationError {
+class BaseNgValidationError {
   __brand = undefined;
   kind = '';
   fieldTree;
@@ -318,10 +109,10 @@ class _NgValidationError {
     }
   }
 }
-class RequiredValidationError extends _NgValidationError {
+class RequiredValidationError extends BaseNgValidationError {
   kind = 'required';
 }
-class MinValidationError extends _NgValidationError {
+class MinValidationError extends BaseNgValidationError {
   min;
   kind = 'min';
   constructor(min, options) {
@@ -329,7 +120,7 @@ class MinValidationError extends _NgValidationError {
     this.min = min;
   }
 }
-class MaxValidationError extends _NgValidationError {
+class MaxValidationError extends BaseNgValidationError {
   max;
   kind = 'max';
   constructor(max, options) {
@@ -337,7 +128,7 @@ class MaxValidationError extends _NgValidationError {
     this.max = max;
   }
 }
-class MinLengthValidationError extends _NgValidationError {
+class MinLengthValidationError extends BaseNgValidationError {
   minLength;
   kind = 'minLength';
   constructor(minLength, options) {
@@ -345,7 +136,7 @@ class MinLengthValidationError extends _NgValidationError {
     this.minLength = minLength;
   }
 }
-class MaxLengthValidationError extends _NgValidationError {
+class MaxLengthValidationError extends BaseNgValidationError {
   maxLength;
   kind = 'maxLength';
   constructor(maxLength, options) {
@@ -353,7 +144,7 @@ class MaxLengthValidationError extends _NgValidationError {
     this.maxLength = maxLength;
   }
 }
-class PatternValidationError extends _NgValidationError {
+class PatternValidationError extends BaseNgValidationError {
   pattern;
   kind = 'pattern';
   constructor(pattern, options) {
@@ -361,18 +152,10 @@ class PatternValidationError extends _NgValidationError {
     this.pattern = pattern;
   }
 }
-class EmailValidationError extends _NgValidationError {
+class EmailValidationError extends BaseNgValidationError {
   kind = 'email';
 }
-class StandardSchemaValidationError extends _NgValidationError {
-  issue;
-  kind = 'standardSchema';
-  constructor(issue, options) {
-    super(options);
-    this.issue = issue;
-  }
-}
-const NgValidationError = _NgValidationError;
+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])?)*$/;
 function email(path, config) {
@@ -588,17 +371,16 @@ function validateTree(path, logic) {
 }
 
 function validateStandardSchema(path, schema) {
-  const VALIDATOR_MEMO = metadata(path, createMetadataKey(), ({
-    value
-  }) => {
-    return schema['~standard'].validate(value());
+  const VALIDATOR_MEMO = metadata(path, createMetadataKey(), ctx => {
+    const resolvedSchema = typeof schema === 'function' ? schema(ctx) : schema;
+    return resolvedSchema ? resolvedSchema['~standard'].validate(ctx.value()) : undefined;
   });
   validateTree(path, ({
     state,
     fieldTreeOf
   }) => {
     const result = state.metadata(VALIDATOR_MEMO)();
-    if (_isPromise(result)) {
+    if (!result || _isPromise(result)) {
       return [];
     }
     return result?.issues?.map(issue => standardIssueToFormTreeError(fieldTreeOf(path), issue)) ?? [];
@@ -608,7 +390,7 @@ function validateStandardSchema(path, schema) {
       state
     }) => {
       const result = state.metadata(VALIDATOR_MEMO)();
-      return _isPromise(result) ? result : undefined;
+      return result && _isPromise(result) ? result : undefined;
     },
     factory: params => {
       return resource({
@@ -626,6 +408,9 @@ function validateStandardSchema(path, schema) {
     onError: () => {}
   });
 }
+function standardSchemaError(issue, options) {
+  return new StandardSchemaValidationError(issue, options);
+}
 function standardIssueToFormTreeError(fieldTree, issue) {
   let target = fieldTree;
   for (const pathPart of issue.path ?? []) {
@@ -636,6 +421,14 @@ function standardIssueToFormTreeError(fieldTree, issue) {
     message: issue.message
   }), target);
 }
+class StandardSchemaValidationError extends BaseNgValidationError {
+  issue;
+  kind = 'standardSchema';
+  constructor(issue, options) {
+    super(options);
+    this.issue = issue;
+  }
+}
 
 function validateHttp(path, opts) {
   validateAsync(path, {
@@ -658,6 +451,7 @@ function debounceForDuration(durationInMilliseconds) {
       let timeoutId;
       const onAbort = () => {
         clearTimeout(timeoutId);
+        resolve();
       };
       timeoutId = setTimeout(() => {
         abortSignal.removeEventListener('abort', onAbort);
@@ -671,5 +465,656 @@ function debounceForDuration(durationInMilliseconds) {
 }
 function immediate() {}
 
-export { EmailValidationError, FORM_FIELD, FormField, 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, validate, validateAsync, validateHttp, validateStandardSchema, validateTree };
+const FORM_FIELD_PARSE_ERRORS = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD_PARSE_ERRORS' : '');
+
+function transformedValue(value, options) {
+  const {
+    parse,
+    format
+  } = options;
+  const parseErrors = signal([], ...(ngDevMode ? [{
+    debugName: "parseErrors"
+  }] : []));
+  const rawValue = linkedSignal(() => format(value()), ...(ngDevMode ? [{
+    debugName: "rawValue"
+  }] : []));
+  const formFieldParseErrors = inject(FORM_FIELD_PARSE_ERRORS, {
+    self: true,
+    optional: true
+  });
+  if (formFieldParseErrors) {
+    formFieldParseErrors.set(parseErrors);
+  }
+  const result = rawValue;
+  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);
+    }
+    originalSet(newRawValue);
+  };
+  result.update = updateFn => {
+    result.set(updateFn(rawValue()));
+  };
+  result.parseErrors = parseErrors.asReadonly();
+  return result;
+}
+
+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() {
+    return signalErrorsToValidationErrors(this.field().errors());
+  }
+  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 new _RuntimeError(1910, ngDevMode && 'Unknown form control status');
+  }
+  valueAccessor = null;
+  hasValidator(validator) {
+    if (validator === Validators.required) {
+      return this.field().required();
+    }
+    return false;
+  }
+  updateValueAndValidity() {}
+}
+
+const FIELD_STATE_KEY_TO_CONTROL_BINDING = {
+  disabled: 'disabled',
+  disabledReasons: 'disabledReasons',
+  dirty: 'dirty',
+  errors: 'errors',
+  hidden: 'hidden',
+  invalid: 'invalid',
+  max: 'max',
+  maxLength: 'maxLength',
+  min: 'min',
+  minLength: 'minLength',
+  name: 'name',
+  pattern: 'pattern',
+  pending: 'pending',
+  readonly: 'readonly',
+  required: 'required',
+  touched: 'touched'
+};
+const CONTROL_BINDING_TO_FIELD_STATE_KEY = /* @__PURE__ */(() => {
+  const map = {};
+  for (const key of Object.keys(FIELD_STATE_KEY_TO_CONTROL_BINDING)) {
+    map[FIELD_STATE_KEY_TO_CONTROL_BINDING[key]] = key;
+  }
+  return map;
+})();
+function readFieldStateBindingValue(fieldState, key) {
+  const property = CONTROL_BINDING_TO_FIELD_STATE_KEY[key];
+  return fieldState[property]?.();
+}
+const CONTROL_BINDING_NAMES = /* @__PURE__ */(() => Object.values(FIELD_STATE_KEY_TO_CONTROL_BINDING))();
+function createBindings() {
+  return {};
+}
+function bindingUpdated(bindings, key, value) {
+  if (bindings[key] !== value) {
+    bindings[key] = value;
+    return true;
+  }
+  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) {
+  switch (element.type) {
+    case 'checkbox':
+      return element.checked;
+    case 'number':
+    case 'range':
+    case 'datetime-local':
+      if (typeof untracked(currentValue) === 'number') {
+        return 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;
+      }
+      break;
+  }
+  return element.value;
+}
+function setNativeControlValue(element, value) {
+  switch (element.type) {
+    case 'checkbox':
+      element.checked = value;
+      return;
+    case 'radio':
+      element.checked = value === element.value;
+      return;
+    case 'number':
+    case 'range':
+    case 'datetime-local':
+      if (typeof value === 'number') {
+        setNativeNumberControlValue(element, value);
+        return;
+      }
+      break;
+    case 'date':
+    case 'month':
+    case 'time':
+    case 'week':
+      if (value === null || value instanceof Date) {
+        element.valueAsDate = value;
+        return;
+      } else if (typeof value === 'number') {
+        setNativeNumberControlValue(element, value);
+        return;
+      }
+  }
+  element.value = value;
+}
+function setNativeNumberControlValue(element, value) {
+  if (isNaN(value)) {
+    element.value = '';
+  } else {
+    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 customControlCreate(host, parent) {
+  host.listenToCustomControlModel(value => parent.state().controlValue.set(value));
+  host.listenToCustomControlOutput('touchedChange', () => parent.state().markAsTouched());
+  parent.registerAsBinding(host.customControl);
+  const bindings = createBindings();
+  return () => {
+    const state = parent.state();
+    const controlValue = state.controlValue();
+    if (bindingUpdated(bindings, 'controlValue', controlValue)) {
+      host.setCustomControlModelInput(controlValue);
+    }
+    for (const name of CONTROL_BINDING_NAMES) {
+      let value;
+      if (name === 'errors') {
+        value = parent.errors();
+      } else {
+        value = readFieldStateBindingValue(state, name);
+      }
+      if (bindingUpdated(bindings, name, value)) {
+        host.setInputOnDirectives(name, value);
+        if (parent.elementAcceptsNativeProperty(name) && !host.customControlHasInput(name)) {
+          setNativeDomProperty(parent.renderer, parent.nativeFormElement, name, value);
+        }
+      }
+    }
+  };
+}
+
+function cvaControlCreate(host, parent) {
+  parent.controlValueAccessor.registerOnChange(value => parent.state().controlValue.set(value));
+  parent.controlValueAccessor.registerOnTouched(() => parent.state().markAsTouched());
+  parent.registerAsBinding();
+  const bindings = createBindings();
+  return () => {
+    const fieldState = parent.state();
+    const value = fieldState.value();
+    if (bindingUpdated(bindings, 'controlValue', value)) {
+      untracked(() => parent.controlValueAccessor.writeValue(value));
+    }
+    for (const name of CONTROL_BINDING_NAMES) {
+      const value = readFieldStateBindingValue(fieldState, name);
+      if (bindingUpdated(bindings, name, value)) {
+        const propertyWasSet = host.setInputOnDirectives(name, value);
+        if (name === 'disabled' && parent.controlValueAccessor.setDisabledState) {
+          untracked(() => parent.controlValueAccessor.setDisabledState(value));
+        } else if (!propertyWasSet && parent.elementAcceptsNativeProperty(name)) {
+          setNativeDomProperty(parent.renderer, parent.nativeFormElement, name, value);
+        }
+      }
+    }
+  };
+}
+
+function observeSelectMutations(select, onMutation, destroyRef) {
+  if (typeof MutationObserver !== 'function') {
+    return;
+  }
+  const observer = new MutationObserver(mutations => {
+    if (mutations.some(m => isRelevantSelectMutation(m))) {
+      onMutation();
+    }
+  });
+  observer.observe(select, {
+    attributes: true,
+    attributeFilter: ['value'],
+    characterData: true,
+    childList: true,
+    subtree: true
+  });
+  destroyRef.onDestroy(() => observer.disconnect());
+}
+function isRelevantSelectMutation(mutation) {
+  if (mutation.type === 'childList' || mutation.type === 'characterData') {
+    if (mutation.target instanceof Comment) {
+      return false;
+    }
+    for (const node of mutation.addedNodes) {
+      if (!(node instanceof Comment)) {
+        return true;
+      }
+    }
+    for (const node of mutation.removedNodes) {
+      if (!(node instanceof Comment)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+    return true;
+  }
+  return false;
+}
+
+function nativeControlCreate(host, parent) {
+  let updateMode = false;
+  const input = parent.nativeFormElement;
+  host.listenToDom('input', () => {
+    const state = parent.state();
+    state.controlValue.set(getNativeControlValue(input, state.value));
+  });
+  host.listenToDom('blur', () => parent.state().markAsTouched());
+  parent.registerAsBinding();
+  if (input.tagName === 'SELECT') {
+    observeSelectMutations(input, () => {
+      if (!updateMode) {
+        return;
+      }
+      input.value = parent.state().controlValue();
+    }, parent.destroyRef);
+  }
+  const bindings = createBindings();
+  return () => {
+    const state = parent.state();
+    const controlValue = state.controlValue();
+    if (bindingUpdated(bindings, 'controlValue', controlValue)) {
+      setNativeControlValue(input, controlValue);
+    }
+    for (const name of CONTROL_BINDING_NAMES) {
+      const value = readFieldStateBindingValue(state, name);
+      if (bindingUpdated(bindings, name, value)) {
+        host.setInputOnDirectives(name, value);
+        if (parent.elementAcceptsNativeProperty(name)) {
+          setNativeDomProperty(parent.renderer, input, name, value);
+        }
+      }
+    }
+    updateMode = true;
+  };
+}
+
+const ɵNgFieldDirective = Symbol();
+const FORM_FIELD = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'FORM_FIELD' : '');
+class FormField {
+  fieldTree = input.required({
+    ...(ngDevMode ? {
+      debugName: "fieldTree"
+    } : {}),
+    alias: 'formField'
+  });
+  renderer = inject(Renderer2);
+  destroyRef = inject(DestroyRef);
+  state = computed(() => this.fieldTree()(), ...(ngDevMode ? [{
+    debugName: "state"
+  }] : []));
+  injector = inject(Injector);
+  element = inject(ElementRef).nativeElement;
+  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, {
+    optional: true,
+    self: true
+  });
+  config = inject(SIGNAL_FORMS_CONFIG, {
+    optional: true
+  });
+  parseErrorsSource = signal(undefined, ...(ngDevMode ? [{
+    debugName: "parseErrorsSource"
+  }] : []));
+  _interopNgControl;
+  get interopNgControl() {
+    return this._interopNgControl ??= new InteropNgControl(this.state);
+  }
+  parseErrors = computed(() => this.parseErrorsSource()?.().map(err => ({
+    ...err,
+    fieldTree: untracked(this.fieldTree),
+    formField: this
+  })) ?? [], ...(ngDevMode ? [{
+    debugName: "parseErrors"
+  }] : []));
+  errors = computed(() => this.state().errors().filter(err => !err.formField || err.formField === this), ...(ngDevMode ? [{
+    debugName: "errors"
+  }] : []));
+  isFieldBinding = false;
+  get controlValueAccessor() {
+    return this.controlValueAccessors?.[0] ?? this.interopNgControl?.valueAccessor ?? undefined;
+  }
+  installClassBindingEffect() {
+    const classes = Object.entries(this.config?.classes ?? {}).map(([className, computation]) => [className, computed(() => computation(this))]);
+    if (classes.length === 0) {
+      return;
+    }
+    const bindings = createBindings();
+    afterRenderEffect({
+      write: () => {
+        for (const [className, computation] of classes) {
+          const active = computation();
+          if (bindingUpdated(bindings, className, active)) {
+            if (active) {
+              this.renderer.addClass(this.element, className);
+            } else {
+              this.renderer.removeClass(this.element, className);
+            }
+          }
+        }
+      }
+    }, {
+      injector: this.injector
+    });
+  }
+  focus(options) {
+    this.focuser(options);
+  }
+  registerAsBinding(bindingOptions) {
+    if (this.isFieldBinding) {
+      throw new _RuntimeError(1913, ngDevMode && 'FormField already registered as a binding');
+    }
+    this.isFieldBinding = true;
+    this.installClassBindingEffect();
+    if (bindingOptions?.focus) {
+      this.focuser = bindingOptions.focus;
+    }
+    effect(onCleanup => {
+      const fieldNode = this.state();
+      fieldNode.nodeState.formFieldBindings.update(controls => [...controls, this]);
+      onCleanup(() => {
+        fieldNode.nodeState.formFieldBindings.update(controls => controls.filter(c => c !== this));
+      });
+    }, {
+      injector: this.injector
+    });
+  }
+  [ɵNgFieldDirective];
+  ɵngControlCreate(host) {
+    if (host.hasPassThrough) {
+      return;
+    }
+    if (this.controlValueAccessor) {
+      this.ɵngControlUpdate = cvaControlCreate(host, this);
+    } else if (host.customControl) {
+      this.ɵngControlUpdate = customControlCreate(host, this);
+    } else if (this.elementIsNativeFormElement) {
+      this.ɵngControlUpdate = nativeControlCreate(host, this);
+    } 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.`);
+    }
+  }
+  ɵngControlUpdate;
+  elementAcceptsNativeProperty(key) {
+    if (!this.elementIsNativeFormElement) {
+      return false;
+    }
+    switch (key) {
+      case 'min':
+      case 'max':
+        return this.elementAcceptsNumericValues;
+      case 'minLength':
+      case 'maxLength':
+        return this.elementAcceptsTextualValues;
+      case 'disabled':
+      case 'required':
+      case 'readonly':
+      case 'name':
+        return true;
+      default:
+        return false;
+    }
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.2.0-next.3",
+    ngImport: i0,
+    type: FormField,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.1.0",
+    version: "21.2.0-next.3",
+    type: FormField,
+    isStandalone: true,
+    selector: "[formField]",
+    inputs: {
+      fieldTree: {
+        classPropertyName: "fieldTree",
+        publicName: "formField",
+        isSignal: true,
+        isRequired: true,
+        transformFunction: null
+      }
+    },
+    providers: [{
+      provide: FORM_FIELD,
+      useExisting: FormField
+    }, {
+      provide: NgControl,
+      useFactory: () => inject(FormField).interopNgControl
+    }, {
+      provide: FORM_FIELD_PARSE_ERRORS,
+      useFactory: () => inject(FormField).parseErrorsSource
+    }],
+    exportAs: ["formField"],
+    controlCreate: {
+      passThroughInput: "formField"
+    },
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.2.0-next.3",
+  ngImport: i0,
+  type: FormField,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[formField]',
+      exportAs: 'formField',
+      providers: [{
+        provide: FORM_FIELD,
+        useExisting: FormField
+      }, {
+        provide: NgControl,
+        useFactory: () => inject(FormField).interopNgControl
+      }, {
+        provide: FORM_FIELD_PARSE_ERRORS,
+        useFactory: () => inject(FormField).parseErrorsSource
+      }]
+    }]
+  }],
+  propDecorators: {
+    fieldTree: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "formField",
+        required: true
+      }]
+    }]
+  }
+});
+
+class FormRoot {
+  fieldTree = input.required({
+    ...(ngDevMode ? {
+      debugName: "fieldTree"
+    } : {}),
+    alias: 'formRoot'
+  });
+  onSubmit(event) {
+    event.preventDefault();
+    submit(this.fieldTree());
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.2.0-next.3",
+    ngImport: i0,
+    type: FormRoot,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.1.0",
+    version: "21.2.0-next.3",
+    type: FormRoot,
+    isStandalone: true,
+    selector: "form[formRoot]",
+    inputs: {
+      fieldTree: {
+        classPropertyName: "fieldTree",
+        publicName: "formRoot",
+        isSignal: true,
+        isRequired: true,
+        transformFunction: null
+      }
+    },
+    host: {
+      attributes: {
+        "novalidate": ""
+      },
+      listeners: {
+        "submit": "onSubmit($event)"
+      }
+    },
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.2.0-next.3",
+  ngImport: i0,
+  type: FormRoot,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: 'form[formRoot]',
+      host: {
+        'novalidate': '',
+        '(submit)': 'onSubmit($event)'
+      }
+    }]
+  }],
+  propDecorators: {
+    fieldTree: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "formRoot",
+        required: true
+      }]
+    }]
+  }
+});
+
+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 };
 //# sourceMappingURL=signals.mjs.map