@angular/forms 20.2.3 → 21.0.0-next.1

package/fesm2022/forms.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v20.2.3
+ * @license Angular v21.0.0-next.1
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1401,12 +1401,12 @@ class NgControlStatusGroup extends AbstractControlStatus {
         super(cd);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgControlStatusGroup, deps: [{ token: ControlContainer, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: NgControlStatusGroup, isStandalone: false, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]", host: { properties: { "class.ng-untouched": "isUntouched", "class.ng-touched": "isTouched", "class.ng-pristine": "isPristine", "class.ng-dirty": "isDirty", "class.ng-valid": "isValid", "class.ng-invalid": "isInvalid", "class.ng-pending": "isPending", "class.ng-submitted": "isSubmitted" } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: NgControlStatusGroup, isStandalone: false, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]", host: { properties: { "class.ng-untouched": "isUntouched", "class.ng-touched": "isTouched", "class.ng-pristine": "isPristine", "class.ng-dirty": "isDirty", "class.ng-valid": "isValid", "class.ng-invalid": "isInvalid", "class.ng-pending": "isPending", "class.ng-submitted": "isSubmitted" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgControlStatusGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]',
+                    selector: '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]',
                     host: ngGroupStatusHost,
                     standalone: false,
                 }]
@@ -1467,8 +1467,8 @@ const ngModelWithFormGroupExample = `
 `;
 
 function controlParentException(nameOrIndex) {
-    return new _RuntimeError(1050 /* RuntimeErrorCode.FORM_CONTROL_NAME_MISSING_PARENT */, `formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
-      directive and pass it an existing FormGroup instance (you can create one in your class).
+    return new _RuntimeError(1050 /* RuntimeErrorCode.FORM_CONTROL_NAME_MISSING_PARENT */, `formControlName must be used with a parent formGroup or formArray directive.  You'll want to add a formGroup/formArray
+      directive and pass it an existing FormGroup/FormArray instance (you can create one in your class).
 
       ${describeFormControl(nameOrIndex)}
 
@@ -3481,7 +3481,7 @@ function _ngModelWarning(name, type, instance, warningConfig) {
     }
 }
 
-const formDirectiveProvider$1 = {
+const formDirectiveProvider$2 = {
     provide: ControlContainer,
     useExisting: forwardRef(() => NgForm),
 };
@@ -3764,13 +3764,13 @@ class NgForm extends ControlContainer {
         return path.length ? this.form.get(path) : this.form;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgForm, deps: [{ token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: CALL_SET_DISABLED_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: NgForm, isStandalone: false, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: { options: ["ngFormOptions", "options"] }, outputs: { ngSubmit: "ngSubmit" }, host: { listeners: { "submit": "onSubmit($event)", "reset": "onReset()" } }, providers: [formDirectiveProvider$1], exportAs: ["ngForm"], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: NgForm, isStandalone: false, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: { options: ["ngFormOptions", "options"] }, outputs: { ngSubmit: "ngSubmit" }, host: { listeners: { "submit": "onSubmit($event)", "reset": "onReset()" } }, providers: [formDirectiveProvider$2], exportAs: ["ngForm"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgForm, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]',
-                    providers: [formDirectiveProvider$1],
+                    selector: 'form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]',
+                    providers: [formDirectiveProvider$2],
                     host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
                     outputs: ['ngSubmit'],
                     exportAs: 'ngForm',
@@ -4833,941 +4833,758 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
         }] });
 
 /**
- * Token to provide to turn off the ngModel warning on formControl and formControlName.
- */
-const NG_MODEL_WITH_FORM_CONTROL_WARNING = new InjectionToken(ngDevMode ? 'NgModelWithFormControlWarning' : '');
-const formControlBinding = {
-    provide: NgControl,
-    useExisting: forwardRef(() => FormControlDirective),
-};
-/**
- * @description
- * Synchronizes a standalone `FormControl` instance to a form control element.
+ * Tracks the value and validity state of an array of `FormControl`,
+ * `FormGroup` or `FormArray` instances.
  *
- * Note that support for using the `ngModel` input property and `ngModelChange` event with reactive
- * form directives was deprecated in Angular v6 and is scheduled for removal in
- * a future version of Angular.
+ * A `FormArray` aggregates the values of each child `FormControl` into an array.
+ * It calculates its status by reducing the status values of its children. For example, if one of
+ * the controls in a `FormArray` is invalid, the entire array becomes invalid.
  *
- * @see [Reactive Forms Guide](guide/forms/reactive-forms)
- * @see {@link FormControl}
- * @see {@link AbstractControl}
+ * `FormArray` accepts one generic argument, which is the type of the controls inside.
+ * If you need a heterogenous array, use {@link UntypedFormArray}.
+ *
+ * `FormArray` is one of the four fundamental building blocks used to define forms in Angular,
+ * along with `FormControl`, `FormGroup`, and `FormRecord`.
  *
  * @usageNotes
  *
- * The following example shows how to register a standalone control and set its value.
+ * ### Create an array of form controls
  *
- * {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
+ * ```ts
+ * const arr = new FormArray([
+ *   new FormControl('Nancy', Validators.minLength(2)),
+ *   new FormControl('Drew'),
+ * ]);
+ *
+ * console.log(arr.value);   // ['Nancy', 'Drew']
+ * console.log(arr.status);  // 'VALID'
+ * ```
+ *
+ * ### Create a form array with array-level validators
+ *
+ * You include array-level validators and async validators. These come in handy
+ * when you want to perform validation that considers the value of more than one child
+ * control.
+ *
+ * The two types of validators are passed in separately as the second and third arg
+ * respectively, or together as part of an options object.
+ *
+ * ```ts
+ * const arr = new FormArray([
+ *   new FormControl('Nancy'),
+ *   new FormControl('Drew')
+ * ], {validators: myValidator, asyncValidators: myAsyncValidator});
+ * ```
+ *
+ * ### Set the updateOn property for all controls in a form array
+ *
+ * The options object is used to set a default value for each child
+ * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
+ * array level, all child controls default to 'blur', unless the child
+ * has explicitly specified a different `updateOn` value.
+ *
+ * ```ts
+ * const arr = new FormArray([
+ *    new FormControl()
+ * ], {updateOn: 'blur'});
+ * ```
+ *
+ * ### Adding or removing controls from a form array
+ *
+ * To change the controls in the array, use the `push`, `insert`, `removeAt` or `clear` methods
+ * in `FormArray` itself. These methods ensure the controls are properly tracked in the
+ * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
+ * the `FormArray` directly, as that result in strange and unexpected behavior such
+ * as broken change detection.
  *
- * @ngModule ReactiveFormsModule
  * @publicApi
  */
-class FormControlDirective extends NgControl {
-    _ngModelWarningConfig;
-    callSetDisabledState;
-    /**
-     * Internal reference to the view model value.
-     * @docs-private
-     */
-    viewModel;
-    /**
-     * @description
-     * Tracks the `FormControl` instance bound to the directive.
-     */
-    form;
+class FormArray extends AbstractControl {
     /**
-     * @description
-     * Triggers a warning in dev mode that this input should not be used with reactive forms.
+     * Creates a new `FormArray` instance.
+     *
+     * @param controls An array of child controls. Each child control is given an index
+     * where it is registered.
+     *
+     * @param validatorOrOpts A synchronous validator function, or an array of
+     * such functions, or an `AbstractControlOptions` object that contains validation functions
+     * and a validation trigger.
+     *
+     * @param asyncValidator A single async validator or array of async validator functions
+     *
      */
-    set isDisabled(isDisabled) {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            console.warn(disabledAttrWarning);
-        }
+    constructor(controls, validatorOrOpts, asyncValidator) {
+        super(pickValidators(validatorOrOpts), pickAsyncValidators(asyncValidator, validatorOrOpts));
+        this.controls = controls;
+        this._initObservables();
+        this._setUpdateStrategy(validatorOrOpts);
+        this._setUpControls();
+        this.updateValueAndValidity({
+            onlySelf: true,
+            // If `asyncValidator` is present, it will trigger control status change from `PENDING` to
+            // `VALID` or `INVALID`.
+            // The status should be broadcasted via the `statusChanges` observable, so we set `emitEvent`
+            // to `true` to allow that during the control creation process.
+            emitEvent: !!this.asyncValidator,
+        });
     }
-    // TODO(kara): remove next 4 properties once deprecation period is over
-    /** @deprecated as of v6 */
-    model;
-    /** @deprecated as of v6 */
-    update = new EventEmitter();
+    controls;
     /**
-     * @description
-     * Static property used to track whether any ngModel warnings have been sent across
-     * all instances of FormControlDirective. Used to support warning config of "once".
+     * Get the `AbstractControl` at the given `index` in the array.
      *
-     * @internal
+     * @param index Index in the array to retrieve the control. If `index` is negative, it will wrap
+     *     around from the back, and if index is greatly negative (less than `-length`), the result is
+     * undefined. This behavior is the same as `Array.at(index)`.
      */
-    static _ngModelWarningSentOnce = false;
+    at(index) {
+        return this.controls[this._adjustIndex(index)];
+    }
     /**
-     * @description
-     * Instance property used to track whether an ngModel warning has been sent out for this
-     * particular `FormControlDirective` instance. Used to support warning config of "always".
+     * Insert a new `AbstractControl` at the end of the array.
      *
-     * @internal
+     * @param control Form control to be inserted
+     * @param options Specifies whether this FormArray instance should emit events after a new
+     *     control is added.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges` observables emit events with the latest status and value when the control is
+     * inserted. When false, no events are emitted.
      */
-    _ngModelWarningSent = false;
-    constructor(validators, asyncValidators, valueAccessors, _ngModelWarningConfig, callSetDisabledState) {
-        super();
-        this._ngModelWarningConfig = _ngModelWarningConfig;
-        this.callSetDisabledState = callSetDisabledState;
-        this._setValidators(validators);
-        this._setAsyncValidators(asyncValidators);
-        this.valueAccessor = selectValueAccessor(this, valueAccessors);
-    }
-    /** @docs-private */
-    ngOnChanges(changes) {
-        if (this._isControlChanged(changes)) {
-            const previousForm = changes['form'].previousValue;
-            if (previousForm) {
-                cleanUpControl(previousForm, this, /* validateControlPresenceOnChange */ false);
-            }
-            setUpControl(this.form, this, this.callSetDisabledState);
-            this.form.updateValueAndValidity({ emitEvent: false });
-        }
-        if (isPropertyUpdated(changes, this.viewModel)) {
-            if (typeof ngDevMode === 'undefined' || ngDevMode) {
-                _ngModelWarning('formControl', FormControlDirective, this, this._ngModelWarningConfig);
-            }
-            this.form.setValue(this.model);
-            this.viewModel = this.model;
+    push(control, options = {}) {
+        if (Array.isArray(control)) {
+            control.forEach((ctrl) => {
+                this.controls.push(ctrl);
+                this._registerControl(ctrl);
+            });
         }
-    }
-    /** @docs-private */
-    ngOnDestroy() {
-        if (this.form) {
-            cleanUpControl(this.form, this, /* validateControlPresenceOnChange */ false);
+        else {
+            this.controls.push(control);
+            this._registerControl(control);
         }
+        this.updateValueAndValidity({ emitEvent: options.emitEvent });
+        this._onCollectionChange();
     }
     /**
-     * @description
-     * Returns an array that represents the path from the top-level form to this control.
-     * Each index is the string name of the control on that level.
+     * Insert a new `AbstractControl` at the given `index` in the array.
+     *
+     * @param index Index in the array to insert the control. If `index` is negative, wraps around
+     *     from the back. If `index` is greatly negative (less than `-length`), prepends to the array.
+     * This behavior is the same as `Array.splice(index, 0, control)`.
+     * @param control Form control to be inserted
+     * @param options Specifies whether this FormArray instance should emit events after a new
+     *     control is inserted.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges` observables emit events with the latest status and value when the control is
+     * inserted. When false, no events are emitted.
      */
-    get path() {
-        return [];
+    insert(index, control, options = {}) {
+        this.controls.splice(index, 0, control);
+        this._registerControl(control);
+        this.updateValueAndValidity({ emitEvent: options.emitEvent });
     }
     /**
-     * @description
-     * The `FormControl` bound to this directive.
+     * Remove the control at the given `index` in the array.
+     *
+     * @param index Index in the array to remove the control.  If `index` is negative, wraps around
+     *     from the back. If `index` is greatly negative (less than `-length`), removes the first
+     *     element. This behavior is the same as `Array.splice(index, 1)`.
+     * @param options Specifies whether this FormArray instance should emit events after a
+     *     control is removed.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges` observables emit events with the latest status and value when the control is
+     * removed. When false, no events are emitted.
      */
-    get control() {
-        return this.form;
+    removeAt(index, options = {}) {
+        // Adjust the index, then clamp it at no less than 0 to prevent undesired underflows.
+        let adjustedIndex = this._adjustIndex(index);
+        if (adjustedIndex < 0)
+            adjustedIndex = 0;
+        if (this.controls[adjustedIndex])
+            this.controls[adjustedIndex]._registerOnCollectionChange(() => { });
+        this.controls.splice(adjustedIndex, 1);
+        this.updateValueAndValidity({ emitEvent: options.emitEvent });
     }
     /**
-     * @description
-     * Sets the new value for the view model and emits an `ngModelChange` event.
+     * Replace an existing control.
      *
-     * @param newValue The new value for the view model.
+     * @param index Index in the array to replace the control. If `index` is negative, wraps around
+     *     from the back. If `index` is greatly negative (less than `-length`), replaces the first
+     *     element. This behavior is the same as `Array.splice(index, 1, control)`.
+     * @param control The `AbstractControl` control to replace the existing control
+     * @param options Specifies whether this FormArray instance should emit events after an
+     *     existing control is replaced with a new one.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges` observables emit events with the latest status and value when the control is
+     * replaced with a new one. When false, no events are emitted.
      */
-    viewToModelUpdate(newValue) {
-        this.viewModel = newValue;
-        this.update.emit(newValue);
-    }
-    _isControlChanged(changes) {
-        return changes.hasOwnProperty('form');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlDirective, deps: [{ token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: NG_VALUE_ACCESSOR, optional: true, self: true }, { token: NG_MODEL_WITH_FORM_CONTROL_WARNING, optional: true }, { token: CALL_SET_DISABLED_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormControlDirective, isStandalone: false, selector: "[formControl]", inputs: { form: ["formControl", "form"], isDisabled: ["disabled", "isDisabled"], model: ["ngModel", "model"] }, outputs: { update: "ngModelChange" }, providers: [formControlBinding], exportAs: ["ngForm"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[formControl]',
-                    providers: [formControlBinding],
-                    exportAs: 'ngForm',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALIDATORS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_ASYNC_VALIDATORS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NG_MODEL_WITH_FORM_CONTROL_WARNING]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALL_SET_DISABLED_STATE]
-                }] }], propDecorators: { form: [{
-                type: Input,
-                args: ['formControl']
-            }], isDisabled: [{
-                type: Input,
-                args: ['disabled']
-            }], model: [{
-                type: Input,
-                args: ['ngModel']
-            }], update: [{
-                type: Output,
-                args: ['ngModelChange']
-            }] } });
-
-const formDirectiveProvider = {
-    provide: ControlContainer,
-    useExisting: forwardRef(() => FormGroupDirective),
-};
-/**
- * @description
- *
- * Binds an existing `FormGroup` or `FormRecord` to a DOM element.
- *
- * This directive accepts an existing `FormGroup` instance. It will then use this
- * `FormGroup` instance to match any child `FormControl`, `FormGroup`/`FormRecord`,
- * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
- * and `FormArrayName` directives.
- *
- * @see [Reactive Forms Guide](guide/forms/reactive-forms)
- * @see {@link AbstractControl}
- *
- * @usageNotes
- * ### Register Form Group
- *
- * The following example registers a `FormGroup` with first name and last name controls,
- * and listens for the *ngSubmit* event when the button is clicked.
- *
- * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
- *
- * @ngModule ReactiveFormsModule
- * @publicApi
- */
-class FormGroupDirective extends ControlContainer {
-    callSetDisabledState;
-    /**
-     * @description
-     * Reports whether the form submission has been triggered.
-     */
-    get submitted() {
-        return untracked(this._submittedReactive);
-    }
-    // TODO(atscott): Remove once invalid API usage is cleaned up internally
-    set submitted(value) {
-        this._submittedReactive.set(value);
-    }
-    /** @internal */
-    _submitted = computed(() => this._submittedReactive(), ...(ngDevMode ? [{ debugName: "_submitted" }] : []));
-    _submittedReactive = signal(false, ...(ngDevMode ? [{ debugName: "_submittedReactive" }] : []));
-    /**
-     * Reference to an old form group input value, which is needed to cleanup
-     * old instance in case it was replaced with a new one.
-     */
-    _oldForm;
-    /**
-     * Callback that should be invoked when controls in FormGroup or FormArray collection change
-     * (added or removed). This callback triggers corresponding DOM updates.
-     */
-    _onCollectionChange = () => this._updateDomValue();
-    /**
-     * @description
-     * Tracks the list of added `FormControlName` instances
-     */
-    directives = [];
-    /**
-     * @description
-     * Tracks the `FormGroup` bound to this directive.
-     */
-    form = null;
-    /**
-     * @description
-     * Emits an event when the form submission has been triggered.
-     */
-    ngSubmit = new EventEmitter();
-    constructor(validators, asyncValidators, callSetDisabledState) {
-        super();
-        this.callSetDisabledState = callSetDisabledState;
-        this._setValidators(validators);
-        this._setAsyncValidators(asyncValidators);
-    }
-    /** @docs-private */
-    ngOnChanges(changes) {
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this.form) {
-            throw missingFormException();
-        }
-        if (changes.hasOwnProperty('form')) {
-            this._updateValidators();
-            this._updateDomValue();
-            this._updateRegistrations();
-            this._oldForm = this.form;
-        }
-    }
-    /** @docs-private */
-    ngOnDestroy() {
-        if (this.form) {
-            cleanUpValidators(this.form, this);
-            // Currently the `onCollectionChange` callback is rewritten each time the
-            // `_registerOnCollectionChange` function is invoked. The implication is that cleanup should
-            // happen *only* when the `onCollectionChange` callback was set by this directive instance.
-            // Otherwise it might cause overriding a callback of some other directive instances. We should
-            // consider updating this logic later to make it similar to how `onChange` callbacks are
-            // handled, see https://github.com/angular/angular/issues/39732 for additional info.
-            if (this.form._onCollectionChange === this._onCollectionChange) {
-                this.form._registerOnCollectionChange(() => { });
-            }
+    setControl(index, control, options = {}) {
+        // Adjust the index, then clamp it at no less than 0 to prevent undesired underflows.
+        let adjustedIndex = this._adjustIndex(index);
+        if (adjustedIndex < 0)
+            adjustedIndex = 0;
+        if (this.controls[adjustedIndex])
+            this.controls[adjustedIndex]._registerOnCollectionChange(() => { });
+        this.controls.splice(adjustedIndex, 1);
+        if (control) {
+            this.controls.splice(adjustedIndex, 0, control);
+            this._registerControl(control);
         }
+        this.updateValueAndValidity({ emitEvent: options.emitEvent });
+        this._onCollectionChange();
     }
     /**
-     * @description
-     * Returns this directive's instance.
-     */
-    get formDirective() {
-        return this;
-    }
-    /**
-     * @description
-     * Returns the `FormGroup` bound to this directive.
-     */
-    get control() {
-        return this.form;
-    }
-    /**
-     * @description
-     * Returns an array representing the path to this group. Because this directive
-     * always lives at the top level of a form, it always an empty array.
+     * Length of the control array.
      */
-    get path() {
-        return [];
+    get length() {
+        return this.controls.length;
     }
     /**
-     * @description
-     * Method that sets up the control directive in this group, re-calculates its value
-     * and validity, and adds the instance to the internal list of directives.
+     * Sets the value of the `FormArray`. It accepts an array that matches
+     * the structure of the control.
      *
-     * @param dir The `FormControlName` directive instance.
-     */
-    addControl(dir) {
-        const ctrl = this.form.get(dir.path);
-        setUpControl(ctrl, dir, this.callSetDisabledState);
-        ctrl.updateValueAndValidity({ emitEvent: false });
-        this.directives.push(dir);
-        return ctrl;
-    }
-    /**
-     * @description
-     * Retrieves the `FormControl` instance from the provided `FormControlName` directive
+     * This method performs strict checks, and throws an error if you try
+     * to set the value of a control that doesn't exist or if you exclude the
+     * value of a control.
      *
-     * @param dir The `FormControlName` directive instance.
-     */
-    getControl(dir) {
-        return this.form.get(dir.path);
-    }
-    /**
-     * @description
-     * Removes the `FormControlName` instance from the internal list of directives
+     * @usageNotes
+     * ### Set the values for the controls in the form array
      *
-     * @param dir The `FormControlName` directive instance.
-     */
-    removeControl(dir) {
-        cleanUpControl(dir.control || null, dir, /* validateControlPresenceOnChange */ false);
-        removeListItem$1(this.directives, dir);
-    }
-    /**
-     * Adds a new `FormGroupName` directive instance to the form.
+     * ```ts
+     * const arr = new FormArray([
+     *   new FormControl(),
+     *   new FormControl()
+     * ]);
+     * console.log(arr.value);   // [null, null]
      *
-     * @param dir The `FormGroupName` directive instance.
-     */
-    addFormGroup(dir) {
-        this._setUpFormContainer(dir);
-    }
-    /**
-     * Performs the necessary cleanup when a `FormGroupName` directive instance is removed from the
-     * view.
+     * arr.setValue(['Nancy', 'Drew']);
+     * console.log(arr.value);   // ['Nancy', 'Drew']
+     * ```
      *
-     * @param dir The `FormGroupName` directive instance.
-     */
-    removeFormGroup(dir) {
-        this._cleanUpFormContainer(dir);
-    }
-    /**
-     * @description
-     * Retrieves the `FormGroup` for a provided `FormGroupName` directive instance
+     * @param value Array of values for the controls
+     * @param options Configure options that determine how the control propagates changes and
+     * emits events after the value changes
      *
-     * @param dir The `FormGroupName` directive instance.
+     * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
+     * is false.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges`
+     * observables emit events with the latest status and value when the control value is updated.
+     * When false, no events are emitted.
+     * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+     * updateValueAndValidity} method.
      */
-    getFormGroup(dir) {
-        return this.form.get(dir.path);
+    setValue(value, options = {}) {
+        assertAllValuesPresent(this, false, value);
+        value.forEach((newValue, index) => {
+            assertControlPresent(this, false, index);
+            this.at(index).setValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
+        });
+        this.updateValueAndValidity(options);
     }
     /**
-     * Performs the necessary setup when a `FormArrayName` directive instance is added to the view.
+     * Patches the value of the `FormArray`. It accepts an array that matches the
+     * structure of the control, and does its best to match the values to the correct
+     * controls in the group.
      *
-     * @param dir The `FormArrayName` directive instance.
-     */
-    addFormArray(dir) {
-        this._setUpFormContainer(dir);
-    }
-    /**
-     * Performs the necessary cleanup when a `FormArrayName` directive instance is removed from the
-     * view.
+     * It accepts both super-sets and sub-sets of the array without throwing an error.
      *
-     * @param dir The `FormArrayName` directive instance.
+     * @usageNotes
+     * ### Patch the values for controls in a form array
+     *
+     * ```ts
+     * const arr = new FormArray([
+     *    new FormControl(),
+     *    new FormControl()
+     * ]);
+     * console.log(arr.value);   // [null, null]
+     *
+     * arr.patchValue(['Nancy']);
+     * console.log(arr.value);   // ['Nancy', null]
+     * ```
+     *
+     * @param value Array of latest values for the controls
+     * @param options Configure options that determine how the control propagates changes and
+     * emits events after the value changes
+     *
+     * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
+     * is false.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges` observables emit events with the latest status and value when the control
+     * value is updated. When false, no events are emitted. The configuration options are passed to
+     * the {@link AbstractControl#updateValueAndValidity updateValueAndValidity} method.
      */
-    removeFormArray(dir) {
-        this._cleanUpFormContainer(dir);
+    patchValue(value, options = {}) {
+        // Even though the `value` argument type doesn't allow `null` and `undefined` values, the
+        // `patchValue` can be called recursively and inner data structures might have these values,
+        // so we just ignore such cases when a field containing FormArray instance receives `null` or
+        // `undefined` as a value.
+        if (value == null /* both `null` and `undefined` */)
+            return;
+        value.forEach((newValue, index) => {
+            if (this.at(index)) {
+                this.at(index).patchValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
+            }
+        });
+        this.updateValueAndValidity(options);
     }
     /**
-     * @description
-     * Retrieves the `FormArray` for a provided `FormArrayName` directive instance.
+     * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
+     * value of all descendants to null or null maps.
      *
-     * @param dir The `FormArrayName` directive instance.
+     * You reset to a specific form state by passing in an array of states
+     * that matches the structure of the control. The state is a standalone value
+     * or a form state object with both a value and a disabled status.
+     *
+     * @usageNotes
+     * ### Reset the values in a form array
+     *
+     * ```ts
+     * const arr = new FormArray([
+     *    new FormControl(),
+     *    new FormControl()
+     * ]);
+     * arr.reset(['name', 'last name']);
+     *
+     * console.log(arr.value);  // ['name', 'last name']
+     * ```
+     *
+     * ### Reset the values in a form array and the disabled status for the first control
+     *
+     * ```ts
+     * arr.reset([
+     *   {value: 'name', disabled: true},
+     *   'last'
+     * ]);
+     *
+     * console.log(arr.value);  // ['last']
+     * console.log(arr.at(0).status);  // 'DISABLED'
+     * ```
+     *
+     * @param value Array of values for the controls
+     * @param options Configure options that determine how the control propagates changes and
+     * emits events after the value changes
+     *
+     * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
+     * is false.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges`
+     * observables emit events with the latest status and value when the control is reset.
+     * When false, no events are emitted.
+     * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+     * updateValueAndValidity} method.
      */
-    getFormArray(dir) {
-        return this.form.get(dir.path);
+    reset(value = [], options = {}) {
+        this._forEachChild((control, index) => {
+            control.reset(value[index], { onlySelf: true, emitEvent: options.emitEvent });
+        });
+        this._updatePristine(options, this);
+        this._updateTouched(options, this);
+        this.updateValueAndValidity(options);
     }
     /**
-     * Sets the new value for the provided `FormControlName` directive.
+     * The aggregate value of the array, including any disabled controls.
      *
-     * @param dir The `FormControlName` directive instance.
-     * @param value The new value for the directive's control.
+     * Reports all values regardless of disabled status.
      */
-    updateModel(dir, value) {
-        const ctrl = this.form.get(dir.path);
-        ctrl.setValue(value);
+    getRawValue() {
+        return this.controls.map((control) => control.getRawValue());
     }
     /**
-     * @description
-     * Method called with the "submit" event is triggered on the form.
-     * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
+     * Remove all controls in the `FormArray`.
      *
-     * @param $event The "submit" event object
+     * @param options Specifies whether this FormArray instance should emit events after all
+     *     controls are removed.
+     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges` observables emit events with the latest status and value when all controls
+     * in this FormArray instance are removed. When false, no events are emitted.
+     *
+     * @usageNotes
+     * ### Remove all elements from a FormArray
+     *
+     * ```ts
+     * const arr = new FormArray([
+     *    new FormControl(),
+     *    new FormControl()
+     * ]);
+     * console.log(arr.length);  // 2
+     *
+     * arr.clear();
+     * console.log(arr.length);  // 0
+     * ```
+     *
+     * It's a simpler and more efficient alternative to removing all elements one by one:
+     *
+     * ```ts
+     * const arr = new FormArray([
+     *    new FormControl(),
+     *    new FormControl()
+     * ]);
+     *
+     * while (arr.length) {
+     *    arr.removeAt(0);
+     * }
+     * ```
      */
-    onSubmit($event) {
-        this._submittedReactive.set(true);
-        syncPendingControls(this.form, this.directives);
-        this.ngSubmit.emit($event);
-        this.form._events.next(new FormSubmittedEvent(this.control));
-        // Forms with `method="dialog"` have some special behavior that won't reload the page and that
-        // shouldn't be prevented. Note that we need to null check the `event` and the `target`, because
-        // some internal apps call this method directly with the wrong arguments.
-        return $event?.target?.method === 'dialog';
+    clear(options = {}) {
+        if (this.controls.length < 1)
+            return;
+        this._forEachChild((control) => control._registerOnCollectionChange(() => { }));
+        this.controls.splice(0);
+        this.updateValueAndValidity({ emitEvent: options.emitEvent });
     }
     /**
-     * @description
-     * Method called when the "reset" event is triggered on the form.
+     * Adjusts a negative index by summing it with the length of the array. For very negative
+     * indices, the result may remain negative.
+     * @internal
      */
-    onReset() {
-        this.resetForm();
+    _adjustIndex(index) {
+        return index < 0 ? index + this.length : index;
     }
-    /**
-     * @description
-     * Resets the form to an initial value and resets its submitted status.
-     *
-     * @param value The new value for the form, `undefined` by default
-     */
-    resetForm(value = undefined, options = {}) {
-        this.form.reset(value, options);
-        this._submittedReactive.set(false);
-        if (options?.emitEvent !== false) {
-            this.form._events.next(new FormResetEvent(this.form));
-        }
+    /** @internal */
+    _syncPendingControls() {
+        let subtreeUpdated = this.controls.reduce((updated, child) => {
+            return child._syncPendingControls() ? true : updated;
+        }, false);
+        if (subtreeUpdated)
+            this.updateValueAndValidity({ onlySelf: true });
+        return subtreeUpdated;
     }
     /** @internal */
-    _updateDomValue() {
-        this.directives.forEach((dir) => {
-            const oldCtrl = dir.control;
-            const newCtrl = this.form.get(dir.path);
-            if (oldCtrl !== newCtrl) {
-                // Note: the value of the `dir.control` may not be defined, for example when it's a first
-                // `FormControl` that is added to a `FormGroup` instance (via `addControl` call).
-                cleanUpControl(oldCtrl || null, dir);
-                // Check whether new control at the same location inside the corresponding `FormGroup` is an
-                // instance of `FormControl` and perform control setup only if that's the case.
-                // Note: we don't need to clear the list of directives (`this.directives`) here, it would be
-                // taken care of in the `removeControl` method invoked when corresponding `formControlName`
-                // directive instance is being removed (invoked from `FormControlName.ngOnDestroy`).
-                if (isFormControl(newCtrl)) {
-                    setUpControl(newCtrl, dir, this.callSetDisabledState);
-                    dir.control = newCtrl;
-                }
-            }
+    _forEachChild(cb) {
+        this.controls.forEach((control, index) => {
+            cb(control, index);
         });
-        this.form._updateTreeValidity({ emitEvent: false });
     }
-    _setUpFormContainer(dir) {
-        const ctrl = this.form.get(dir.path);
-        setUpFormContainer(ctrl, dir);
-        // NOTE: this operation looks unnecessary in case no new validators were added in
-        // `setUpFormContainer` call. Consider updating this code to match the logic in
-        // `_cleanUpFormContainer` function.
-        ctrl.updateValueAndValidity({ emitEvent: false });
+    /** @internal */
+    _updateValue() {
+        this.value = this.controls
+            .filter((control) => control.enabled || this.disabled)
+            .map((control) => control.value);
     }
-    _cleanUpFormContainer(dir) {
-        if (this.form) {
-            const ctrl = this.form.get(dir.path);
-            if (ctrl) {
-                const isControlUpdated = cleanUpFormContainer(ctrl, dir);
-                if (isControlUpdated) {
-                    // Run validity check only in case a control was updated (i.e. view validators were
-                    // removed) as removing view validators might cause validity to change.
-                    ctrl.updateValueAndValidity({ emitEvent: false });
-                }
-            }
-        }
+    /** @internal */
+    _anyControls(condition) {
+        return this.controls.some((control) => control.enabled && condition(control));
     }
-    _updateRegistrations() {
-        this.form._registerOnCollectionChange(this._onCollectionChange);
-        if (this._oldForm) {
-            this._oldForm._registerOnCollectionChange(() => { });
-        }
+    /** @internal */
+    _setUpControls() {
+        this._forEachChild((control) => this._registerControl(control));
     }
-    _updateValidators() {
-        setUpValidators(this.form, this);
-        if (this._oldForm) {
-            cleanUpValidators(this._oldForm, this);
+    /** @internal */
+    _allControlsDisabled() {
+        for (const control of this.controls) {
+            if (control.enabled)
+                return false;
         }
+        return this.controls.length > 0 || this.disabled;
+    }
+    _registerControl(control) {
+        control.setParent(this);
+        control._registerOnCollectionChange(this._onCollectionChange);
+    }
+    /** @internal */
+    _find(name) {
+        return this.at(name) ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupDirective, deps: [{ token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: CALL_SET_DISABLED_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormGroupDirective, isStandalone: false, selector: "[formGroup]", inputs: { form: ["formGroup", "form"] }, outputs: { ngSubmit: "ngSubmit" }, host: { listeners: { "submit": "onSubmit($event)", "reset": "onReset()" } }, providers: [formDirectiveProvider], exportAs: ["ngForm"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[formGroup]',
-                    providers: [formDirectiveProvider],
-                    host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
-                    exportAs: 'ngForm',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALIDATORS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_ASYNC_VALIDATORS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALL_SET_DISABLED_STATE]
-                }] }], propDecorators: { form: [{
-                type: Input,
-                args: ['formGroup']
-            }], ngSubmit: [{
-                type: Output
-            }] } });
-
-const formGroupNameProvider = {
-    provide: ControlContainer,
-    useExisting: forwardRef(() => FormGroupName),
-};
+const UntypedFormArray = FormArray;
 /**
  * @description
+ * Asserts that the given control is an instance of `FormArray`
  *
- * Syncs a nested `FormGroup` or `FormRecord` to a DOM element.
- *
- * This directive can only be used with a parent `FormGroupDirective`.
- *
- * It accepts the string name of the nested `FormGroup` or `FormRecord` to link, and
- * looks for a `FormGroup` or `FormRecord` registered with that name in the parent
- * `FormGroup` instance you passed into `FormGroupDirective`.
- *
- * Use nested form groups to validate a sub-group of a
- * form separately from the rest or to group the values of certain
- * controls into their own nested object.
- *
- * @see [Reactive Forms Guide](guide/forms/reactive-forms)
- *
- * @usageNotes
- *
- * ### Access the group by name
- *
- * The following example uses the `AbstractControl.get` method to access the
- * associated `FormGroup`
- *
- * ```ts
- *   this.form.get('name');
- * ```
- *
- * ### Access individual controls in the group
- *
- * The following example uses the `AbstractControl.get` method to access
- * individual controls within the group using dot syntax.
- *
- * ```ts
- *   this.form.get('name.first');
- * ```
- *
- * ### Register a nested `FormGroup`.
- *
- * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`,
- * and provides methods to retrieve the nested `FormGroup` and individual controls.
- *
- * {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
- *
- * @ngModule ReactiveFormsModule
  * @publicApi
  */
-class FormGroupName extends AbstractFormGroupDirective {
-    /**
-     * @description
-     * Tracks the name of the `FormGroup` bound to the directive. The name corresponds
-     * to a key in the parent `FormGroup` or `FormArray`.
-     * Accepts a name as a string or a number.
-     * The name in the form of a string is useful for individual forms,
-     * while the numerical form allows for form groups to be bound
-     * to indices when iterating over groups in a `FormArray`.
-     */
-    name = null;
-    constructor(parent, validators, asyncValidators) {
-        super();
-        this._parent = parent;
-        this._setValidators(validators);
-        this._setAsyncValidators(asyncValidators);
-    }
-    /** @internal */
-    _checkParentType() {
-        if (hasInvalidParent(this._parent) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-            throw groupParentException();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupName, deps: [{ token: ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormGroupName, isStandalone: false, selector: "[formGroupName]", inputs: { name: ["formGroupName", "name"] }, providers: [formGroupNameProvider], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupName, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[formGroupName]',
-                    providers: [formGroupNameProvider],
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: ControlContainer, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }, {
-                    type: SkipSelf
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALIDATORS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_ASYNC_VALIDATORS]
-                }] }], propDecorators: { name: [{
-                type: Input,
-                args: ['formGroupName']
-            }] } });
-const formArrayNameProvider = {
-    provide: ControlContainer,
-    useExisting: forwardRef(() => FormArrayName),
-};
+const isFormArray = (control) => control instanceof FormArray;
+
 /**
  * @description
  *
- * Syncs a nested `FormArray` to a DOM element.
- *
- * This directive is designed to be used with a parent `FormGroupDirective` (selector:
- * `[formGroup]`).
- *
- * It accepts the string name of the nested `FormArray` you want to link, and
- * will look for a `FormArray` registered with that name in the parent
- * `FormGroup` instance you passed into `FormGroupDirective`.
- *
- * @see [Reactive Forms Guide](guide/forms/reactive-forms)
- * @see {@link AbstractControl}
- *
- * @usageNotes
- *
- * ### Example
- *
- * {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
+ * Abstract class for top-level form directives (FormArrayDirective, FormGroupDirective) who bind an
+ * existing `Form` to a DOM element.
  *
- * @ngModule ReactiveFormsModule
  * @publicApi
  */
-class FormArrayName extends ControlContainer {
-    /** @internal */
-    _parent;
+class AbstractFormDirective extends ControlContainer {
+    callSetDisabledState;
     /**
      * @description
-     * Tracks the name of the `FormArray` bound to the directive. The name corresponds
-     * to a key in the parent `FormGroup` or `FormArray`.
-     * Accepts a name as a string or a number.
-     * The name in the form of a string is useful for individual forms,
-     * while the numerical form allows for form arrays to be bound
-     * to indices when iterating over arrays in a `FormArray`.
+     * Reports whether the form submission has been triggered.
      */
-    name = null;
-    constructor(parent, validators, asyncValidators) {
-        super();
-        this._parent = parent;
-        this._setValidators(validators);
-        this._setAsyncValidators(asyncValidators);
+    get submitted() {
+        return untracked(this._submittedReactive);
     }
-    /**
-     * A lifecycle method called when the directive's inputs are initialized. For internal use only.
-     * @throws If the directive does not have a valid parent.
-     * @docs-private
-     */
-    ngOnInit() {
-        if (hasInvalidParent(this._parent) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-            throw arrayParentException();
-        }
-        this.formDirective.addFormArray(this);
+    // TODO(atscott): Remove once invalid API usage is cleaned up internally
+    set submitted(value) {
+        this._submittedReactive.set(value);
     }
+    /** @internal */
+    _submitted = computed(() => this._submittedReactive(), ...(ngDevMode ? [{ debugName: "_submitted" }] : []));
+    _submittedReactive = signal(false, ...(ngDevMode ? [{ debugName: "_submittedReactive" }] : []));
     /**
-     * A lifecycle method called before the directive's instance is destroyed. For internal use only.
-     * @docs-private
+     * Reference to an old form group input value, which is needed to cleanup
+     * old instance in case it was replaced with a new one.
      */
-    ngOnDestroy() {
-        this.formDirective?.removeFormArray(this);
-    }
+    _oldForm;
     /**
-     * @description
-     * The `FormArray` bound to this directive.
+     * Callback that should be invoked when controls in FormGroup or FormArray collection change
+     * (added or removed). This callback triggers corresponding DOM updates.
      */
-    get control() {
-        return this.formDirective.getFormArray(this);
-    }
+    _onCollectionChange = () => this._updateDomValue();
     /**
      * @description
-     * The top-level directive for this group if present, otherwise null.
+     * Tracks the list of added `FormControlName` instances
      */
-    get formDirective() {
-        return this._parent ? this._parent.formDirective : null;
+    directives = [];
+    constructor(validators, asyncValidators, callSetDisabledState) {
+        super();
+        this.callSetDisabledState = callSetDisabledState;
+        this._setValidators(validators);
+        this._setAsyncValidators(asyncValidators);
     }
-    /**
+    /** @nodoc */
+    ngOnChanges(changes) {
+        this.onChanges(changes);
+    }
+    /** @nodoc */
+    ngOnDestroy() {
+        this.onDestroy();
+    }
+    /** @nodoc */
+    onChanges(changes) {
+        this._checkFormPresent();
+        if (changes.hasOwnProperty('form')) {
+            this._updateValidators();
+            this._updateDomValue();
+            this._updateRegistrations();
+            this._oldForm = this.form;
+        }
+    }
+    /** @nodoc */
+    onDestroy() {
+        if (this.form) {
+            cleanUpValidators(this.form, this);
+            // Currently the `onCollectionChange` callback is rewritten each time the
+            // `_registerOnCollectionChange` function is invoked. The implication is that cleanup should
+            // happen *only* when the `onCollectionChange` callback was set by this directive instance.
+            // Otherwise it might cause overriding a callback of some other directive instances. We should
+            // consider updating this logic later to make it similar to how `onChange` callbacks are
+            // handled, see https://github.com/angular/angular/issues/39732 for additional info.
+            if (this.form._onCollectionChange === this._onCollectionChange) {
+                this.form._registerOnCollectionChange(() => { });
+            }
+        }
+    }
+    /**
      * @description
-     * Returns an array that represents the path from the top-level form to this control.
-     * Each index is the string name of the control on that level.
+     * Returns this directive's instance.
      */
-    get path() {
-        return controlPath(this.name == null ? this.name : this.name.toString(), this._parent);
+    get formDirective() {
+        return this;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormArrayName, deps: [{ token: ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormArrayName, isStandalone: false, selector: "[formArrayName]", inputs: { name: ["formArrayName", "name"] }, providers: [formArrayNameProvider], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormArrayName, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[formArrayName]',
-                    providers: [formArrayNameProvider],
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: ControlContainer, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }, {
-                    type: SkipSelf
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALIDATORS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_ASYNC_VALIDATORS]
-                }] }], propDecorators: { name: [{
-                type: Input,
-                args: ['formArrayName']
-            }] } });
-function hasInvalidParent(parent) {
-    return (!(parent instanceof FormGroupName) &&
-        !(parent instanceof FormGroupDirective) &&
-        !(parent instanceof FormArrayName));
-}
-
-const controlNameBinding = {
-    provide: NgControl,
-    useExisting: forwardRef(() => FormControlName),
-};
-/**
- * @description
- * Syncs a `FormControl` in an existing `FormGroup` to a form control
- * element by name.
- *
- * @see [Reactive Forms Guide](guide/forms/reactive-forms)
- * @see {@link FormControl}
- * @see {@link AbstractControl}
- *
- * @usageNotes
- *
- * ### Register `FormControl` within a group
- *
- * The following example shows how to register multiple form controls within a form group
- * and set their value.
- *
- * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
- *
- * To see `formControlName` examples with different form control types, see:
- *
- * * Radio buttons: `RadioControlValueAccessor`
- * * Selects: `SelectControlValueAccessor`
- *
- * ### Use with ngModel is deprecated
- *
- * Support for using the `ngModel` input property and `ngModelChange` event with reactive
- * form directives has been deprecated in Angular v6 and is scheduled for removal in
- * a future version of Angular.
- *
- * @ngModule ReactiveFormsModule
- * @publicApi
- */
-class FormControlName extends NgControl {
-    _ngModelWarningConfig;
-    _added = false;
     /**
-     * Internal reference to the view model value.
-     * @internal
+     * @description
+     * Returns an array representing the path to this group. Because this directive
+     * always lives at the top level of a form, it always an empty array.
      */
-    viewModel;
+    get path() {
+        return [];
+    }
     /**
      * @description
-     * Tracks the `FormControl` instance bound to the directive.
+     * Method that sets up the control directive in this group, re-calculates its value
+     * and validity, and adds the instance to the internal list of directives.
+     *
+     * @param dir The `FormControlName` directive instance.
      */
-    control;
+    addControl(dir) {
+        const ctrl = this.form.get(dir.path);
+        setUpControl(ctrl, dir, this.callSetDisabledState);
+        ctrl.updateValueAndValidity({ emitEvent: false });
+        this.directives.push(dir);
+        return ctrl;
+    }
     /**
      * @description
-     * Tracks the name of the `FormControl` bound to the directive. The name corresponds
-     * to a key in the parent `FormGroup` or `FormArray`.
-     * Accepts a name as a string or a number.
-     * The name in the form of a string is useful for individual forms,
-     * while the numerical form allows for form controls to be bound
-     * to indices when iterating over controls in a `FormArray`.
+     * Retrieves the `FormControl` instance from the provided `FormControlName` directive
+     *
+     * @param dir The `FormControlName` directive instance.
      */
-    name = null;
+    getControl(dir) {
+        return this.form.get(dir.path);
+    }
     /**
      * @description
-     * Triggers a warning in dev mode that this input should not be used with reactive forms.
+     * Removes the `FormControlName` instance from the internal list of directives
+     *
+     * @param dir The `FormControlName` directive instance.
      */
-    set isDisabled(isDisabled) {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            console.warn(disabledAttrWarning);
-        }
+    removeControl(dir) {
+        cleanUpControl(dir.control || null, dir, /* validateControlPresenceOnChange */ false);
+        removeListItem$1(this.directives, dir);
+    }
+    /**
+     * Adds a new `FormGroupName` directive instance to the form.
+     *
+     * @param dir The `FormGroupName` directive instance.
+     */
+    addFormGroup(dir) {
+        this._setUpFormContainer(dir);
+    }
+    /**
+     * Performs the necessary cleanup when a `FormGroupName` directive instance is removed from the
+     * view.
+     *
+     * @param dir The `FormGroupName` directive instance.
+     */
+    removeFormGroup(dir) {
+        this._cleanUpFormContainer(dir);
     }
-    // TODO(kara): remove next 4 properties once deprecation period is over
-    /** @deprecated as of v6 */
-    model;
-    /** @deprecated as of v6 */
-    update = new EventEmitter();
     /**
      * @description
-     * Static property used to track whether any ngModel warnings have been sent across
-     * all instances of FormControlName. Used to support warning config of "once".
+     * Retrieves the `FormGroup` for a provided `FormGroupName` directive instance
      *
-     * @internal
+     * @param dir The `FormGroupName` directive instance.
      */
-    static _ngModelWarningSentOnce = false;
+    getFormGroup(dir) {
+        return this.form.get(dir.path);
+    }
     /**
      * @description
-     * Instance property used to track whether an ngModel warning has been sent out for this
-     * particular FormControlName instance. Used to support warning config of "always".
+     * Retrieves the `FormArray` for a provided `FormArrayName` directive instance.
      *
-     * @internal
+     * @param dir The `FormArrayName` directive instance.
      */
-    _ngModelWarningSent = false;
-    constructor(parent, validators, asyncValidators, valueAccessors, _ngModelWarningConfig) {
-        super();
-        this._ngModelWarningConfig = _ngModelWarningConfig;
-        this._parent = parent;
-        this._setValidators(validators);
-        this._setAsyncValidators(asyncValidators);
-        this.valueAccessor = selectValueAccessor(this, valueAccessors);
+    getFormArray(dir) {
+        return this.form.get(dir.path);
     }
-    /** @docs-private */
-    ngOnChanges(changes) {
-        if (!this._added)
-            this._setUpControl();
-        if (isPropertyUpdated(changes, this.viewModel)) {
-            if (typeof ngDevMode === 'undefined' || ngDevMode) {
-                _ngModelWarning('formControlName', FormControlName, this, this._ngModelWarningConfig);
-            }
-            this.viewModel = this.model;
-            this.formDirective.updateModel(this, this.model);
-        }
+    /**
+     * Performs the necessary setup when a `FormArrayName` directive instance is added to the view.
+     *
+     * @param dir The `FormArrayName` directive instance.
+     */
+    addFormArray(dir) {
+        this._setUpFormContainer(dir);
     }
-    /** @docs-private */
-    ngOnDestroy() {
-        if (this.formDirective) {
-            this.formDirective.removeControl(this);
-        }
+    /**
+     * Performs the necessary cleanup when a `FormArrayName` directive instance is removed from the
+     * view.
+     *
+     * @param dir The `FormArrayName` directive instance.
+     */
+    removeFormArray(dir) {
+        this._cleanUpFormContainer(dir);
     }
     /**
-     * @description
-     * Sets the new value for the view model and emits an `ngModelChange` event.
+     * Sets the new value for the provided `FormControlName` directive.
      *
-     * @param newValue The new value for the view model.
+     * @param dir The `FormControlName` directive instance.
+     * @param value The new value for the directive's control.
      */
-    viewToModelUpdate(newValue) {
-        this.viewModel = newValue;
-        this.update.emit(newValue);
+    updateModel(dir, value) {
+        const ctrl = this.form.get(dir.path);
+        ctrl.setValue(value);
     }
     /**
      * @description
-     * Returns an array that represents the path from the top-level form to this control.
-     * Each index is the string name of the control on that level.
+     * Method called when the "reset" event is triggered on the form.
      */
-    get path() {
-        return controlPath(this.name == null ? this.name : this.name.toString(), this._parent);
+    onReset() {
+        this.resetForm();
     }
     /**
      * @description
-     * The top-level directive for this group if present, otherwise null.
+     * Resets the form to an initial value and resets its submitted status.
+     *
+     * @param value The new value for the form.
      */
-    get formDirective() {
-        return this._parent ? this._parent.formDirective : null;
+    resetForm(value = undefined, options = {}) {
+        this.form.reset(value, options);
+        this._submittedReactive.set(false);
+        if (options?.emitEvent !== false) {
+            this.form._events.next(new FormResetEvent(this.form));
+        }
     }
-    _setUpControl() {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            checkParentType(this._parent, this.name);
+    /**
+     * @description
+     * Method called with the "submit" event is triggered on the form.
+     * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
+     *
+     * @param $event The "submit" event object
+     */
+    onSubmit($event) {
+        this.submitted = true;
+        syncPendingControls(this.form, this.directives);
+        this.ngSubmit.emit($event);
+        this.form._events.next(new FormSubmittedEvent(this.control));
+        // Forms with `method="dialog"` have some special behavior that won't reload the page and that
+        // shouldn't be prevented. Note that we need to null check the `event` and the `target`, because
+        // some internal apps call this method directly with the wrong arguments.
+        return $event?.target?.method === 'dialog';
+    }
+    /** @internal */
+    _updateDomValue() {
+        this.directives.forEach((dir) => {
+            const oldCtrl = dir.control;
+            const newCtrl = this.form.get(dir.path);
+            if (oldCtrl !== newCtrl) {
+                // Note: the value of the `dir.control` may not be defined, for example when it's a first
+                // `FormControl` that is added to a `FormGroup`/`FormArray` instance (via `addControl` call).
+                cleanUpControl(oldCtrl || null, dir);
+                // Check whether new control at the same location inside the corresponding `FormGroup`/`FormArray` is an
+                // instance of `FormControl` and perform control setup only if that's the case.
+                // Note: we don't need to clear the list of directives (`this.directives`) here, it would be
+                // taken care of in the `removeControl` method invoked when corresponding `formControlName`
+                // directive instance is being removed (invoked from `FormControlName.ngOnDestroy`).
+                if (isFormControl(newCtrl)) {
+                    setUpControl(newCtrl, dir, this.callSetDisabledState);
+                    dir.control = newCtrl;
+                }
+            }
+        });
+        this.form._updateTreeValidity({ emitEvent: false });
+    }
+    _setUpFormContainer(dir) {
+        const ctrl = this.form.get(dir.path);
+        setUpFormContainer(ctrl, dir);
+        // NOTE: this operation looks unnecessary in case no new validators were added in
+        // `setUpFormContainer` call. Consider updating this code to match the logic in
+        // `_cleanUpFormContainer` function.
+        ctrl.updateValueAndValidity({ emitEvent: false });
+    }
+    _cleanUpFormContainer(dir) {
+        if (this.form) {
+            const ctrl = this.form.get(dir.path);
+            if (ctrl) {
+                const isControlUpdated = cleanUpFormContainer(ctrl, dir);
+                if (isControlUpdated) {
+                    // Run validity check only in case a control was updated (i.e. view validators were
+                    // removed) as removing view validators might cause validity to change.
+                    ctrl.updateValueAndValidity({ emitEvent: false });
+                }
+            }
         }
-        this.control = this.formDirective.addControl(this);
-        this._added = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlName, deps: [{ token: ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: NG_VALUE_ACCESSOR, optional: true, self: true }, { token: NG_MODEL_WITH_FORM_CONTROL_WARNING, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormControlName, isStandalone: false, selector: "[formControlName]", inputs: { name: ["formControlName", "name"], isDisabled: ["disabled", "isDisabled"], model: ["ngModel", "model"] }, outputs: { update: "ngModelChange" }, providers: [controlNameBinding], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    _updateRegistrations() {
+        this.form._registerOnCollectionChange(this._onCollectionChange);
+        if (this._oldForm) {
+            this._oldForm._registerOnCollectionChange(() => { });
+        }
+    }
+    _updateValidators() {
+        setUpValidators(this.form, this);
+        if (this._oldForm) {
+            cleanUpValidators(this._oldForm, this);
+        }
+    }
+    _checkFormPresent() {
+        if (!this.form && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw missingFormException();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AbstractFormDirective, deps: [{ token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: CALL_SET_DISABLED_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: AbstractFormDirective, isStandalone: true, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlName, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[formControlName]',
-                    providers: [controlNameBinding],
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: ControlContainer, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }, {
-                    type: SkipSelf
-                }] }, { type: undefined, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AbstractFormDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -5783,1623 +5600,1897 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
                     args: [NG_ASYNC_VALIDATORS]
                 }] }, { type: undefined, decorators: [{
                     type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
                 }, {
                     type: Inject,
-                    args: [NG_MODEL_WITH_FORM_CONTROL_WARNING]
-                }] }], propDecorators: { name: [{
-                type: Input,
-                args: ['formControlName']
-            }], isDisabled: [{
-                type: Input,
-                args: ['disabled']
-            }], model: [{
-                type: Input,
-                args: ['ngModel']
-            }], update: [{
-                type: Output,
-                args: ['ngModelChange']
-            }] } });
-function checkParentType(parent, name) {
-    if (!(parent instanceof FormGroupName) && parent instanceof AbstractFormGroupDirective) {
-        throw ngModelGroupException();
-    }
-    else if (!(parent instanceof FormGroupName) &&
-        !(parent instanceof FormGroupDirective) &&
-        !(parent instanceof FormArrayName)) {
-        throw controlParentException(name);
-    }
-}
+                    args: [CALL_SET_DISABLED_STATE]
+                }] }] });
 
-const SELECT_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SelectControlValueAccessor),
-    multi: true,
+const formDirectiveProvider$1 = {
+    provide: ControlContainer,
+    useExisting: forwardRef(() => FormArrayDirective),
 };
-function _buildValueString$1(id, value) {
-    if (id == null)
-        return `${value}`;
-    if (value && typeof value === 'object')
-        value = 'Object';
-    return `${id}: ${value}`.slice(0, 50);
-}
-function _extractId$1(valueString) {
-    return valueString.split(':')[0];
-}
 /**
  * @description
- * The `ControlValueAccessor` for writing select control values and listening to select control
- * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
- * `NgModel` directives.
  *
- * @usageNotes
- *
- * ### Using select controls in a reactive form
- *
- * The following examples show how to use a select control in a reactive form.
- *
- * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
+ * Binds an existing `FormArray` to a DOM element.
  *
- * ### Using select controls in a template-driven form
+ * This directive accepts an existing `FormArray` instance. It will then use this
+ * `FormArray` instance to match any child `FormControl`, `FormGroup`/`FormRecord`,
+ * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
+ * and `FormArrayName` directives.
  *
- * To use a select in a template-driven form, simply add an `ngModel` and a `name`
- * attribute to the main `<select>` tag.
+ * @see [Reactive Forms Guide](guide/reactive-forms)
+ * @see {@link AbstractControl}
  *
- * {@example forms/ts/selectControl/select_control_example.ts region='Component'}
+ * @usageNotes
+ * ### Register Form Array
  *
- * ### Customizing option selection
+ * The following example registers a `FormArray` with first name and last name controls,
+ * and listens for the *ngSubmit* event when the button is clicked.
  *
- * Angular uses object identity to select option. It's possible for the identities of items
- * to change while the data does not. This can happen, for example, if the items are produced
- * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
- * second response will produce objects with different identities.
+ * @ngModule ReactiveFormsModule
+ * @publicApi
+ */
+class FormArrayDirective extends AbstractFormDirective {
+    /**
+     * @description
+     * Tracks the `FormArray` bound to this directive.
+     */
+    form = null;
+    /**
+     * @description
+     * Emits an event when the form submission has been triggered.
+     */
+    ngSubmit = new EventEmitter();
+    /**
+     * @description
+     * Returns the `FormArray` bound to this directive.
+     */
+    get control() {
+        return this.form;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormArrayDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormArrayDirective, isStandalone: false, selector: "[formArray]", inputs: { form: ["formArray", "form"] }, outputs: { ngSubmit: "ngSubmit" }, host: { listeners: { "submit": "onSubmit($event)", "reset": "onReset()" } }, providers: [formDirectiveProvider$1], exportAs: ["ngForm"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormArrayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[formArray]',
+                    providers: [formDirectiveProvider$1],
+                    host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
+                    exportAs: 'ngForm',
+                    standalone: false,
+                }]
+        }], propDecorators: { form: [{
+                type: Input,
+                args: ['formArray']
+            }], ngSubmit: [{
+                type: Output
+            }] } });
+
+/**
+ * Token to provide to turn off the ngModel warning on formControl and formControlName.
+ */
+const NG_MODEL_WITH_FORM_CONTROL_WARNING = new InjectionToken(ngDevMode ? 'NgModelWithFormControlWarning' : '');
+const formControlBinding = {
+    provide: NgControl,
+    useExisting: forwardRef(() => FormControlDirective),
+};
+/**
+ * @description
+ * Synchronizes a standalone `FormControl` instance to a form control element.
  *
- * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
- * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
- * If `compareWith` is given, Angular selects option by the return value of the function.
+ * Note that support for using the `ngModel` input property and `ngModelChange` event with reactive
+ * form directives was deprecated in Angular v6 and is scheduled for removal in
+ * a future version of Angular.
  *
- * ```ts
- * const selectedCountriesControl = new FormControl();
- * ```
+ * @see [Reactive Forms Guide](guide/forms/reactive-forms)
+ * @see {@link FormControl}
+ * @see {@link AbstractControl}
  *
- * ```html
- * <select [compareWith]="compareFn"  [formControl]="selectedCountriesControl">
- *    @for(country of countries; track $index) {
- *        <option[ngValue]="country">{{country.name}}</option>
- *    }
- * </select>
+ * @usageNotes
  *
- * compareFn(c1: Country, c2: Country): boolean {
- *     return c1 && c2 ? c1.id === c2.id : c1 === c2;
- * }
- * ```
+ * The following example shows how to register a standalone control and set its value.
  *
- * **Note:** We listen to the 'change' event because 'input' events aren't fired
- * for selects in IE, see:
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility
+ * {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
  *
  * @ngModule ReactiveFormsModule
- * @ngModule FormsModule
  * @publicApi
  */
-class SelectControlValueAccessor extends BuiltInControlValueAccessor {
-    /** @docs-private */
-    value;
-    /** @internal */
-    _optionMap = new Map();
-    /** @internal */
-    _idCounter = 0;
+class FormControlDirective extends NgControl {
+    _ngModelWarningConfig;
+    callSetDisabledState;
     /**
-     * @description
-     * Tracks the option comparison algorithm for tracking identities when
-     * checking for changes.
+     * Internal reference to the view model value.
+     * @docs-private
      */
-    set compareWith(fn) {
-        if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-            throw new _RuntimeError(1201 /* RuntimeErrorCode.COMPAREWITH_NOT_A_FN */, `compareWith must be a function, but received ${JSON.stringify(fn)}`);
-        }
-        this._compareWith = fn;
-    }
-    _compareWith = Object.is;
-    // We need this because we might be in the process of destroying the root
-    // injector, which is marked as destroyed before running destroy hooks.
-    // Attempting to use afterNextRender with the node injector would evntually
-    // run into that already destroyed injector.
-    appRefInjector = inject(ApplicationRef).injector;
-    destroyRef = inject(DestroyRef);
-    cdr = inject(ChangeDetectorRef);
-    _queuedWrite = false;
+    viewModel;
     /**
-     * This is needed to efficiently set the select value when adding/removing options. If
-     * writeValue is instead called for every added/removed option, this results in exponentially
-     * more _compareValue calls than the number of option elements (issue #41330).
-     *
-     * Secondly, calling writeValue when rendering individual option elements instead of after they
-     * are all rendered caused an issue in Safari and IE 11 where the first option element failed
-     * to be deselected when no option matched the select ngModel. This was because Angular would
-     * set the select element's value property before appending the option's child text node to the
-     * DOM (issue #14505).
-     *
-     * Finally, this approach is necessary to avoid an issue with delayed element removal when
-     * using the animations module (in all browsers). Otherwise when a selected option is removed
-     * (so no option matches the ngModel anymore), Angular would change the select element value
-     * before actually removing the option from the DOM. Then when the option is finally removed
-     * from the DOM, the browser would change the select value to that of the first option, even
-     * though it doesn't match the ngModel (issue #18430).
-     *
-     * @internal
+     * @description
+     * Tracks the `FormControl` instance bound to the directive.
      */
-    _writeValueAfterRender() {
-        if (this._queuedWrite || this.appRefInjector.destroyed) {
-            return;
+    form;
+    /**
+     * @description
+     * Triggers a warning in dev mode that this input should not be used with reactive forms.
+     */
+    set isDisabled(isDisabled) {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            console.warn(disabledAttrWarning);
         }
-        this._queuedWrite = true;
-        afterNextRender({
-            write: () => {
-                if (this.destroyRef.destroyed) {
-                    return;
-                }
-                this._queuedWrite = false;
-                this.writeValue(this.value);
-            },
-        }, { injector: this.appRefInjector });
     }
+    // TODO(kara): remove next 4 properties once deprecation period is over
+    /** @deprecated as of v6 */
+    model;
+    /** @deprecated as of v6 */
+    update = new EventEmitter();
     /**
-     * Sets the "value" property on the select element.
-     * @docs-private
+     * @description
+     * Static property used to track whether any ngModel warnings have been sent across
+     * all instances of FormControlDirective. Used to support warning config of "once".
+     *
+     * @internal
      */
-    writeValue(value) {
-        // TODO(atscott): This could likely be optimized more by only marking for check if the value is changed
-        // note that this needs to include both the internal value and the value in the DOM.
-        this.cdr.markForCheck();
-        this.value = value;
-        const id = this._getOptionId(value);
-        const valueString = _buildValueString$1(id, value);
-        this.setProperty('value', valueString);
-    }
+    static _ngModelWarningSentOnce = false;
     /**
-     * Registers a function called when the control value changes.
-     * @docs-private
+     * @description
+     * Instance property used to track whether an ngModel warning has been sent out for this
+     * particular `FormControlDirective` instance. Used to support warning config of "always".
+     *
+     * @internal
      */
-    registerOnChange(fn) {
-        this.onChange = (valueString) => {
-            this.value = this._getOptionValue(valueString);
-            fn(this.value);
-        };
-    }
-    /** @internal */
-    _registerOption() {
-        return (this._idCounter++).toString();
+    _ngModelWarningSent = false;
+    constructor(validators, asyncValidators, valueAccessors, _ngModelWarningConfig, callSetDisabledState) {
+        super();
+        this._ngModelWarningConfig = _ngModelWarningConfig;
+        this.callSetDisabledState = callSetDisabledState;
+        this._setValidators(validators);
+        this._setAsyncValidators(asyncValidators);
+        this.valueAccessor = selectValueAccessor(this, valueAccessors);
     }
-    /** @internal */
-    _getOptionId(value) {
-        for (const id of this._optionMap.keys()) {
-            if (this._compareWith(this._optionMap.get(id), value))
-                return id;
+    /** @docs-private */
+    ngOnChanges(changes) {
+        if (this._isControlChanged(changes)) {
+            const previousForm = changes['form'].previousValue;
+            if (previousForm) {
+                cleanUpControl(previousForm, this, /* validateControlPresenceOnChange */ false);
+            }
+            setUpControl(this.form, this, this.callSetDisabledState);
+            this.form.updateValueAndValidity({ emitEvent: false });
+        }
+        if (isPropertyUpdated(changes, this.viewModel)) {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                _ngModelWarning('formControl', FormControlDirective, this, this._ngModelWarningConfig);
+            }
+            this.form.setValue(this.model);
+            this.viewModel = this.model;
         }
-        return null;
     }
-    /** @internal */
-    _getOptionValue(valueString) {
-        const id = _extractId$1(valueString);
-        return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
+    /** @docs-private */
+    ngOnDestroy() {
+        if (this.form) {
+            cleanUpControl(this.form, this, /* validateControlPresenceOnChange */ false);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: SelectControlValueAccessor, isStandalone: false, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: { compareWith: "compareWith" }, host: { listeners: { "change": "onChange($any($event.target).value)", "blur": "onTouched()" } }, providers: [SELECT_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectControlValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
-                    host: { '(change)': 'onChange($any($event.target).value)', '(blur)': 'onTouched()' },
-                    providers: [SELECT_VALUE_ACCESSOR],
-                    standalone: false,
-                }]
-        }], propDecorators: { compareWith: [{
-                type: Input
-            }] } });
-/**
- * @description
- * Marks `<option>` as dynamic, so Angular can be notified when options change.
- *
- * @see {@link SelectControlValueAccessor}
- *
- * @ngModule ReactiveFormsModule
- * @ngModule FormsModule
- * @publicApi
- */
-class NgSelectOption {
-    _element;
-    _renderer;
-    _select;
     /**
      * @description
-     * ID of the option element
+     * Returns an array that represents the path from the top-level form to this control.
+     * Each index is the string name of the control on that level.
      */
-    id;
-    constructor(_element, _renderer, _select) {
-        this._element = _element;
-        this._renderer = _renderer;
-        this._select = _select;
-        if (this._select)
-            this.id = this._select._registerOption();
+    get path() {
+        return [];
     }
     /**
      * @description
-     * Tracks the value bound to the option element. Unlike the value binding,
-     * ngValue supports binding to objects.
+     * The `FormControl` bound to this directive.
      */
-    set ngValue(value) {
-        if (this._select == null)
-            return;
-        this._select._optionMap.set(this.id, value);
-        this._setElementValue(_buildValueString$1(this.id, value));
-        this._select._writeValueAfterRender();
+    get control() {
+        return this.form;
     }
     /**
      * @description
-     * Tracks simple string values bound to the option element.
-     * For objects, use the `ngValue` input binding.
+     * Sets the new value for the view model and emits an `ngModelChange` event.
+     *
+     * @param newValue The new value for the view model.
      */
-    set value(value) {
-        this._setElementValue(value);
-        if (this._select)
-            this._select._writeValueAfterRender();
-    }
-    /** @internal */
-    _setElementValue(value) {
-        this._renderer.setProperty(this._element.nativeElement, 'value', value);
+    viewToModelUpdate(newValue) {
+        this.viewModel = newValue;
+        this.update.emit(newValue);
     }
-    /** @docs-private */
-    ngOnDestroy() {
-        if (this._select) {
-            this._select._optionMap.delete(this.id);
-            this._select._writeValueAfterRender();
-        }
+    _isControlChanged(changes) {
+        return changes.hasOwnProperty('form');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgSelectOption, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SelectControlValueAccessor, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: NgSelectOption, isStandalone: false, selector: "option", inputs: { ngValue: "ngValue", value: "value" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlDirective, deps: [{ token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: NG_VALUE_ACCESSOR, optional: true, self: true }, { token: NG_MODEL_WITH_FORM_CONTROL_WARNING, optional: true }, { token: CALL_SET_DISABLED_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormControlDirective, isStandalone: false, selector: "[formControl]", inputs: { form: ["formControl", "form"], isDisabled: ["disabled", "isDisabled"], model: ["ngModel", "model"] }, outputs: { update: "ngModelChange" }, providers: [formControlBinding], exportAs: ["ngForm"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'option',
+                    selector: '[formControl]',
+                    providers: [formControlBinding],
+                    exportAs: 'ngForm',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SelectControlValueAccessor, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
-                    type: Host
-                }] }], propDecorators: { ngValue: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALIDATORS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_ASYNC_VALIDATORS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALUE_ACCESSOR]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NG_MODEL_WITH_FORM_CONTROL_WARNING]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALL_SET_DISABLED_STATE]
+                }] }], propDecorators: { form: [{
                 type: Input,
-                args: ['ngValue']
-            }], value: [{
+                args: ['formControl']
+            }], isDisabled: [{
                 type: Input,
-                args: ['value']
+                args: ['disabled']
+            }], model: [{
+                type: Input,
+                args: ['ngModel']
+            }], update: [{
+                type: Output,
+                args: ['ngModelChange']
             }] } });
 
-const SELECT_MULTIPLE_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SelectMultipleControlValueAccessor),
-    multi: true,
+const formGroupNameProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(() => FormGroupName),
 };
-function _buildValueString(id, value) {
-    if (id == null)
-        return `${value}`;
-    if (typeof value === 'string')
-        value = `'${value}'`;
-    if (value && typeof value === 'object')
-        value = 'Object';
-    return `${id}: ${value}`.slice(0, 50);
-}
-function _extractId(valueString) {
-    return valueString.split(':')[0];
-}
 /**
  * @description
- * The `ControlValueAccessor` for writing multi-select control values and listening to multi-select
- * control changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
- * `NgModel` directives.
  *
- * @see {@link SelectControlValueAccessor}
+ * Syncs a nested `FormGroup` or `FormRecord` to a DOM element.
+ *
+ * This directive can only be used with a parent `FormGroupDirective`.
+ *
+ * It accepts the string name of the nested `FormGroup` or `FormRecord` to link, and
+ * looks for a `FormGroup` or `FormRecord` registered with that name in the parent
+ * `FormGroup` instance you passed into `FormGroupDirective`.
+ *
+ * Use nested form groups to validate a sub-group of a
+ * form separately from the rest or to group the values of certain
+ * controls into their own nested object.
+ *
+ * @see [Reactive Forms Guide](guide/forms/reactive-forms)
  *
  * @usageNotes
  *
- * ### Using a multi-select control
+ * ### Access the group by name
  *
- * The follow example shows you how to use a multi-select control with a reactive form.
+ * The following example uses the `AbstractControl.get` method to access the
+ * associated `FormGroup`
  *
  * ```ts
- * const countryControl = new FormControl();
+ *   this.form.get('name');
  * ```
  *
- * ```html
- * <select multiple name="countries" [formControl]="countryControl">
- *   @for(country of countries; track $index) {
- *      <option [ngValue]="country">{{ country.name }}</option>
- *   }
- * </select>
+ * ### Access individual controls in the group
+ *
+ * The following example uses the `AbstractControl.get` method to access
+ * individual controls within the group using dot syntax.
+ *
+ * ```ts
+ *   this.form.get('name.first');
  * ```
  *
- * ### Customizing option selection
+ * ### Register a nested `FormGroup`.
  *
- * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
- * See the `SelectControlValueAccessor` for usage.
+ * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`,
+ * and provides methods to retrieve the nested `FormGroup` and individual controls.
+ *
+ * {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
  *
  * @ngModule ReactiveFormsModule
- * @ngModule FormsModule
  * @publicApi
  */
-class SelectMultipleControlValueAccessor extends BuiltInControlValueAccessor {
-    /**
-     * The current value.
-     * @docs-private
-     */
-    value;
-    /** @internal */
-    _optionMap = new Map();
-    /** @internal */
-    _idCounter = 0;
+class FormGroupName extends AbstractFormGroupDirective {
     /**
      * @description
-     * Tracks the option comparison algorithm for tracking identities when
-     * checking for changes.
-     */
-    set compareWith(fn) {
-        if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-            throw new _RuntimeError(1201 /* RuntimeErrorCode.COMPAREWITH_NOT_A_FN */, `compareWith must be a function, but received ${JSON.stringify(fn)}`);
-        }
-        this._compareWith = fn;
-    }
-    _compareWith = Object.is;
-    /**
-     * Sets the "value" property on one or of more of the select's options.
-     * @docs-private
-     */
-    writeValue(value) {
-        this.value = value;
-        let optionSelectedStateSetter;
-        if (Array.isArray(value)) {
-            // convert values to ids
-            const ids = value.map((v) => this._getOptionId(v));
-            optionSelectedStateSetter = (opt, o) => {
-                opt._setSelected(ids.indexOf(o.toString()) > -1);
-            };
-        }
-        else {
-            optionSelectedStateSetter = (opt, o) => {
-                opt._setSelected(false);
-            };
-        }
-        this._optionMap.forEach(optionSelectedStateSetter);
-    }
-    /**
-     * Registers a function called when the control value changes
-     * and writes an array of the selected options.
-     * @docs-private
+     * Tracks the name of the `FormGroup` bound to the directive. The name corresponds
+     * to a key in the parent `FormGroup` or `FormArray`.
+     * Accepts a name as a string or a number.
+     * The name in the form of a string is useful for individual forms,
+     * while the numerical form allows for form groups to be bound
+     * to indices when iterating over groups in a `FormArray`.
      */
-    registerOnChange(fn) {
-        this.onChange = (element) => {
-            const selected = [];
-            const selectedOptions = element.selectedOptions;
-            if (selectedOptions !== undefined) {
-                const options = selectedOptions;
-                for (let i = 0; i < options.length; i++) {
-                    const opt = options[i];
-                    const val = this._getOptionValue(opt.value);
-                    selected.push(val);
-                }
-            }
-            // Degrade to use `options` when `selectedOptions` property is not available.
-            // Note: the `selectedOptions` is available in all supported browsers, but the Domino lib
-            // doesn't have it currently, see https://github.com/fgnass/domino/issues/177.
-            else {
-                const options = element.options;
-                for (let i = 0; i < options.length; i++) {
-                    const opt = options[i];
-                    if (opt.selected) {
-                        const val = this._getOptionValue(opt.value);
-                        selected.push(val);
-                    }
-                }
-            }
-            this.value = selected;
-            fn(selected);
-        };
-    }
-    /** @internal */
-    _registerOption(value) {
-        const id = (this._idCounter++).toString();
-        this._optionMap.set(id, value);
-        return id;
+    name = null;
+    constructor(parent, validators, asyncValidators) {
+        super();
+        this._parent = parent;
+        this._setValidators(validators);
+        this._setAsyncValidators(asyncValidators);
     }
     /** @internal */
-    _getOptionId(value) {
-        for (const id of this._optionMap.keys()) {
-            if (this._compareWith(this._optionMap.get(id)._value, value))
-                return id;
+    _checkParentType() {
+        if (hasInvalidParent(this._parent) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw groupParentException();
         }
-        return null;
     }
-    /** @internal */
-    _getOptionValue(valueString) {
-        const id = _extractId(valueString);
-        return this._optionMap.has(id) ? this._optionMap.get(id)._value : valueString;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectMultipleControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: SelectMultipleControlValueAccessor, isStandalone: false, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: { compareWith: "compareWith" }, host: { listeners: { "change": "onChange($event.target)", "blur": "onTouched()" } }, providers: [SELECT_MULTIPLE_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupName, deps: [{ token: ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormGroupName, isStandalone: false, selector: "[formGroupName]", inputs: { name: ["formGroupName", "name"] }, providers: [formGroupNameProvider], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectMultipleControlValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupName, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
-                    host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' },
-                    providers: [SELECT_MULTIPLE_VALUE_ACCESSOR],
+                    selector: '[formGroupName]',
+                    providers: [formGroupNameProvider],
                     standalone: false,
                 }]
-        }], propDecorators: { compareWith: [{
-                type: Input
+        }], ctorParameters: () => [{ type: ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALIDATORS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_ASYNC_VALIDATORS]
+                }] }], propDecorators: { name: [{
+                type: Input,
+                args: ['formGroupName']
             }] } });
+const formArrayNameProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(() => FormArrayName),
+};
 /**
  * @description
- * Marks `<option>` as dynamic, so Angular can be notified when options change.
  *
- * @see {@link SelectMultipleControlValueAccessor}
+ * Syncs a nested `FormArray` to a DOM element.
+ *
+ * This directive is designed to be used with a parent `FormGroupDirective`/`FormGroupArray` (selector:
+ * `[formGroup]`/`[formArray]`).
+ *
+ * It accepts the string name of the nested `FormArray` you want to link, and
+ * will look for a `FormArray` registered with that name in the parent
+ * `FormGroup`/`FormArray` instance you passed into `FormGroupDirective`/`FormGroupArray`.
+ *
+ * @see [Reactive Forms Guide](guide/forms/reactive-forms)
+ * @see {@link AbstractControl}
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
  *
  * @ngModule ReactiveFormsModule
- * @ngModule FormsModule
  * @publicApi
  */
-class ɵNgSelectMultipleOption {
-    _element;
-    _renderer;
-    _select;
-    id;
+class FormArrayName extends ControlContainer {
     /** @internal */
-    _value;
-    constructor(_element, _renderer, _select) {
-        this._element = _element;
-        this._renderer = _renderer;
-        this._select = _select;
-        if (this._select) {
-            this.id = this._select._registerOption(this);
-        }
-    }
+    _parent;
     /**
      * @description
-     * Tracks the value bound to the option element. Unlike the value binding,
-     * ngValue supports binding to objects.
+     * Tracks the name of the `FormArray` bound to the directive. The name corresponds
+     * to a key in the parent `FormGroup` or `FormArray`.
+     * Accepts a name as a string or a number.
+     * The name in the form of a string is useful for individual forms,
+     * while the numerical form allows for form arrays to be bound
+     * to indices when iterating over arrays in a `FormArray`.
      */
-    set ngValue(value) {
-        if (this._select == null)
-            return;
-        this._value = value;
-        this._setElementValue(_buildValueString(this.id, value));
-        this._select.writeValue(this._select.value);
+    name = null;
+    constructor(parent, validators, asyncValidators) {
+        super();
+        this._parent = parent;
+        this._setValidators(validators);
+        this._setAsyncValidators(asyncValidators);
     }
     /**
-     * @description
-     * Tracks simple string values bound to the option element.
-     * For objects, use the `ngValue` input binding.
+     * A lifecycle method called when the directive's inputs are initialized. For internal use only.
+     * @throws If the directive does not have a valid parent.
+     * @docs-private
      */
-    set value(value) {
-        if (this._select) {
-            this._value = value;
-            this._setElementValue(_buildValueString(this.id, value));
-            this._select.writeValue(this._select.value);
-        }
-        else {
-            this._setElementValue(value);
+    ngOnInit() {
+        if (hasInvalidParent(this._parent) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw arrayParentException();
         }
+        this.formDirective.addFormArray(this);
     }
-    /** @internal */
-    _setElementValue(value) {
-        this._renderer.setProperty(this._element.nativeElement, 'value', value);
+    /**
+     * A lifecycle method called before the directive's instance is destroyed. For internal use only.
+     * @docs-private
+     */
+    ngOnDestroy() {
+        this.formDirective?.removeFormArray(this);
     }
-    /** @internal */
-    _setSelected(selected) {
-        this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
+    /**
+     * @description
+     * The `FormArray` bound to this directive.
+     */
+    get control() {
+        return this.formDirective.getFormArray(this);
     }
-    /** @docs-private */
-    ngOnDestroy() {
-        if (this._select) {
-            this._select._optionMap.delete(this.id);
-            this._select.writeValue(this._select.value);
-        }
+    /**
+     * @description
+     * The top-level directive for this group if present, otherwise null.
+     */
+    get formDirective() {
+        return this._parent ? this._parent.formDirective : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵNgSelectMultipleOption, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SelectMultipleControlValueAccessor, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: ɵNgSelectMultipleOption, isStandalone: false, selector: "option", inputs: { ngValue: "ngValue", value: "value" }, ngImport: i0 });
+    /**
+     * @description
+     * Returns an array that represents the path from the top-level form to this control.
+     * Each index is the string name of the control on that level.
+     */
+    get path() {
+        return controlPath(this.name == null ? this.name : this.name.toString(), this._parent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormArrayName, deps: [{ token: ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormArrayName, isStandalone: false, selector: "[formArrayName]", inputs: { name: ["formArrayName", "name"] }, providers: [formArrayNameProvider], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵNgSelectMultipleOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormArrayName, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'option',
+                    selector: '[formArrayName]',
+                    providers: [formArrayNameProvider],
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SelectMultipleControlValueAccessor, decorators: [{
+        }], ctorParameters: () => [{ type: ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Host
-                }] }], propDecorators: { ngValue: [{
-                type: Input,
-                args: ['ngValue']
-            }], value: [{
+                }, {
+                    type: SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALIDATORS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_ASYNC_VALIDATORS]
+                }] }], propDecorators: { name: [{
                 type: Input,
-                args: ['value']
+                args: ['formArrayName']
             }] } });
+function hasInvalidParent(parent) {
+    return (!(parent instanceof FormGroupName) &&
+        !(parent instanceof AbstractFormDirective) &&
+        !(parent instanceof FormArrayName));
+}
 
+const controlNameBinding = {
+    provide: NgControl,
+    useExisting: forwardRef(() => FormControlName),
+};
 /**
- * Method that updates string to integer if not already a number
+ * @description
+ * Syncs a `FormControl` in an existing `FormGroup` to a form control
+ * element by name.
  *
- * @param value The value to convert to integer.
- * @returns value of parameter converted to number or integer.
- */
-function toInteger(value) {
-    return typeof value === 'number' ? value : parseInt(value, 10);
-}
-/**
- * Method that ensures that provided value is a float (and converts it to float if needed).
+ * @see [Reactive Forms Guide](guide/forms/reactive-forms)
+ * @see {@link FormControl}
+ * @see {@link AbstractControl}
  *
- * @param value The value to convert to float.
- * @returns value of parameter converted to number or float.
- */
-function toFloat(value) {
-    return typeof value === 'number' ? value : parseFloat(value);
-}
-/**
- * A base class for Validator-based Directives. The class contains common logic shared across such
- * Directives.
+ * @usageNotes
  *
- * For internal use only, this class is not intended for use outside of the Forms package.
+ * ### Register `FormControl` within a group
+ *
+ * The following example shows how to register multiple form controls within a form group
+ * and set their value.
+ *
+ * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
+ *
+ * To see `formControlName` examples with different form control types, see:
+ *
+ * * Radio buttons: `RadioControlValueAccessor`
+ * * Selects: `SelectControlValueAccessor`
+ *
+ * ### Use with ngModel is deprecated
+ *
+ * Support for using the `ngModel` input property and `ngModelChange` event with reactive
+ * form directives has been deprecated in Angular v6 and is scheduled for removal in
+ * a future version of Angular.
+ *
+ * @ngModule ReactiveFormsModule
+ * @publicApi
  */
-class AbstractValidatorDirective {
-    _validator = nullValidator;
-    _onChange;
+class FormControlName extends NgControl {
+    _ngModelWarningConfig;
+    _added = false;
     /**
-     * A flag that tracks whether this validator is enabled.
+     * Internal reference to the view model value.
+     * @internal
+     */
+    viewModel;
+    /**
+     * @description
+     * Tracks the `FormControl` instance bound to the directive.
+     */
+    control;
+    /**
+     * @description
+     * Tracks the name of the `FormControl` bound to the directive. The name corresponds
+     * to a key in the parent `FormGroup` or `FormArray`.
+     * Accepts a name as a string or a number.
+     * The name in the form of a string is useful for individual forms,
+     * while the numerical form allows for form controls to be bound
+     * to indices when iterating over controls in a `FormArray`.
+     */
+    name = null;
+    /**
+     * @description
+     * Triggers a warning in dev mode that this input should not be used with reactive forms.
+     */
+    set isDisabled(isDisabled) {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            console.warn(disabledAttrWarning);
+        }
+    }
+    // TODO(kara): remove next 4 properties once deprecation period is over
+    /** @deprecated as of v6 */
+    model;
+    /** @deprecated as of v6 */
+    update = new EventEmitter();
+    /**
+     * @description
+     * Static property used to track whether any ngModel warnings have been sent across
+     * all instances of FormControlName. Used to support warning config of "once".
      *
-     * Marking it `internal` (vs `protected`), so that this flag can be used in host bindings of
-     * directive classes that extend this base class.
      * @internal
      */
-    _enabled;
+    static _ngModelWarningSentOnce = false;
+    /**
+     * @description
+     * Instance property used to track whether an ngModel warning has been sent out for this
+     * particular FormControlName instance. Used to support warning config of "always".
+     *
+     * @internal
+     */
+    _ngModelWarningSent = false;
+    constructor(parent, validators, asyncValidators, valueAccessors, _ngModelWarningConfig) {
+        super();
+        this._ngModelWarningConfig = _ngModelWarningConfig;
+        this._parent = parent;
+        this._setValidators(validators);
+        this._setAsyncValidators(asyncValidators);
+        this.valueAccessor = selectValueAccessor(this, valueAccessors);
+    }
     /** @docs-private */
     ngOnChanges(changes) {
-        if (this.inputName in changes) {
-            const input = this.normalizeInput(changes[this.inputName].currentValue);
-            this._enabled = this.enabled(input);
-            this._validator = this._enabled ? this.createValidator(input) : nullValidator;
-            if (this._onChange) {
-                this._onChange();
+        if (!this._added)
+            this._setUpControl();
+        if (isPropertyUpdated(changes, this.viewModel)) {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                _ngModelWarning('formControlName', FormControlName, this, this._ngModelWarningConfig);
             }
+            this.viewModel = this.model;
+            this.formDirective.updateModel(this, this.model);
         }
     }
     /** @docs-private */
-    validate(control) {
-        return this._validator(control);
-    }
-    /** @docs-private */
-    registerOnValidatorChange(fn) {
-        this._onChange = fn;
+    ngOnDestroy() {
+        if (this.formDirective) {
+            this.formDirective.removeControl(this);
+        }
     }
     /**
      * @description
-     * Determines whether this validator should be active or not based on an input.
-     * Base class implementation checks whether an input is defined (if the value is different from
-     * `null` and `undefined`). Validator classes that extend this base class can override this
-     * function with the logic specific to a particular validator directive.
+     * Sets the new value for the view model and emits an `ngModelChange` event.
+     *
+     * @param newValue The new value for the view model.
      */
-    enabled(input) {
-        return input != null /* both `null` and `undefined` */;
+    viewToModelUpdate(newValue) {
+        this.viewModel = newValue;
+        this.update.emit(newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AbstractValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: AbstractValidatorDirective, isStandalone: true, usesOnChanges: true, ngImport: i0 });
+    /**
+     * @description
+     * Returns an array that represents the path from the top-level form to this control.
+     * Each index is the string name of the control on that level.
+     */
+    get path() {
+        return controlPath(this.name == null ? this.name : this.name.toString(), this._parent);
+    }
+    /**
+     * @description
+     * The top-level directive for this group if present, otherwise null.
+     */
+    get formDirective() {
+        return this._parent ? this._parent.formDirective : null;
+    }
+    _setUpControl() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            checkParentType(this._parent, this.name);
+        }
+        this.control = this.formDirective.addControl(this);
+        this._added = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlName, deps: [{ token: ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: NG_VALUE_ACCESSOR, optional: true, self: true }, { token: NG_MODEL_WITH_FORM_CONTROL_WARNING, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormControlName, isStandalone: false, selector: "[formControlName]", inputs: { name: ["formControlName", "name"], isDisabled: ["disabled", "isDisabled"], model: ["ngModel", "model"] }, outputs: { update: "ngModelChange" }, providers: [controlNameBinding], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AbstractValidatorDirective, decorators: [{
-            type: Directive
-        }] });
-/**
- * @description
- * Provider which adds `MaxValidator` to the `NG_VALIDATORS` multi-provider list.
- */
-const MAX_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MaxValidator),
-    multi: true,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormControlName, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[formControlName]',
+                    providers: [controlNameBinding],
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALIDATORS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_ASYNC_VALIDATORS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALUE_ACCESSOR]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NG_MODEL_WITH_FORM_CONTROL_WARNING]
+                }] }], propDecorators: { name: [{
+                type: Input,
+                args: ['formControlName']
+            }], isDisabled: [{
+                type: Input,
+                args: ['disabled']
+            }], model: [{
+                type: Input,
+                args: ['ngModel']
+            }], update: [{
+                type: Output,
+                args: ['ngModelChange']
+            }] } });
+function checkParentType(parent, name) {
+    if (!(parent instanceof FormGroupName) && parent instanceof AbstractFormGroupDirective) {
+        throw ngModelGroupException();
+    }
+    else if (!(parent instanceof FormGroupName) &&
+        !(parent instanceof AbstractFormDirective) &&
+        !(parent instanceof FormArrayName)) {
+        throw controlParentException(name);
+    }
+}
+
+const formDirectiveProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(() => FormGroupDirective),
 };
 /**
- * A directive which installs the {@link MaxValidator} for any `formControlName`,
- * `formControl`, or control with `ngModel` that also has a `max` attribute.
+ * @description
  *
- * @see [Form Validation](guide/forms/form-validation)
+ * Binds an existing `FormGroup` or `FormRecord` to a DOM element.
  *
- * @usageNotes
+ * This directive accepts an existing `FormGroup` instance. It will then use this
+ * `FormGroup` instance to match any child `FormControl`, `FormGroup`/`FormRecord`,
+ * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
+ * and `FormArrayName` directives.
  *
- * ### Adding a max validator
+ * @see [Reactive Forms Guide](guide/forms/reactive-forms)
+ * @see {@link AbstractControl}
  *
- * The following example shows how to add a max validator to an input attached to an
- * ngModel binding.
+ * @usageNotes
+ * ### Register Form Group
  *
- * ```html
- * <input type="number" ngModel max="4">
- * ```
+ * The following example registers a `FormGroup` with first name and last name controls,
+ * and listens for the *ngSubmit* event when the button is clicked.
+ *
+ * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
  *
  * @ngModule ReactiveFormsModule
- * @ngModule FormsModule
  * @publicApi
  */
-class MaxValidator extends AbstractValidatorDirective {
+class FormGroupDirective extends AbstractFormDirective {
     /**
      * @description
-     * Tracks changes to the max bound to this directive.
+     * Tracks the `FormGroup` bound to this directive.
      */
-    max;
-    /** @internal */
-    inputName = 'max';
-    /** @internal */
-    normalizeInput = (input) => toFloat(input);
-    /** @internal */
-    createValidator = (max) => maxValidator(max);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MaxValidator, isStandalone: false, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: { max: "max" }, host: { properties: { "attr.max": "_enabled ? max : null" } }, providers: [MAX_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    form = null;
+    /**
+     * @description
+     * Emits an event when the form submission has been triggered.
+     */
+    ngSubmit = new EventEmitter();
+    /**
+     * @description
+     * Returns the `FormGroup` bound to this directive.
+     */
+    get control() {
+        return this.form;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: FormGroupDirective, isStandalone: false, selector: "[formGroup]", inputs: { form: ["formGroup", "form"] }, outputs: { ngSubmit: "ngSubmit" }, host: { listeners: { "submit": "onSubmit($event)", "reset": "onReset()" } }, providers: [formDirectiveProvider], exportAs: ["ngForm"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FormGroupDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]',
-                    providers: [MAX_VALIDATOR],
-                    host: { '[attr.max]': '_enabled ? max : null' },
+                    selector: '[formGroup]',
+                    providers: [formDirectiveProvider],
+                    host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
+                    exportAs: 'ngForm',
                     standalone: false,
                 }]
-        }], propDecorators: { max: [{
-                type: Input
+        }], propDecorators: { form: [{
+                type: Input,
+                args: ['formGroup']
+            }], ngSubmit: [{
+                type: Output
             }] } });
-/**
- * @description
- * Provider which adds `MinValidator` to the `NG_VALIDATORS` multi-provider list.
- */
-const MIN_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MinValidator),
+
+const SELECT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectControlValueAccessor),
     multi: true,
 };
+function _buildValueString$1(id, value) {
+    if (id == null)
+        return `${value}`;
+    if (value && typeof value === 'object')
+        value = 'Object';
+    return `${id}: ${value}`.slice(0, 50);
+}
+function _extractId$1(valueString) {
+    return valueString.split(':')[0];
+}
 /**
- * A directive which installs the {@link MinValidator} for any `formControlName`,
- * `formControl`, or control with `ngModel` that also has a `min` attribute.
- *
- * @see [Form Validation](guide/forms/form-validation)
+ * @description
+ * The `ControlValueAccessor` for writing select control values and listening to select control
+ * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
+ * `NgModel` directives.
  *
  * @usageNotes
  *
- * ### Adding a min validator
+ * ### Using select controls in a reactive form
  *
- * The following example shows how to add a min validator to an input attached to an
- * ngModel binding.
+ * The following examples show how to use a select control in a reactive form.
+ *
+ * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
+ *
+ * ### Using select controls in a template-driven form
+ *
+ * To use a select in a template-driven form, simply add an `ngModel` and a `name`
+ * attribute to the main `<select>` tag.
+ *
+ * {@example forms/ts/selectControl/select_control_example.ts region='Component'}
+ *
+ * ### Customizing option selection
+ *
+ * Angular uses object identity to select option. It's possible for the identities of items
+ * to change while the data does not. This can happen, for example, if the items are produced
+ * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
+ * second response will produce objects with different identities.
+ *
+ * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
+ * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
+ * If `compareWith` is given, Angular selects option by the return value of the function.
+ *
+ * ```ts
+ * const selectedCountriesControl = new FormControl();
+ * ```
  *
  * ```html
- * <input type="number" ngModel min="4">
+ * <select [compareWith]="compareFn"  [formControl]="selectedCountriesControl">
+ *    @for(country of countries; track $index) {
+ *        <option[ngValue]="country">{{country.name}}</option>
+ *    }
+ * </select>
+ *
+ * compareFn(c1: Country, c2: Country): boolean {
+ *     return c1 && c2 ? c1.id === c2.id : c1 === c2;
+ * }
  * ```
  *
+ * **Note:** We listen to the 'change' event because 'input' events aren't fired
+ * for selects in IE, see:
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility
+ *
  * @ngModule ReactiveFormsModule
  * @ngModule FormsModule
  * @publicApi
  */
-class MinValidator extends AbstractValidatorDirective {
+class SelectControlValueAccessor extends BuiltInControlValueAccessor {
+    /** @docs-private */
+    value;
+    /** @internal */
+    _optionMap = new Map();
+    /** @internal */
+    _idCounter = 0;
     /**
      * @description
-     * Tracks changes to the min bound to this directive.
+     * Tracks the option comparison algorithm for tracking identities when
+     * checking for changes.
      */
-    min;
+    set compareWith(fn) {
+        if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw new _RuntimeError(1201 /* RuntimeErrorCode.COMPAREWITH_NOT_A_FN */, `compareWith must be a function, but received ${JSON.stringify(fn)}`);
+        }
+        this._compareWith = fn;
+    }
+    _compareWith = Object.is;
+    // We need this because we might be in the process of destroying the root
+    // injector, which is marked as destroyed before running destroy hooks.
+    // Attempting to use afterNextRender with the node injector would evntually
+    // run into that already destroyed injector.
+    appRefInjector = inject(ApplicationRef).injector;
+    destroyRef = inject(DestroyRef);
+    cdr = inject(ChangeDetectorRef);
+    _queuedWrite = false;
+    /**
+     * This is needed to efficiently set the select value when adding/removing options. If
+     * writeValue is instead called for every added/removed option, this results in exponentially
+     * more _compareValue calls than the number of option elements (issue #41330).
+     *
+     * Secondly, calling writeValue when rendering individual option elements instead of after they
+     * are all rendered caused an issue in Safari and IE 11 where the first option element failed
+     * to be deselected when no option matched the select ngModel. This was because Angular would
+     * set the select element's value property before appending the option's child text node to the
+     * DOM (issue #14505).
+     *
+     * Finally, this approach is necessary to avoid an issue with delayed element removal when
+     * using the animations module (in all browsers). Otherwise when a selected option is removed
+     * (so no option matches the ngModel anymore), Angular would change the select element value
+     * before actually removing the option from the DOM. Then when the option is finally removed
+     * from the DOM, the browser would change the select value to that of the first option, even
+     * though it doesn't match the ngModel (issue #18430).
+     *
+     * @internal
+     */
+    _writeValueAfterRender() {
+        if (this._queuedWrite || this.appRefInjector.destroyed) {
+            return;
+        }
+        this._queuedWrite = true;
+        afterNextRender({
+            write: () => {
+                if (this.destroyRef.destroyed) {
+                    return;
+                }
+                this._queuedWrite = false;
+                this.writeValue(this.value);
+            },
+        }, { injector: this.appRefInjector });
+    }
+    /**
+     * Sets the "value" property on the select element.
+     * @docs-private
+     */
+    writeValue(value) {
+        // TODO(atscott): This could likely be optimized more by only marking for check if the value is changed
+        // note that this needs to include both the internal value and the value in the DOM.
+        this.cdr.markForCheck();
+        this.value = value;
+        const id = this._getOptionId(value);
+        const valueString = _buildValueString$1(id, value);
+        this.setProperty('value', valueString);
+    }
+    /**
+     * Registers a function called when the control value changes.
+     * @docs-private
+     */
+    registerOnChange(fn) {
+        this.onChange = (valueString) => {
+            this.value = this._getOptionValue(valueString);
+            fn(this.value);
+        };
+    }
     /** @internal */
-    inputName = 'min';
+    _registerOption() {
+        return (this._idCounter++).toString();
+    }
     /** @internal */
-    normalizeInput = (input) => toFloat(input);
+    _getOptionId(value) {
+        for (const id of this._optionMap.keys()) {
+            if (this._compareWith(this._optionMap.get(id), value))
+                return id;
+        }
+        return null;
+    }
     /** @internal */
-    createValidator = (min) => minValidator(min);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MinValidator, isStandalone: false, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: { min: "min" }, host: { properties: { "attr.min": "_enabled ? min : null" } }, providers: [MIN_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    _getOptionValue(valueString) {
+        const id = _extractId$1(valueString);
+        return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: SelectControlValueAccessor, isStandalone: false, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: { compareWith: "compareWith" }, host: { listeners: { "change": "onChange($any($event.target).value)", "blur": "onTouched()" } }, providers: [SELECT_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectControlValueAccessor, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]',
-                    providers: [MIN_VALIDATOR],
-                    host: { '[attr.min]': '_enabled ? min : null' },
+                    selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
+                    host: { '(change)': 'onChange($any($event.target).value)', '(blur)': 'onTouched()' },
+                    providers: [SELECT_VALUE_ACCESSOR],
                     standalone: false,
                 }]
-        }], propDecorators: { min: [{
+        }], propDecorators: { compareWith: [{
                 type: Input
             }] } });
 /**
  * @description
- * Provider which adds `RequiredValidator` to the `NG_VALIDATORS` multi-provider list.
- */
-const REQUIRED_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => RequiredValidator),
-    multi: true,
-};
-/**
- * @description
- * Provider which adds `CheckboxRequiredValidator` to the `NG_VALIDATORS` multi-provider list.
- */
-const CHECKBOX_REQUIRED_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => CheckboxRequiredValidator),
-    multi: true,
-};
-/**
- * @description
- * A directive that adds the `required` validator to any controls marked with the
- * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
- *
- * @see [Form Validation](guide/forms/form-validation)
- *
- * @usageNotes
- *
- * ### Adding a required validator using template-driven forms
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
  *
- * ```html
- * <input name="fullName" ngModel required>
- * ```
+ * @see {@link SelectControlValueAccessor}
  *
- * @ngModule FormsModule
  * @ngModule ReactiveFormsModule
+ * @ngModule FormsModule
  * @publicApi
  */
-class RequiredValidator extends AbstractValidatorDirective {
+class NgSelectOption {
+    _element;
+    _renderer;
+    _select;
     /**
      * @description
-     * Tracks changes to the required attribute bound to this directive.
+     * ID of the option element
      */
-    required;
-    /** @internal */
-    inputName = 'required';
-    /** @internal */
-    normalizeInput = booleanAttribute;
+    id;
+    constructor(_element, _renderer, _select) {
+        this._element = _element;
+        this._renderer = _renderer;
+        this._select = _select;
+        if (this._select)
+            this.id = this._select._registerOption();
+    }
+    /**
+     * @description
+     * Tracks the value bound to the option element. Unlike the value binding,
+     * ngValue supports binding to objects.
+     */
+    set ngValue(value) {
+        if (this._select == null)
+            return;
+        this._select._optionMap.set(this.id, value);
+        this._setElementValue(_buildValueString$1(this.id, value));
+        this._select._writeValueAfterRender();
+    }
+    /**
+     * @description
+     * Tracks simple string values bound to the option element.
+     * For objects, use the `ngValue` input binding.
+     */
+    set value(value) {
+        this._setElementValue(value);
+        if (this._select)
+            this._select._writeValueAfterRender();
+    }
     /** @internal */
-    createValidator = (input) => requiredValidator;
+    _setElementValue(value) {
+        this._renderer.setProperty(this._element.nativeElement, 'value', value);
+    }
     /** @docs-private */
-    enabled(input) {
-        return input;
+    ngOnDestroy() {
+        if (this._select) {
+            this._select._optionMap.delete(this.id);
+            this._select._writeValueAfterRender();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: RequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: RequiredValidator, isStandalone: false, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: { required: "required" }, host: { properties: { "attr.required": "_enabled ? \"\" : null" } }, providers: [REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgSelectOption, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SelectControlValueAccessor, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: NgSelectOption, isStandalone: false, selector: "option", inputs: { ngValue: "ngValue", value: "value" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: RequiredValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: NgSelectOption, decorators: [{
             type: Directive,
             args: [{
-                    selector: ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]',
-                    providers: [REQUIRED_VALIDATOR],
-                    host: { '[attr.required]': '_enabled ? "" : null' },
+                    selector: 'option',
                     standalone: false,
                 }]
-        }], propDecorators: { required: [{
-                type: Input
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SelectControlValueAccessor, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }], propDecorators: { ngValue: [{
+                type: Input,
+                args: ['ngValue']
+            }], value: [{
+                type: Input,
+                args: ['value']
             }] } });
+
+const SELECT_MULTIPLE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectMultipleControlValueAccessor),
+    multi: true,
+};
+function _buildValueString(id, value) {
+    if (id == null)
+        return `${value}`;
+    if (typeof value === 'string')
+        value = `'${value}'`;
+    if (value && typeof value === 'object')
+        value = 'Object';
+    return `${id}: ${value}`.slice(0, 50);
+}
+function _extractId(valueString) {
+    return valueString.split(':')[0];
+}
 /**
- * A Directive that adds the `required` validator to checkbox controls marked with the
- * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ * @description
+ * The `ControlValueAccessor` for writing multi-select control values and listening to multi-select
+ * control changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
+ * `NgModel` directives.
  *
- * @see [Form Validation](guide/forms/form-validation)
+ * @see {@link SelectControlValueAccessor}
  *
  * @usageNotes
  *
- * ### Adding a required checkbox validator using template-driven forms
+ * ### Using a multi-select control
  *
- * The following example shows how to add a checkbox required validator to an input attached to an
- * ngModel binding.
+ * The follow example shows you how to use a multi-select control with a reactive form.
+ *
+ * ```ts
+ * const countryControl = new FormControl();
+ * ```
  *
  * ```html
- * <input type="checkbox" name="active" ngModel required>
+ * <select multiple name="countries" [formControl]="countryControl">
+ *   @for(country of countries; track $index) {
+ *      <option [ngValue]="country">{{ country.name }}</option>
+ *   }
+ * </select>
  * ```
  *
- * @publicApi
- * @ngModule FormsModule
- * @ngModule ReactiveFormsModule
- */
-class CheckboxRequiredValidator extends RequiredValidator {
-    /** @internal */
-    createValidator = (input) => requiredTrueValidator;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CheckboxRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CheckboxRequiredValidator, isStandalone: false, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]", host: { properties: { "attr.required": "_enabled ? \"\" : null" } }, providers: [CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CheckboxRequiredValidator, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]',
-                    providers: [CHECKBOX_REQUIRED_VALIDATOR],
-                    host: { '[attr.required]': '_enabled ? "" : null' },
-                    standalone: false,
-                }]
-        }] });
-/**
- * @description
- * Provider which adds `EmailValidator` to the `NG_VALIDATORS` multi-provider list.
- */
-const EMAIL_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => EmailValidator),
-    multi: true,
-};
-/**
- * A directive that adds the `email` validator to controls marked with the
- * `email` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
- *
- * The email validation is based on the WHATWG HTML specification with some enhancements to
- * incorporate more RFC rules. More information can be found on the [Validators.email
- * page](api/forms/Validators#email).
- *
- * @see [Form Validation](guide/forms/form-validation)
- *
- * @usageNotes
- *
- * ### Adding an email validator
- *
- * The following example shows how to add an email validator to an input attached to an ngModel
- * binding.
+ * ### Customizing option selection
  *
- * ```html
- * <input type="email" name="email" ngModel email>
- * <input type="email" name="email" ngModel email="true">
- * <input type="email" name="email" ngModel [email]="true">
- * ```
+ * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
+ * See the `SelectControlValueAccessor` for usage.
  *
- * @publicApi
- * @ngModule FormsModule
  * @ngModule ReactiveFormsModule
+ * @ngModule FormsModule
+ * @publicApi
  */
-class EmailValidator extends AbstractValidatorDirective {
+class SelectMultipleControlValueAccessor extends BuiltInControlValueAccessor {
+    /**
+     * The current value.
+     * @docs-private
+     */
+    value;
+    /** @internal */
+    _optionMap = new Map();
+    /** @internal */
+    _idCounter = 0;
     /**
      * @description
-     * Tracks changes to the email attribute bound to this directive.
+     * Tracks the option comparison algorithm for tracking identities when
+     * checking for changes.
      */
-    email;
+    set compareWith(fn) {
+        if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw new _RuntimeError(1201 /* RuntimeErrorCode.COMPAREWITH_NOT_A_FN */, `compareWith must be a function, but received ${JSON.stringify(fn)}`);
+        }
+        this._compareWith = fn;
+    }
+    _compareWith = Object.is;
+    /**
+     * Sets the "value" property on one or of more of the select's options.
+     * @docs-private
+     */
+    writeValue(value) {
+        this.value = value;
+        let optionSelectedStateSetter;
+        if (Array.isArray(value)) {
+            // convert values to ids
+            const ids = value.map((v) => this._getOptionId(v));
+            optionSelectedStateSetter = (opt, o) => {
+                opt._setSelected(ids.indexOf(o.toString()) > -1);
+            };
+        }
+        else {
+            optionSelectedStateSetter = (opt, o) => {
+                opt._setSelected(false);
+            };
+        }
+        this._optionMap.forEach(optionSelectedStateSetter);
+    }
+    /**
+     * Registers a function called when the control value changes
+     * and writes an array of the selected options.
+     * @docs-private
+     */
+    registerOnChange(fn) {
+        this.onChange = (element) => {
+            const selected = [];
+            const selectedOptions = element.selectedOptions;
+            if (selectedOptions !== undefined) {
+                const options = selectedOptions;
+                for (let i = 0; i < options.length; i++) {
+                    const opt = options[i];
+                    const val = this._getOptionValue(opt.value);
+                    selected.push(val);
+                }
+            }
+            // Degrade to use `options` when `selectedOptions` property is not available.
+            // Note: the `selectedOptions` is available in all supported browsers, but the Domino lib
+            // doesn't have it currently, see https://github.com/fgnass/domino/issues/177.
+            else {
+                const options = element.options;
+                for (let i = 0; i < options.length; i++) {
+                    const opt = options[i];
+                    if (opt.selected) {
+                        const val = this._getOptionValue(opt.value);
+                        selected.push(val);
+                    }
+                }
+            }
+            this.value = selected;
+            fn(selected);
+        };
+    }
     /** @internal */
-    inputName = 'email';
+    _registerOption(value) {
+        const id = (this._idCounter++).toString();
+        this._optionMap.set(id, value);
+        return id;
+    }
     /** @internal */
-    normalizeInput = booleanAttribute;
+    _getOptionId(value) {
+        for (const id of this._optionMap.keys()) {
+            if (this._compareWith(this._optionMap.get(id)._value, value))
+                return id;
+        }
+        return null;
+    }
     /** @internal */
-    createValidator = (input) => emailValidator;
-    /** @docs-private */
-    enabled(input) {
-        return input;
+    _getOptionValue(valueString) {
+        const id = _extractId(valueString);
+        return this._optionMap.has(id) ? this._optionMap.get(id)._value : valueString;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: EmailValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: EmailValidator, isStandalone: false, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: { email: "email" }, providers: [EMAIL_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectMultipleControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: SelectMultipleControlValueAccessor, isStandalone: false, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: { compareWith: "compareWith" }, host: { listeners: { "change": "onChange($event.target)", "blur": "onTouched()" } }, providers: [SELECT_MULTIPLE_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: EmailValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SelectMultipleControlValueAccessor, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[email][formControlName],[email][formControl],[email][ngModel]',
-                    providers: [EMAIL_VALIDATOR],
+                    selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
+                    host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' },
+                    providers: [SELECT_MULTIPLE_VALUE_ACCESSOR],
                     standalone: false,
                 }]
-        }], propDecorators: { email: [{
+        }], propDecorators: { compareWith: [{
                 type: Input
             }] } });
 /**
  * @description
- * Provider which adds `MinLengthValidator` to the `NG_VALIDATORS` multi-provider list.
- */
-const MIN_LENGTH_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MinLengthValidator),
-    multi: true,
-};
-/**
- * A directive that adds minimum length validation to controls marked with the
- * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
- *
- * @see [Form Validation](guide/forms/form-validation)
- *
- * @usageNotes
- *
- * ### Adding a minimum length validator
- *
- * The following example shows how to add a minimum length validator to an input attached to an
- * ngModel binding.
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
  *
- * ```html
- * <input name="firstName" ngModel minlength="4">
- * ```
+ * @see {@link SelectMultipleControlValueAccessor}
  *
  * @ngModule ReactiveFormsModule
  * @ngModule FormsModule
  * @publicApi
  */
-class MinLengthValidator extends AbstractValidatorDirective {
+class ɵNgSelectMultipleOption {
+    _element;
+    _renderer;
+    _select;
+    id;
+    /** @internal */
+    _value;
+    constructor(_element, _renderer, _select) {
+        this._element = _element;
+        this._renderer = _renderer;
+        this._select = _select;
+        if (this._select) {
+            this.id = this._select._registerOption(this);
+        }
+    }
     /**
      * @description
-     * Tracks changes to the minimum length bound to this directive.
+     * Tracks the value bound to the option element. Unlike the value binding,
+     * ngValue supports binding to objects.
      */
-    minlength;
-    /** @internal */
-    inputName = 'minlength';
+    set ngValue(value) {
+        if (this._select == null)
+            return;
+        this._value = value;
+        this._setElementValue(_buildValueString(this.id, value));
+        this._select.writeValue(this._select.value);
+    }
+    /**
+     * @description
+     * Tracks simple string values bound to the option element.
+     * For objects, use the `ngValue` input binding.
+     */
+    set value(value) {
+        if (this._select) {
+            this._value = value;
+            this._setElementValue(_buildValueString(this.id, value));
+            this._select.writeValue(this._select.value);
+        }
+        else {
+            this._setElementValue(value);
+        }
+    }
     /** @internal */
-    normalizeInput = (input) => toInteger(input);
+    _setElementValue(value) {
+        this._renderer.setProperty(this._element.nativeElement, 'value', value);
+    }
     /** @internal */
-    createValidator = (minlength) => minLengthValidator(minlength);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinLengthValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MinLengthValidator, isStandalone: false, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: { minlength: "minlength" }, host: { properties: { "attr.minlength": "_enabled ? minlength : null" } }, providers: [MIN_LENGTH_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    _setSelected(selected) {
+        this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
+    }
+    /** @docs-private */
+    ngOnDestroy() {
+        if (this._select) {
+            this._select._optionMap.delete(this.id);
+            this._select.writeValue(this._select.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵNgSelectMultipleOption, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SelectMultipleControlValueAccessor, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: ɵNgSelectMultipleOption, isStandalone: false, selector: "option", inputs: { ngValue: "ngValue", value: "value" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinLengthValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵNgSelectMultipleOption, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
-                    providers: [MIN_LENGTH_VALIDATOR],
-                    host: { '[attr.minlength]': '_enabled ? minlength : null' },
+                    selector: 'option',
                     standalone: false,
                 }]
-        }], propDecorators: { minlength: [{
-                type: Input
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SelectMultipleControlValueAccessor, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }], propDecorators: { ngValue: [{
+                type: Input,
+                args: ['ngValue']
+            }], value: [{
+                type: Input,
+                args: ['value']
             }] } });
+
+/**
+ * Method that updates string to integer if not already a number
+ *
+ * @param value The value to convert to integer.
+ * @returns value of parameter converted to number or integer.
+ */
+function toInteger(value) {
+    return typeof value === 'number' ? value : parseInt(value, 10);
+}
+/**
+ * Method that ensures that provided value is a float (and converts it to float if needed).
+ *
+ * @param value The value to convert to float.
+ * @returns value of parameter converted to number or float.
+ */
+function toFloat(value) {
+    return typeof value === 'number' ? value : parseFloat(value);
+}
+/**
+ * A base class for Validator-based Directives. The class contains common logic shared across such
+ * Directives.
+ *
+ * For internal use only, this class is not intended for use outside of the Forms package.
+ */
+class AbstractValidatorDirective {
+    _validator = nullValidator;
+    _onChange;
+    /**
+     * A flag that tracks whether this validator is enabled.
+     *
+     * Marking it `internal` (vs `protected`), so that this flag can be used in host bindings of
+     * directive classes that extend this base class.
+     * @internal
+     */
+    _enabled;
+    /** @docs-private */
+    ngOnChanges(changes) {
+        if (this.inputName in changes) {
+            const input = this.normalizeInput(changes[this.inputName].currentValue);
+            this._enabled = this.enabled(input);
+            this._validator = this._enabled ? this.createValidator(input) : nullValidator;
+            if (this._onChange) {
+                this._onChange();
+            }
+        }
+    }
+    /** @docs-private */
+    validate(control) {
+        return this._validator(control);
+    }
+    /** @docs-private */
+    registerOnValidatorChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * @description
+     * Determines whether this validator should be active or not based on an input.
+     * Base class implementation checks whether an input is defined (if the value is different from
+     * `null` and `undefined`). Validator classes that extend this base class can override this
+     * function with the logic specific to a particular validator directive.
+     */
+    enabled(input) {
+        return input != null /* both `null` and `undefined` */;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AbstractValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: AbstractValidatorDirective, isStandalone: true, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AbstractValidatorDirective, decorators: [{
+            type: Directive
+        }] });
 /**
  * @description
- * Provider which adds `MaxLengthValidator` to the `NG_VALIDATORS` multi-provider list.
+ * Provider which adds `MaxValidator` to the `NG_VALIDATORS` multi-provider list.
  */
-const MAX_LENGTH_VALIDATOR = {
+const MAX_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MaxLengthValidator),
+    useExisting: forwardRef(() => MaxValidator),
     multi: true,
 };
 /**
- * A directive that adds maximum length validation to controls marked with the
- * `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ * A directive which installs the {@link MaxValidator} for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `max` attribute.
  *
  * @see [Form Validation](guide/forms/form-validation)
  *
  * @usageNotes
  *
- * ### Adding a maximum length validator
+ * ### Adding a max validator
  *
- * The following example shows how to add a maximum length validator to an input attached to an
+ * The following example shows how to add a max validator to an input attached to an
  * ngModel binding.
  *
  * ```html
- * <input name="firstName" ngModel maxlength="25">
+ * <input type="number" ngModel max="4">
  * ```
  *
  * @ngModule ReactiveFormsModule
  * @ngModule FormsModule
  * @publicApi
  */
-class MaxLengthValidator extends AbstractValidatorDirective {
+class MaxValidator extends AbstractValidatorDirective {
     /**
      * @description
-     * Tracks changes to the maximum length bound to this directive.
+     * Tracks changes to the max bound to this directive.
      */
-    maxlength;
+    max;
     /** @internal */
-    inputName = 'maxlength';
+    inputName = 'max';
     /** @internal */
-    normalizeInput = (input) => toInteger(input);
+    normalizeInput = (input) => toFloat(input);
     /** @internal */
-    createValidator = (maxlength) => maxLengthValidator(maxlength);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxLengthValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MaxLengthValidator, isStandalone: false, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: { maxlength: "maxlength" }, host: { properties: { "attr.maxlength": "_enabled ? maxlength : null" } }, providers: [MAX_LENGTH_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    createValidator = (max) => maxValidator(max);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MaxValidator, isStandalone: false, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: { max: "max" }, host: { properties: { "attr.max": "_enabled ? max : null" } }, providers: [MAX_VALIDATOR], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxLengthValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxValidator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
-                    providers: [MAX_LENGTH_VALIDATOR],
-                    host: { '[attr.maxlength]': '_enabled ? maxlength : null' },
+                    selector: 'input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]',
+                    providers: [MAX_VALIDATOR],
+                    host: { '[attr.max]': '_enabled ? max : null' },
                     standalone: false,
                 }]
-        }], propDecorators: { maxlength: [{
+        }], propDecorators: { max: [{
                 type: Input
             }] } });
 /**
  * @description
- * Provider which adds `PatternValidator` to the `NG_VALIDATORS` multi-provider list.
+ * Provider which adds `MinValidator` to the `NG_VALIDATORS` multi-provider list.
  */
-const PATTERN_VALIDATOR = {
+const MIN_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => PatternValidator),
+    useExisting: forwardRef(() => MinValidator),
     multi: true,
 };
 /**
- * @description
- * A directive that adds regex pattern validation to controls marked with the
- * `pattern` attribute. The regex must match the entire control value.
- * The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ * A directive which installs the {@link MinValidator} for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `min` attribute.
  *
  * @see [Form Validation](guide/forms/form-validation)
  *
  * @usageNotes
  *
- * ### Adding a pattern validator
+ * ### Adding a min validator
  *
- * The following example shows how to add a pattern validator to an input attached to an
+ * The following example shows how to add a min validator to an input attached to an
  * ngModel binding.
  *
  * ```html
- * <input name="firstName" ngModel pattern="[a-zA-Z ]*">
+ * <input type="number" ngModel min="4">
  * ```
  *
  * @ngModule ReactiveFormsModule
  * @ngModule FormsModule
  * @publicApi
  */
-class PatternValidator extends AbstractValidatorDirective {
+class MinValidator extends AbstractValidatorDirective {
     /**
      * @description
-     * Tracks changes to the pattern bound to this directive.
+     * Tracks changes to the min bound to this directive.
      */
-    pattern; // This input is always defined, since the name matches selector.
+    min;
     /** @internal */
-    inputName = 'pattern';
+    inputName = 'min';
     /** @internal */
-    normalizeInput = (input) => input;
+    normalizeInput = (input) => toFloat(input);
     /** @internal */
-    createValidator = (input) => patternValidator(input);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: PatternValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: PatternValidator, isStandalone: false, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: { pattern: "pattern" }, host: { properties: { "attr.pattern": "_enabled ? pattern : null" } }, providers: [PATTERN_VALIDATOR], usesInheritance: true, ngImport: i0 });
+    createValidator = (min) => minValidator(min);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MinValidator, isStandalone: false, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: { min: "min" }, host: { properties: { "attr.min": "_enabled ? min : null" } }, providers: [MIN_VALIDATOR], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: PatternValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinValidator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
-                    providers: [PATTERN_VALIDATOR],
-                    host: { '[attr.pattern]': '_enabled ? pattern : null' },
+                    selector: 'input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]',
+                    providers: [MIN_VALIDATOR],
+                    host: { '[attr.min]': '_enabled ? min : null' },
                     standalone: false,
                 }]
-        }], propDecorators: { pattern: [{
+        }], propDecorators: { min: [{
                 type: Input
             }] } });
-
-const SHARED_FORM_DIRECTIVES = [
-    ɵNgNoValidate,
-    NgSelectOption,
-    ɵNgSelectMultipleOption,
-    DefaultValueAccessor,
-    NumberValueAccessor,
-    RangeValueAccessor,
-    CheckboxControlValueAccessor,
-    SelectControlValueAccessor,
-    SelectMultipleControlValueAccessor,
-    RadioControlValueAccessor,
-    NgControlStatus,
-    NgControlStatusGroup,
-    RequiredValidator,
-    MinLengthValidator,
-    MaxLengthValidator,
-    PatternValidator,
-    CheckboxRequiredValidator,
-    EmailValidator,
-    MinValidator,
-    MaxValidator,
-];
-const TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm];
-const REACTIVE_DRIVEN_DIRECTIVES = [
-    FormControlDirective,
-    FormGroupDirective,
-    FormControlName,
-    FormGroupName,
-    FormArrayName,
-];
 /**
- * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
+ * @description
+ * Provider which adds `RequiredValidator` to the `NG_VALIDATORS` multi-provider list.
  */
-class ɵInternalFormsSharedModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule, declarations: [ɵNgNoValidate,
-            NgSelectOption,
-            ɵNgSelectMultipleOption,
-            DefaultValueAccessor,
-            NumberValueAccessor,
-            RangeValueAccessor,
-            CheckboxControlValueAccessor,
-            SelectControlValueAccessor,
-            SelectMultipleControlValueAccessor,
-            RadioControlValueAccessor,
-            NgControlStatus,
-            NgControlStatusGroup,
-            RequiredValidator,
-            MinLengthValidator,
-            MaxLengthValidator,
-            PatternValidator,
-            CheckboxRequiredValidator,
-            EmailValidator,
-            MinValidator,
-            MaxValidator], exports: [ɵNgNoValidate,
-            NgSelectOption,
-            ɵNgSelectMultipleOption,
-            DefaultValueAccessor,
-            NumberValueAccessor,
-            RangeValueAccessor,
-            CheckboxControlValueAccessor,
-            SelectControlValueAccessor,
-            SelectMultipleControlValueAccessor,
-            RadioControlValueAccessor,
-            NgControlStatus,
-            NgControlStatusGroup,
-            RequiredValidator,
-            MinLengthValidator,
-            MaxLengthValidator,
-            PatternValidator,
-            CheckboxRequiredValidator,
-            EmailValidator,
-            MinValidator,
-            MaxValidator] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: SHARED_FORM_DIRECTIVES,
-                    exports: SHARED_FORM_DIRECTIVES,
-                }]
-        }] });
-
-/**
- * Tracks the value and validity state of an array of `FormControl`,
- * `FormGroup` or `FormArray` instances.
+const REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => RequiredValidator),
+    multi: true,
+};
+/**
+ * @description
+ * Provider which adds `CheckboxRequiredValidator` to the `NG_VALIDATORS` multi-provider list.
+ */
+const CHECKBOX_REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => CheckboxRequiredValidator),
+    multi: true,
+};
+/**
+ * @description
+ * A directive that adds the `required` validator to any controls marked with the
+ * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  *
- * A `FormArray` aggregates the values of each child `FormControl` into an array.
- * It calculates its status by reducing the status values of its children. For example, if one of
- * the controls in a `FormArray` is invalid, the entire array becomes invalid.
+ * @see [Form Validation](guide/forms/form-validation)
  *
- * `FormArray` accepts one generic argument, which is the type of the controls inside.
- * If you need a heterogenous array, use {@link UntypedFormArray}.
+ * @usageNotes
  *
- * `FormArray` is one of the four fundamental building blocks used to define forms in Angular,
- * along with `FormControl`, `FormGroup`, and `FormRecord`.
+ * ### Adding a required validator using template-driven forms
+ *
+ * ```html
+ * <input name="fullName" ngModel required>
+ * ```
+ *
+ * @ngModule FormsModule
+ * @ngModule ReactiveFormsModule
+ * @publicApi
+ */
+class RequiredValidator extends AbstractValidatorDirective {
+    /**
+     * @description
+     * Tracks changes to the required attribute bound to this directive.
+     */
+    required;
+    /** @internal */
+    inputName = 'required';
+    /** @internal */
+    normalizeInput = booleanAttribute;
+    /** @internal */
+    createValidator = (input) => requiredValidator;
+    /** @docs-private */
+    enabled(input) {
+        return input;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: RequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: RequiredValidator, isStandalone: false, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: { required: "required" }, host: { properties: { "attr.required": "_enabled ? \"\" : null" } }, providers: [REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: RequiredValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]',
+                    providers: [REQUIRED_VALIDATOR],
+                    host: { '[attr.required]': '_enabled ? "" : null' },
+                    standalone: false,
+                }]
+        }], propDecorators: { required: [{
+                type: Input
+            }] } });
+/**
+ * A Directive that adds the `required` validator to checkbox controls marked with the
+ * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ *
+ * @see [Form Validation](guide/forms/form-validation)
  *
  * @usageNotes
  *
- * ### Create an array of form controls
+ * ### Adding a required checkbox validator using template-driven forms
  *
- * ```ts
- * const arr = new FormArray([
- *   new FormControl('Nancy', Validators.minLength(2)),
- *   new FormControl('Drew'),
- * ]);
+ * The following example shows how to add a checkbox required validator to an input attached to an
+ * ngModel binding.
  *
- * console.log(arr.value);   // ['Nancy', 'Drew']
- * console.log(arr.status);  // 'VALID'
+ * ```html
+ * <input type="checkbox" name="active" ngModel required>
  * ```
  *
- * ### Create a form array with array-level validators
+ * @publicApi
+ * @ngModule FormsModule
+ * @ngModule ReactiveFormsModule
+ */
+class CheckboxRequiredValidator extends RequiredValidator {
+    /** @internal */
+    createValidator = (input) => requiredTrueValidator;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CheckboxRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CheckboxRequiredValidator, isStandalone: false, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]", host: { properties: { "attr.required": "_enabled ? \"\" : null" } }, providers: [CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CheckboxRequiredValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]',
+                    providers: [CHECKBOX_REQUIRED_VALIDATOR],
+                    host: { '[attr.required]': '_enabled ? "" : null' },
+                    standalone: false,
+                }]
+        }] });
+/**
+ * @description
+ * Provider which adds `EmailValidator` to the `NG_VALIDATORS` multi-provider list.
+ */
+const EMAIL_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => EmailValidator),
+    multi: true,
+};
+/**
+ * A directive that adds the `email` validator to controls marked with the
+ * `email` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  *
- * You include array-level validators and async validators. These come in handy
- * when you want to perform validation that considers the value of more than one child
- * control.
+ * The email validation is based on the WHATWG HTML specification with some enhancements to
+ * incorporate more RFC rules. More information can be found on the [Validators.email
+ * page](api/forms/Validators#email).
  *
- * The two types of validators are passed in separately as the second and third arg
- * respectively, or together as part of an options object.
+ * @see [Form Validation](guide/forms/form-validation)
  *
- * ```ts
- * const arr = new FormArray([
- *   new FormControl('Nancy'),
- *   new FormControl('Drew')
- * ], {validators: myValidator, asyncValidators: myAsyncValidator});
- * ```
+ * @usageNotes
  *
- * ### Set the updateOn property for all controls in a form array
+ * ### Adding an email validator
  *
- * The options object is used to set a default value for each child
- * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
- * array level, all child controls default to 'blur', unless the child
- * has explicitly specified a different `updateOn` value.
+ * The following example shows how to add an email validator to an input attached to an ngModel
+ * binding.
  *
- * ```ts
- * const arr = new FormArray([
- *    new FormControl()
- * ], {updateOn: 'blur'});
+ * ```html
+ * <input type="email" name="email" ngModel email>
+ * <input type="email" name="email" ngModel email="true">
+ * <input type="email" name="email" ngModel [email]="true">
  * ```
  *
- * ### Adding or removing controls from a form array
- *
- * To change the controls in the array, use the `push`, `insert`, `removeAt` or `clear` methods
- * in `FormArray` itself. These methods ensure the controls are properly tracked in the
- * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
- * the `FormArray` directly, as that result in strange and unexpected behavior such
- * as broken change detection.
- *
  * @publicApi
+ * @ngModule FormsModule
+ * @ngModule ReactiveFormsModule
  */
-class FormArray extends AbstractControl {
-    /**
-     * Creates a new `FormArray` instance.
-     *
-     * @param controls An array of child controls. Each child control is given an index
-     * where it is registered.
-     *
-     * @param validatorOrOpts A synchronous validator function, or an array of
-     * such functions, or an `AbstractControlOptions` object that contains validation functions
-     * and a validation trigger.
-     *
-     * @param asyncValidator A single async validator or array of async validator functions
-     *
-     */
-    constructor(controls, validatorOrOpts, asyncValidator) {
-        super(pickValidators(validatorOrOpts), pickAsyncValidators(asyncValidator, validatorOrOpts));
-        this.controls = controls;
-        this._initObservables();
-        this._setUpdateStrategy(validatorOrOpts);
-        this._setUpControls();
-        this.updateValueAndValidity({
-            onlySelf: true,
-            // If `asyncValidator` is present, it will trigger control status change from `PENDING` to
-            // `VALID` or `INVALID`.
-            // The status should be broadcasted via the `statusChanges` observable, so we set `emitEvent`
-            // to `true` to allow that during the control creation process.
-            emitEvent: !!this.asyncValidator,
-        });
-    }
-    controls;
-    /**
-     * Get the `AbstractControl` at the given `index` in the array.
-     *
-     * @param index Index in the array to retrieve the control. If `index` is negative, it will wrap
-     *     around from the back, and if index is greatly negative (less than `-length`), the result is
-     * undefined. This behavior is the same as `Array.at(index)`.
-     */
-    at(index) {
-        return this.controls[this._adjustIndex(index)];
-    }
-    /**
-     * Insert a new `AbstractControl` at the end of the array.
-     *
-     * @param control Form control to be inserted
-     * @param options Specifies whether this FormArray instance should emit events after a new
-     *     control is added.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges` observables emit events with the latest status and value when the control is
-     * inserted. When false, no events are emitted.
-     */
-    push(control, options = {}) {
-        if (Array.isArray(control)) {
-            control.forEach((ctrl) => {
-                this.controls.push(ctrl);
-                this._registerControl(ctrl);
-            });
-        }
-        else {
-            this.controls.push(control);
-            this._registerControl(control);
-        }
-        this.updateValueAndValidity({ emitEvent: options.emitEvent });
-        this._onCollectionChange();
-    }
+class EmailValidator extends AbstractValidatorDirective {
     /**
-     * Insert a new `AbstractControl` at the given `index` in the array.
-     *
-     * @param index Index in the array to insert the control. If `index` is negative, wraps around
-     *     from the back. If `index` is greatly negative (less than `-length`), prepends to the array.
-     * This behavior is the same as `Array.splice(index, 0, control)`.
-     * @param control Form control to be inserted
-     * @param options Specifies whether this FormArray instance should emit events after a new
-     *     control is inserted.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges` observables emit events with the latest status and value when the control is
-     * inserted. When false, no events are emitted.
+     * @description
+     * Tracks changes to the email attribute bound to this directive.
      */
-    insert(index, control, options = {}) {
-        this.controls.splice(index, 0, control);
-        this._registerControl(control);
-        this.updateValueAndValidity({ emitEvent: options.emitEvent });
+    email;
+    /** @internal */
+    inputName = 'email';
+    /** @internal */
+    normalizeInput = booleanAttribute;
+    /** @internal */
+    createValidator = (input) => emailValidator;
+    /** @docs-private */
+    enabled(input) {
+        return input;
     }
-    /**
-     * Remove the control at the given `index` in the array.
-     *
-     * @param index Index in the array to remove the control.  If `index` is negative, wraps around
-     *     from the back. If `index` is greatly negative (less than `-length`), removes the first
-     *     element. This behavior is the same as `Array.splice(index, 1)`.
-     * @param options Specifies whether this FormArray instance should emit events after a
-     *     control is removed.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges` observables emit events with the latest status and value when the control is
-     * removed. When false, no events are emitted.
-     */
-    removeAt(index, options = {}) {
-        // Adjust the index, then clamp it at no less than 0 to prevent undesired underflows.
-        let adjustedIndex = this._adjustIndex(index);
-        if (adjustedIndex < 0)
-            adjustedIndex = 0;
-        if (this.controls[adjustedIndex])
-            this.controls[adjustedIndex]._registerOnCollectionChange(() => { });
-        this.controls.splice(adjustedIndex, 1);
-        this.updateValueAndValidity({ emitEvent: options.emitEvent });
-    }
-    /**
-     * Replace an existing control.
-     *
-     * @param index Index in the array to replace the control. If `index` is negative, wraps around
-     *     from the back. If `index` is greatly negative (less than `-length`), replaces the first
-     *     element. This behavior is the same as `Array.splice(index, 1, control)`.
-     * @param control The `AbstractControl` control to replace the existing control
-     * @param options Specifies whether this FormArray instance should emit events after an
-     *     existing control is replaced with a new one.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges` observables emit events with the latest status and value when the control is
-     * replaced with a new one. When false, no events are emitted.
-     */
-    setControl(index, control, options = {}) {
-        // Adjust the index, then clamp it at no less than 0 to prevent undesired underflows.
-        let adjustedIndex = this._adjustIndex(index);
-        if (adjustedIndex < 0)
-            adjustedIndex = 0;
-        if (this.controls[adjustedIndex])
-            this.controls[adjustedIndex]._registerOnCollectionChange(() => { });
-        this.controls.splice(adjustedIndex, 1);
-        if (control) {
-            this.controls.splice(adjustedIndex, 0, control);
-            this._registerControl(control);
-        }
-        this.updateValueAndValidity({ emitEvent: options.emitEvent });
-        this._onCollectionChange();
-    }
-    /**
-     * Length of the control array.
-     */
-    get length() {
-        return this.controls.length;
-    }
-    /**
-     * Sets the value of the `FormArray`. It accepts an array that matches
-     * the structure of the control.
-     *
-     * This method performs strict checks, and throws an error if you try
-     * to set the value of a control that doesn't exist or if you exclude the
-     * value of a control.
-     *
-     * @usageNotes
-     * ### Set the values for the controls in the form array
-     *
-     * ```ts
-     * const arr = new FormArray([
-     *   new FormControl(),
-     *   new FormControl()
-     * ]);
-     * console.log(arr.value);   // [null, null]
-     *
-     * arr.setValue(['Nancy', 'Drew']);
-     * console.log(arr.value);   // ['Nancy', 'Drew']
-     * ```
-     *
-     * @param value Array of values for the controls
-     * @param options Configure options that determine how the control propagates changes and
-     * emits events after the value changes
-     *
-     * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
-     * is false.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges`
-     * observables emit events with the latest status and value when the control value is updated.
-     * When false, no events are emitted.
-     * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
-     * updateValueAndValidity} method.
-     */
-    setValue(value, options = {}) {
-        assertAllValuesPresent(this, false, value);
-        value.forEach((newValue, index) => {
-            assertControlPresent(this, false, index);
-            this.at(index).setValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
-        });
-        this.updateValueAndValidity(options);
-    }
-    /**
-     * Patches the value of the `FormArray`. It accepts an array that matches the
-     * structure of the control, and does its best to match the values to the correct
-     * controls in the group.
-     *
-     * It accepts both super-sets and sub-sets of the array without throwing an error.
-     *
-     * @usageNotes
-     * ### Patch the values for controls in a form array
-     *
-     * ```ts
-     * const arr = new FormArray([
-     *    new FormControl(),
-     *    new FormControl()
-     * ]);
-     * console.log(arr.value);   // [null, null]
-     *
-     * arr.patchValue(['Nancy']);
-     * console.log(arr.value);   // ['Nancy', null]
-     * ```
-     *
-     * @param value Array of latest values for the controls
-     * @param options Configure options that determine how the control propagates changes and
-     * emits events after the value changes
-     *
-     * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
-     * is false.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges` observables emit events with the latest status and value when the control
-     * value is updated. When false, no events are emitted. The configuration options are passed to
-     * the {@link AbstractControl#updateValueAndValidity updateValueAndValidity} method.
-     */
-    patchValue(value, options = {}) {
-        // Even though the `value` argument type doesn't allow `null` and `undefined` values, the
-        // `patchValue` can be called recursively and inner data structures might have these values,
-        // so we just ignore such cases when a field containing FormArray instance receives `null` or
-        // `undefined` as a value.
-        if (value == null /* both `null` and `undefined` */)
-            return;
-        value.forEach((newValue, index) => {
-            if (this.at(index)) {
-                this.at(index).patchValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
-            }
-        });
-        this.updateValueAndValidity(options);
-    }
-    /**
-     * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
-     * value of all descendants to null or null maps.
-     *
-     * You reset to a specific form state by passing in an array of states
-     * that matches the structure of the control. The state is a standalone value
-     * or a form state object with both a value and a disabled status.
-     *
-     * @usageNotes
-     * ### Reset the values in a form array
-     *
-     * ```ts
-     * const arr = new FormArray([
-     *    new FormControl(),
-     *    new FormControl()
-     * ]);
-     * arr.reset(['name', 'last name']);
-     *
-     * console.log(arr.value);  // ['name', 'last name']
-     * ```
-     *
-     * ### Reset the values in a form array and the disabled status for the first control
-     *
-     * ```ts
-     * arr.reset([
-     *   {value: 'name', disabled: true},
-     *   'last'
-     * ]);
-     *
-     * console.log(arr.value);  // ['last']
-     * console.log(arr.at(0).status);  // 'DISABLED'
-     * ```
-     *
-     * @param value Array of values for the controls
-     * @param options Configure options that determine how the control propagates changes and
-     * emits events after the value changes
-     *
-     * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
-     * is false.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges`
-     * observables emit events with the latest status and value when the control is reset.
-     * When false, no events are emitted.
-     * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
-     * updateValueAndValidity} method.
-     */
-    reset(value = [], options = {}) {
-        this._forEachChild((control, index) => {
-            control.reset(value[index], { onlySelf: true, emitEvent: options.emitEvent });
-        });
-        this._updatePristine(options, this);
-        this._updateTouched(options, this);
-        this.updateValueAndValidity(options);
-    }
-    /**
-     * The aggregate value of the array, including any disabled controls.
-     *
-     * Reports all values regardless of disabled status.
-     */
-    getRawValue() {
-        return this.controls.map((control) => control.getRawValue());
-    }
-    /**
-     * Remove all controls in the `FormArray`.
-     *
-     * @param options Specifies whether this FormArray instance should emit events after all
-     *     controls are removed.
-     * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
-     * `valueChanges` observables emit events with the latest status and value when all controls
-     * in this FormArray instance are removed. When false, no events are emitted.
-     *
-     * @usageNotes
-     * ### Remove all elements from a FormArray
-     *
-     * ```ts
-     * const arr = new FormArray([
-     *    new FormControl(),
-     *    new FormControl()
-     * ]);
-     * console.log(arr.length);  // 2
-     *
-     * arr.clear();
-     * console.log(arr.length);  // 0
-     * ```
-     *
-     * It's a simpler and more efficient alternative to removing all elements one by one:
-     *
-     * ```ts
-     * const arr = new FormArray([
-     *    new FormControl(),
-     *    new FormControl()
-     * ]);
-     *
-     * while (arr.length) {
-     *    arr.removeAt(0);
-     * }
-     * ```
-     */
-    clear(options = {}) {
-        if (this.controls.length < 1)
-            return;
-        this._forEachChild((control) => control._registerOnCollectionChange(() => { }));
-        this.controls.splice(0);
-        this.updateValueAndValidity({ emitEvent: options.emitEvent });
-    }
-    /**
-     * Adjusts a negative index by summing it with the length of the array. For very negative
-     * indices, the result may remain negative.
-     * @internal
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: EmailValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: EmailValidator, isStandalone: false, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: { email: "email" }, providers: [EMAIL_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: EmailValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[email][formControlName],[email][formControl],[email][ngModel]',
+                    providers: [EMAIL_VALIDATOR],
+                    standalone: false,
+                }]
+        }], propDecorators: { email: [{
+                type: Input
+            }] } });
+/**
+ * @description
+ * Provider which adds `MinLengthValidator` to the `NG_VALIDATORS` multi-provider list.
+ */
+const MIN_LENGTH_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => MinLengthValidator),
+    multi: true,
+};
+/**
+ * A directive that adds minimum length validation to controls marked with the
+ * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ *
+ * @see [Form Validation](guide/forms/form-validation)
+ *
+ * @usageNotes
+ *
+ * ### Adding a minimum length validator
+ *
+ * The following example shows how to add a minimum length validator to an input attached to an
+ * ngModel binding.
+ *
+ * ```html
+ * <input name="firstName" ngModel minlength="4">
+ * ```
+ *
+ * @ngModule ReactiveFormsModule
+ * @ngModule FormsModule
+ * @publicApi
+ */
+class MinLengthValidator extends AbstractValidatorDirective {
+    /**
+     * @description
+     * Tracks changes to the minimum length bound to this directive.
      */
-    _adjustIndex(index) {
-        return index < 0 ? index + this.length : index;
-    }
-    /** @internal */
-    _syncPendingControls() {
-        let subtreeUpdated = this.controls.reduce((updated, child) => {
-            return child._syncPendingControls() ? true : updated;
-        }, false);
-        if (subtreeUpdated)
-            this.updateValueAndValidity({ onlySelf: true });
-        return subtreeUpdated;
-    }
+    minlength;
     /** @internal */
-    _forEachChild(cb) {
-        this.controls.forEach((control, index) => {
-            cb(control, index);
-        });
-    }
+    inputName = 'minlength';
     /** @internal */
-    _updateValue() {
-        this.value = this.controls
-            .filter((control) => control.enabled || this.disabled)
-            .map((control) => control.value);
-    }
+    normalizeInput = (input) => toInteger(input);
     /** @internal */
-    _anyControls(condition) {
-        return this.controls.some((control) => control.enabled && condition(control));
-    }
+    createValidator = (minlength) => minLengthValidator(minlength);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinLengthValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MinLengthValidator, isStandalone: false, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: { minlength: "minlength" }, host: { properties: { "attr.minlength": "_enabled ? minlength : null" } }, providers: [MIN_LENGTH_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MinLengthValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
+                    providers: [MIN_LENGTH_VALIDATOR],
+                    host: { '[attr.minlength]': '_enabled ? minlength : null' },
+                    standalone: false,
+                }]
+        }], propDecorators: { minlength: [{
+                type: Input
+            }] } });
+/**
+ * @description
+ * Provider which adds `MaxLengthValidator` to the `NG_VALIDATORS` multi-provider list.
+ */
+const MAX_LENGTH_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => MaxLengthValidator),
+    multi: true,
+};
+/**
+ * A directive that adds maximum length validation to controls marked with the
+ * `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ *
+ * @see [Form Validation](guide/forms/form-validation)
+ *
+ * @usageNotes
+ *
+ * ### Adding a maximum length validator
+ *
+ * The following example shows how to add a maximum length validator to an input attached to an
+ * ngModel binding.
+ *
+ * ```html
+ * <input name="firstName" ngModel maxlength="25">
+ * ```
+ *
+ * @ngModule ReactiveFormsModule
+ * @ngModule FormsModule
+ * @publicApi
+ */
+class MaxLengthValidator extends AbstractValidatorDirective {
+    /**
+     * @description
+     * Tracks changes to the maximum length bound to this directive.
+     */
+    maxlength;
     /** @internal */
-    _setUpControls() {
-        this._forEachChild((control) => this._registerControl(control));
-    }
+    inputName = 'maxlength';
     /** @internal */
-    _allControlsDisabled() {
-        for (const control of this.controls) {
-            if (control.enabled)
-                return false;
-        }
-        return this.controls.length > 0 || this.disabled;
-    }
-    _registerControl(control) {
-        control.setParent(this);
-        control._registerOnCollectionChange(this._onCollectionChange);
-    }
+    normalizeInput = (input) => toInteger(input);
     /** @internal */
-    _find(name) {
-        return this.at(name) ?? null;
-    }
+    createValidator = (maxlength) => maxLengthValidator(maxlength);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxLengthValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MaxLengthValidator, isStandalone: false, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: { maxlength: "maxlength" }, host: { properties: { "attr.maxlength": "_enabled ? maxlength : null" } }, providers: [MAX_LENGTH_VALIDATOR], usesInheritance: true, ngImport: i0 });
 }
-const UntypedFormArray = FormArray;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MaxLengthValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
+                    providers: [MAX_LENGTH_VALIDATOR],
+                    host: { '[attr.maxlength]': '_enabled ? maxlength : null' },
+                    standalone: false,
+                }]
+        }], propDecorators: { maxlength: [{
+                type: Input
+            }] } });
 /**
  * @description
- * Asserts that the given control is an instance of `FormArray`
+ * Provider which adds `PatternValidator` to the `NG_VALIDATORS` multi-provider list.
+ */
+const PATTERN_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => PatternValidator),
+    multi: true,
+};
+/**
+ * @description
+ * A directive that adds regex pattern validation to controls marked with the
+ * `pattern` attribute. The regex must match the entire control value.
+ * The directive is provided with the `NG_VALIDATORS` multi-provider list.
+ *
+ * @see [Form Validation](guide/forms/form-validation)
+ *
+ * @usageNotes
+ *
+ * ### Adding a pattern validator
  *
+ * The following example shows how to add a pattern validator to an input attached to an
+ * ngModel binding.
+ *
+ * ```html
+ * <input name="firstName" ngModel pattern="[a-zA-Z ]*">
+ * ```
+ *
+ * @ngModule ReactiveFormsModule
+ * @ngModule FormsModule
  * @publicApi
  */
-const isFormArray = (control) => control instanceof FormArray;
+class PatternValidator extends AbstractValidatorDirective {
+    /**
+     * @description
+     * Tracks changes to the pattern bound to this directive.
+     */
+    pattern; // This input is always defined, since the name matches selector.
+    /** @internal */
+    inputName = 'pattern';
+    /** @internal */
+    normalizeInput = (input) => input;
+    /** @internal */
+    createValidator = (input) => patternValidator(input);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: PatternValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: PatternValidator, isStandalone: false, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: { pattern: "pattern" }, host: { properties: { "attr.pattern": "_enabled ? pattern : null" } }, providers: [PATTERN_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: PatternValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
+                    providers: [PATTERN_VALIDATOR],
+                    host: { '[attr.pattern]': '_enabled ? pattern : null' },
+                    standalone: false,
+                }]
+        }], propDecorators: { pattern: [{
+                type: Input
+            }] } });
+
+const SHARED_FORM_DIRECTIVES = [
+    ɵNgNoValidate,
+    NgSelectOption,
+    ɵNgSelectMultipleOption,
+    DefaultValueAccessor,
+    NumberValueAccessor,
+    RangeValueAccessor,
+    CheckboxControlValueAccessor,
+    SelectControlValueAccessor,
+    SelectMultipleControlValueAccessor,
+    RadioControlValueAccessor,
+    NgControlStatus,
+    NgControlStatusGroup,
+    RequiredValidator,
+    MinLengthValidator,
+    MaxLengthValidator,
+    PatternValidator,
+    CheckboxRequiredValidator,
+    EmailValidator,
+    MinValidator,
+    MaxValidator,
+];
+const TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm];
+const REACTIVE_DRIVEN_DIRECTIVES = [
+    FormControlDirective,
+    FormGroupDirective,
+    FormArrayDirective,
+    FormControlName,
+    FormGroupName,
+    FormArrayName,
+];
+/**
+ * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
+ */
+class ɵInternalFormsSharedModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule, declarations: [ɵNgNoValidate,
+            NgSelectOption,
+            ɵNgSelectMultipleOption,
+            DefaultValueAccessor,
+            NumberValueAccessor,
+            RangeValueAccessor,
+            CheckboxControlValueAccessor,
+            SelectControlValueAccessor,
+            SelectMultipleControlValueAccessor,
+            RadioControlValueAccessor,
+            NgControlStatus,
+            NgControlStatusGroup,
+            RequiredValidator,
+            MinLengthValidator,
+            MaxLengthValidator,
+            PatternValidator,
+            CheckboxRequiredValidator,
+            EmailValidator,
+            MinValidator,
+            MaxValidator], exports: [ɵNgNoValidate,
+            NgSelectOption,
+            ɵNgSelectMultipleOption,
+            DefaultValueAccessor,
+            NumberValueAccessor,
+            RangeValueAccessor,
+            CheckboxControlValueAccessor,
+            SelectControlValueAccessor,
+            SelectMultipleControlValueAccessor,
+            RadioControlValueAccessor,
+            NgControlStatus,
+            NgControlStatusGroup,
+            RequiredValidator,
+            MinLengthValidator,
+            MaxLengthValidator,
+            PatternValidator,
+            CheckboxRequiredValidator,
+            EmailValidator,
+            MinValidator,
+            MaxValidator] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ɵInternalFormsSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: SHARED_FORM_DIRECTIVES,
+                    exports: SHARED_FORM_DIRECTIVES,
+                }]
+        }] });
 
 function isAbstractControlOptions(options) {
     return (!!options &&
@@ -7651,7 +7742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
 /**
  * @publicApi
  */
-const VERSION = new Version('20.2.3');
+const VERSION = new Version('21.0.0-next.1');
 
 /**
  * Exports the required providers and directives for template-driven forms,
@@ -7729,7 +7820,7 @@ class ReactiveFormsModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ReactiveFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: ReactiveFormsModule, declarations: [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName], exports: [ɵInternalFormsSharedModule, FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: ReactiveFormsModule, declarations: [FormControlDirective, FormGroupDirective, FormArrayDirective, FormControlName, FormGroupName, FormArrayName], exports: [ɵInternalFormsSharedModule, FormControlDirective, FormGroupDirective, FormArrayDirective, FormControlName, FormGroupName, FormArrayName] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ReactiveFormsModule, imports: [ɵInternalFormsSharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ReactiveFormsModule, decorators: [{
@@ -7740,5 +7831,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
                 }]
         }] });
 
-export { AbstractControl, AbstractControlDirective, AbstractFormGroupDirective, COMPOSITION_BUFFER_MODE, CheckboxControlValueAccessor, CheckboxRequiredValidator, ControlContainer, ControlEvent, DefaultValueAccessor, EmailValidator, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, FormResetEvent, FormSubmittedEvent, FormsModule, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgControlStatus, NgControlStatusGroup, NgForm, NgModel, NgModelGroup, NgSelectOption, NonNullableFormBuilder, NumberValueAccessor, PatternValidator, PristineChangeEvent, RadioControlValueAccessor, RangeValueAccessor, ReactiveFormsModule, RequiredValidator, SelectControlValueAccessor, SelectMultipleControlValueAccessor, StatusChangeEvent, TouchedChangeEvent, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, VERSION, Validators, ValueChangeEvent, isFormArray, isFormControl, isFormGroup, isFormRecord, ɵInternalFormsSharedModule, ɵNgNoValidate, ɵNgSelectMultipleOption };
+export { AbstractControl, AbstractControlDirective, AbstractFormDirective, AbstractFormGroupDirective, COMPOSITION_BUFFER_MODE, CheckboxControlValueAccessor, CheckboxRequiredValidator, ControlContainer, ControlEvent, DefaultValueAccessor, EmailValidator, FormArray, FormArrayDirective, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, FormResetEvent, FormSubmittedEvent, FormsModule, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgControlStatus, NgControlStatusGroup, NgForm, NgModel, NgModelGroup, NgSelectOption, NonNullableFormBuilder, NumberValueAccessor, PatternValidator, PristineChangeEvent, RadioControlValueAccessor, RangeValueAccessor, ReactiveFormsModule, RequiredValidator, SelectControlValueAccessor, SelectMultipleControlValueAccessor, StatusChangeEvent, TouchedChangeEvent, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, VERSION, Validators, ValueChangeEvent, isFormArray, isFormControl, isFormGroup, isFormRecord, ɵInternalFormsSharedModule, ɵNgNoValidate, ɵNgSelectMultipleOption };
 //# sourceMappingURL=forms.mjs.map