@angular/forms

  • Version 12.0.3
  • Published
  • 2.35 MB
  • 1 dependency
  • MIT license

Install

npm i @angular/forms
yarn add @angular/forms
pnpm add @angular/forms

Overview

Angular - directives and services for creating forms

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable COMPOSITION_BUFFER_MODE

const COMPOSITION_BUFFER_MODE: any;
  • Provide this token to control if form directives buffer IME input until the "compositionend" event occurs.

variable NG_ASYNC_VALIDATORS

const NG_ASYNC_VALIDATORS: any;
  • An InjectionToken for registering additional asynchronous validators used with AbstractControls.

    See Also

    • NG_VALIDATORS

variable NG_VALIDATORS

const NG_VALIDATORS: any;
  • An InjectionToken for registering additional synchronous validators used with AbstractControls.

    See Also

    • NG_ASYNC_VALIDATORS

      ### Providing a custom validator

      The following example registers a custom validator directive. Adding the validator to the existing collection of validators requires the multi: true option.

      @Directive({
      selector: '[customValidator]',
      providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
      })
      class CustomValidatorDirective implements Validator {
      validate(control: AbstractControl): ValidationErrors | null {
      return { 'custom': true };
      }
      }

variable NG_VALUE_ACCESSOR

const NG_VALUE_ACCESSOR: any;
  • Used to provide a ControlValueAccessor for form controls.

    See DefaultValueAccessor for how to implement one.

variable ɵangular_packages_forms_forms_a

const ɵangular_packages_forms_forms_a: any[];

    variable ɵangular_packages_forms_forms_b

    const ɵangular_packages_forms_forms_b: any[];

      variable ɵangular_packages_forms_forms_bc

      const ɵangular_packages_forms_forms_bc: any;
      • Provider which adds MaxValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_bd

      const ɵangular_packages_forms_forms_bd: any;
      • Provider which adds MinValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_be

      const ɵangular_packages_forms_forms_be: any;
      • Provider which adds RequiredValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_bf

      const ɵangular_packages_forms_forms_bf: any;
      • Provider which adds CheckboxRequiredValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_bg

      const ɵangular_packages_forms_forms_bg: any;
      • Provider which adds EmailValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_bh

      const ɵangular_packages_forms_forms_bh: any;
      • Provider which adds MinLengthValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_bi

      const ɵangular_packages_forms_forms_bi: any;
      • Provider which adds MaxLengthValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_bj

      const ɵangular_packages_forms_forms_bj: any;
      • Provider which adds PatternValidator to the NG_VALIDATORS multi-provider list.

      variable ɵangular_packages_forms_forms_c

      const ɵangular_packages_forms_forms_c: any[];

        variable ɵangular_packages_forms_forms_e

        const ɵangular_packages_forms_forms_e: any;

          variable ɵangular_packages_forms_forms_h

          const ɵangular_packages_forms_forms_h: any;

            variable ɵangular_packages_forms_forms_j

            const ɵangular_packages_forms_forms_j: {
            '[class.ng-untouched]': string;
            '[class.ng-touched]': string;
            '[class.ng-pristine]': string;
            '[class.ng-dirty]': string;
            '[class.ng-valid]': string;
            '[class.ng-invalid]': string;
            '[class.ng-pending]': string;
            };

              variable ɵangular_packages_forms_forms_k

              const ɵangular_packages_forms_forms_k: any;

                variable ɵangular_packages_forms_forms_l

                const ɵangular_packages_forms_forms_l: any;

                  variable ɵangular_packages_forms_forms_m

                  const ɵangular_packages_forms_forms_m: any;

                    variable ɵangular_packages_forms_forms_n

                    const ɵangular_packages_forms_forms_n: any;

                      variable ɵangular_packages_forms_forms_o

                      const ɵangular_packages_forms_forms_o: any;

                        variable ɵangular_packages_forms_forms_r

                        const ɵangular_packages_forms_forms_r: any;

                          variable ɵangular_packages_forms_forms_s

                          const ɵangular_packages_forms_forms_s: any;
                          • Token to provide to turn off the ngModel warning on formControl and formControlName.

                          variable ɵangular_packages_forms_forms_t

                          const ɵangular_packages_forms_forms_t: any;

                            variable ɵangular_packages_forms_forms_u

                            const ɵangular_packages_forms_forms_u: any;

                              variable ɵangular_packages_forms_forms_v

                              const ɵangular_packages_forms_forms_v: any;

                                variable ɵangular_packages_forms_forms_w

                                const ɵangular_packages_forms_forms_w: any;

                                  variable ɵangular_packages_forms_forms_x

                                  const ɵangular_packages_forms_forms_x: any;

                                    variable ɵangular_packages_forms_forms_y

                                    const ɵangular_packages_forms_forms_y: any;

                                      variable ɵangular_packages_forms_forms_z

                                      const ɵangular_packages_forms_forms_z: any;

                                        variable VERSION

                                        const VERSION: any;

                                        Functions

                                        function ɵangular_packages_forms_forms_bk

                                        ɵangular_packages_forms_forms_bk: (min: number) => ValidatorFn;
                                        • Validator that requires the control's value to be greater than or equal to the provided number. See Validators.min for additional information.

                                        function ɵangular_packages_forms_forms_bl

                                        ɵangular_packages_forms_forms_bl: (max: number) => ValidatorFn;
                                        • Validator that requires the control's value to be less than or equal to the provided number. See Validators.max for additional information.

                                        function ɵangular_packages_forms_forms_bm

                                        ɵangular_packages_forms_forms_bm: (
                                        control: AbstractControl
                                        ) => ValidationErrors | null;
                                        • Validator that requires the control have a non-empty value. See Validators.required for additional information.

                                        function ɵangular_packages_forms_forms_bn

                                        ɵangular_packages_forms_forms_bn: (
                                        control: AbstractControl
                                        ) => ValidationErrors | null;
                                        • Validator that requires the control's value be true. This validator is commonly used for required checkboxes. See Validators.requiredTrue for additional information.

                                        function ɵangular_packages_forms_forms_bo

                                        ɵangular_packages_forms_forms_bo: (
                                        control: AbstractControl
                                        ) => ValidationErrors | null;
                                        • Validator that requires the control's value pass an email validation test. See Validators.email for additional information.

                                        function ɵangular_packages_forms_forms_bp

                                        ɵangular_packages_forms_forms_bp: (minLength: number) => ValidatorFn;
                                        • Validator that requires the length of the control's value to be greater than or equal to the provided minimum length. See Validators.minLength for additional information.

                                        function ɵangular_packages_forms_forms_bq

                                        ɵangular_packages_forms_forms_bq: (maxLength: number) => ValidatorFn;
                                        • Validator that requires the length of the control's value to be less than or equal to the provided maximum length. See Validators.maxLength for additional information.

                                        function ɵangular_packages_forms_forms_br

                                        ɵangular_packages_forms_forms_br: (pattern: string | RegExp) => ValidatorFn;
                                        • Validator that requires the control's value to match a regex pattern. See Validators.pattern for additional information.

                                        function ɵangular_packages_forms_forms_bs

                                        ɵangular_packages_forms_forms_bs: (
                                        control: AbstractControl
                                        ) => ValidationErrors | null;
                                        • Function that has ValidatorFn shape, but performs no operation.

                                        Classes

                                        class AbstractControl

                                        abstract class AbstractControl {}
                                        • This is the base class for FormControl, FormGroup, and FormArray.

                                          It provides some of the shared behavior that all controls and groups of controls have, like running validators, calculating status, and resetting state. It also defines the properties that are shared between all sub-classes, like value, valid, and dirty. It shouldn't be instantiated directly.

                                          See Also

                                          • [Forms Guide](/guide/forms)

                                          • [Reactive Forms Guide](/guide/reactive-forms)

                                          • [Dynamic Forms Guide](/guide/dynamic-form)

                                        constructor

                                        constructor(
                                        validators: ValidatorFn | ValidatorFn[],
                                        asyncValidators: AsyncValidatorFn | AsyncValidatorFn[]
                                        );
                                        • Initialize the AbstractControl instance.

                                          Parameter validators

                                          The function or array of functions that is used to determine the validity of this control synchronously.

                                          Parameter asyncValidators

                                          The function or array of functions that is used to determine validity of this control asynchronously.

                                        property asyncValidator

                                        asyncValidator: AsyncValidatorFn;
                                        • The function that is used to determine the validity of this control asynchronously.

                                        property dirty

                                        readonly dirty: boolean;
                                        • A control is dirty if the user has changed the value in the UI.

                                          Returns

                                          True if the user has changed the value of this control in the UI; compare pristine. Programmatic changes to a control's value do not mark it dirty.

                                        property disabled

                                        readonly disabled: boolean;
                                        • A control is disabled when its status is DISABLED.

                                          Disabled controls are exempt from validation checks and are not included in the aggregate value of their ancestor controls.

                                          Returns

                                          True if the control is disabled, false otherwise.

                                          See Also

                                        property enabled

                                        readonly enabled: boolean;
                                        • A control is enabled as long as its status is not DISABLED.

                                          Returns

                                          True if the control has any status other than 'DISABLED', false if the status is 'DISABLED'.

                                          See Also

                                        property errors

                                        readonly errors: ValidationErrors;
                                        • An object containing any errors generated by failing validation, or null if there are no errors.

                                        property invalid

                                        readonly invalid: boolean;
                                        • A control is invalid when its status is INVALID.

                                          Returns

                                          True if this control has failed one or more of its validation checks, false otherwise.

                                          See Also

                                        property parent

                                        readonly parent: FormGroup | FormArray;
                                        • The parent control.

                                        property pending

                                        readonly pending: boolean;
                                        • A control is pending when its status is PENDING.

                                          Returns

                                          True if this control is in the process of conducting a validation check, false otherwise.

                                          See Also

                                        property pristine

                                        readonly pristine: boolean;
                                        • A control is pristine if the user has not yet changed the value in the UI.

                                          Returns

                                          True if the user has not yet changed the value in the UI; compare dirty. Programmatic changes to a control's value do not mark it dirty.

                                        property root

                                        readonly root: AbstractControl;
                                        • Retrieves the top-level ancestor of this control.

                                        property status

                                        readonly status: string;
                                        • The validation status of the control. There are four possible validation status values:

                                          * **VALID**: This control has passed all validation checks. * **INVALID**: This control has failed at least one validation check. * **PENDING**: This control is in the midst of conducting a validation check. * **DISABLED**: This control is exempt from validation checks.

                                          These status values are mutually exclusive, so a control cannot be both valid AND invalid or invalid AND disabled.

                                        property statusChanges

                                        readonly statusChanges: any;
                                        • A multicasting observable that emits an event every time the validation status of the control recalculates.

                                          See Also

                                        property touched

                                        readonly touched: boolean;
                                        • True if the control is marked as touched.

                                          A control is marked touched once the user has triggered a blur event on it.

                                        property untouched

                                        readonly untouched: boolean;
                                        • True if the control has not been marked as touched

                                          A control is untouched if the user has not yet triggered a blur event on it.

                                        property updateOn

                                        readonly updateOn: FormHooks;
                                        • Reports the update strategy of the AbstractControl (meaning the event on which the control updates itself). Possible values: 'change' | 'blur' | 'submit' Default value: 'change'

                                        property valid

                                        readonly valid: boolean;
                                        • A control is valid when its status is VALID.

                                          Returns

                                          True if the control has passed all of its validation tests, false otherwise.

                                          See Also

                                        property validator

                                        validator: ValidatorFn;
                                        • The function that is used to determine the validity of this control synchronously.

                                        property value

                                        readonly value: any;
                                        • The current value of the control.

                                          * For a FormControl, the current value. * For an enabled FormGroup, the values of enabled controls as an object with a key-value pair for each member of the group. * For a disabled FormGroup, the values of all controls as an object with a key-value pair for each member of the group. * For a FormArray, the values of enabled controls as an array.

                                        property valueChanges

                                        readonly valueChanges: any;
                                        • A multicasting observable that emits an event every time the value of the control changes, in the UI or programmatically. It also emits an event each time you call enable() or disable() without passing along {emitEvent: false} as a function argument.

                                        method clearAsyncValidators

                                        clearAsyncValidators: () => void;
                                        • Empties out the async validator list.

                                          When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

                                        method clearValidators

                                        clearValidators: () => void;
                                        • Empties out the sync validator list.

                                          When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

                                        method disable

                                        disable: (opts?: { onlySelf?: boolean; emitEvent?: boolean }) => void;
                                        • Disables the control. This means the control is exempt from validation checks and excluded from the aggregate value of any parent. Its status is DISABLED.

                                          If the control has children, all children are also disabled.

                                          Parameter opts

                                          Configuration options that determine how the control propagates changes and emits events after the control is disabled. * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. 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 disabled. When false, no events are emitted.

                                          See Also

                                        method enable

                                        enable: (opts?: { onlySelf?: boolean; emitEvent?: boolean }) => void;
                                        • Enables the control. This means the control is included in validation checks and the aggregate value of its parent. Its status recalculates based on its value and its validators.

                                          By default, if the control has children, all children are enabled.

                                          Parameter opts

                                          Configure options that control how the control propagates changes and emits events when marked as untouched * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. 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 enabled. When false, no events are emitted.

                                          See Also

                                        method get

                                        get: (path: Array<string | number> | string) => AbstractControl | null;
                                        • Retrieves a child control given the control's name or path.

                                          Parameter path

                                          A dot-delimited string or array of string/number values that define the path to the control.

                                          ### Retrieve a nested control

                                          For example, to get a name control nested within a person sub-group:

                                          * this.form.get('person.name');

                                          -OR-

                                          * this.form.get(['person', 'name']);

                                          ### Retrieve a control in a FormArray

                                          When accessing an element inside a FormArray, you can use an element index. For example, to get a price control from the first element in an items array you can use:

                                          * this.form.get('items.0.price');

                                          -OR-

                                          * this.form.get(['items', 0, 'price']);

                                        method getError

                                        getError: (errorCode: string, path?: Array<string | number> | string) => any;
                                        • Reports error data for the control with the given path.

                                          Parameter errorCode

                                          The code of the error to check

                                          Parameter path

                                          A list of control names that designates how to move from the current control to the control that should be queried for errors.

                                          For example, for the following FormGroup:

                                          form = new FormGroup({
                                          address: new FormGroup({ street: new FormControl() })
                                          });

                                          The path to the 'street' control from the root form would be 'address' -> 'street'.

                                          It can be provided to this method in one of two formats:

                                          1. An array of string control names, e.g. ['address', 'street'] 1. A period-delimited list of control names in one string, e.g. 'address.street'

                                          Returns

                                          error data for that particular error. If the control or error is not present, null is returned.

                                        method hasError

                                        hasError: (errorCode: string, path?: Array<string | number> | string) => boolean;
                                        • Reports whether the control with the given path has the error specified.

                                          Parameter errorCode

                                          The code of the error to check

                                          Parameter path

                                          A list of control names that designates how to move from the current control to the control that should be queried for errors.

                                          For example, for the following FormGroup:

                                          form = new FormGroup({
                                          address: new FormGroup({ street: new FormControl() })
                                          });

                                          The path to the 'street' control from the root form would be 'address' -> 'street'.

                                          It can be provided to this method in one of two formats:

                                          1. An array of string control names, e.g. ['address', 'street'] 1. A period-delimited list of control names in one string, e.g. 'address.street'

                                          If no path is given, this method checks for the error on the current control.

                                          Returns

                                          whether the given error is present in the control at the given path.

                                          If the control is not present, false is returned.

                                        method markAllAsTouched

                                        markAllAsTouched: () => void;
                                        • Marks the control and all its descendant controls as touched.

                                          See Also

                                          • markAsTouched()

                                        method markAsDirty

                                        markAsDirty: (opts?: { onlySelf?: boolean }) => void;
                                        • Marks the control as dirty. A control becomes dirty when the control's value is changed through the UI; compare markAsTouched.

                                          Parameter opts

                                          Configuration options that determine how the control propagates changes and emits events after marking is applied. * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false.

                                          See Also

                                          • markAsTouched()

                                          • markAsUntouched()

                                          • markAsPristine()

                                        method markAsPending

                                        markAsPending: (opts?: { onlySelf?: boolean; emitEvent?: boolean }) => void;
                                        • Marks the control as pending.

                                          A control is pending while the control performs async validation.

                                          Parameter opts

                                          Configuration options that determine how the control propagates changes and emits events after marking is applied. * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false. * emitEvent: When true or not supplied (the default), the statusChanges observable emits an event with the latest status the control is marked pending. When false, no events are emitted.

                                          See Also

                                        method markAsPristine

                                        markAsPristine: (opts?: { onlySelf?: boolean }) => void;
                                        • Marks the control as pristine.

                                          If the control has any children, marks all children as pristine, and recalculates the pristine status of all parent controls.

                                          Parameter opts

                                          Configuration options that determine how the control emits events after marking is applied. * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false.

                                          See Also

                                          • markAsTouched()

                                          • markAsUntouched()

                                          • markAsDirty()

                                        method markAsTouched

                                        markAsTouched: (opts?: { onlySelf?: boolean }) => void;
                                        • Marks the control as touched. A control is touched by focus and blur events that do not change the value.

                                          Parameter opts

                                          Configuration options that determine how the control propagates changes and emits events after marking is applied. * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false.

                                          See Also

                                          • markAsUntouched()

                                          • markAsDirty()

                                          • markAsPristine()

                                        method markAsUntouched

                                        markAsUntouched: (opts?: { onlySelf?: boolean }) => void;
                                        • Marks the control as untouched.

                                          If the control has any children, also marks all children as untouched and recalculates the touched status of all parent controls.

                                          Parameter opts

                                          Configuration options that determine how the control propagates changes and emits events after the marking is applied. * onlySelf: When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false.

                                          See Also

                                          • markAsTouched()

                                          • markAsDirty()

                                          • markAsPristine()

                                        method patchValue

                                        abstract patchValue: (value: any, options?: Object) => void;
                                        • Patches the value of the control. Abstract method (implemented in sub-classes).

                                        method reset

                                        abstract reset: (value?: any, options?: Object) => void;
                                        • Resets the control. Abstract method (implemented in sub-classes).

                                        method setAsyncValidators

                                        setAsyncValidators: (
                                        newValidator: AsyncValidatorFn | AsyncValidatorFn[] | null
                                        ) => void;
                                        • Sets the async validators that are active on this control. Calling this overwrites any existing async validators.

                                          When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

                                        method setErrors

                                        setErrors: (
                                        errors: ValidationErrors | null,
                                        opts?: { emitEvent?: boolean }
                                        ) => void;
                                        • Sets errors on a form control when running validations manually, rather than automatically.

                                          Calling setErrors also updates the validity of the parent control.

                                          ### Manually set the errors for a control

                                          const login = new FormControl('someLogin');
                                          login.setErrors({
                                          notUnique: true
                                          });
                                          expect(login.valid).toEqual(false);
                                          expect(login.errors).toEqual({ notUnique: true });
                                          login.setValue('someOtherLogin');
                                          expect(login.valid).toEqual(true);

                                        method setParent

                                        setParent: (parent: FormGroup | FormArray) => void;
                                        • Parameter parent

                                          Sets the parent of the control

                                        method setValidators

                                        setValidators: (newValidator: ValidatorFn | ValidatorFn[] | null) => void;
                                        • Sets the synchronous validators that are active on this control. Calling this overwrites any existing sync validators.

                                          When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

                                        method setValue

                                        abstract setValue: (value: any, options?: Object) => void;
                                        • Sets the value of the control. Abstract method (implemented in sub-classes).

                                        method updateValueAndValidity

                                        updateValueAndValidity: (opts?: {
                                        onlySelf?: boolean;
                                        emitEvent?: boolean;
                                        }) => void;
                                        • Recalculates the value and validation status of the control.

                                          By default, it also updates the value and validity of its ancestors.

                                          Parameter opts

                                          Configuration options determine how the control propagates changes and emits events after updates and validity checks are applied. * onlySelf: When true, only update this control. When false or not supplied, update all direct ancestors. 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 updated. When false, no events are emitted.

                                        class AbstractControlDirective

                                        abstract class AbstractControlDirective {}
                                        • Base class for control directives.

                                          This class is only used internally in the ReactiveFormsModule and the FormsModule.

                                        property asyncValidator

                                        readonly asyncValidator: AsyncValidatorFn;
                                        • Asynchronous validator function composed of all the asynchronous validators registered with this directive.

                                        property control

                                        readonly control: AbstractControl;
                                        • A reference to the underlying control.

                                          Returns

                                          the control that backs this directive. Most properties fall through to that instance.

                                        property dirty

                                        readonly dirty: boolean;
                                        • Reports whether the control is dirty, meaning that the user has changed the value in the UI. If the control is not present, null is returned.

                                        property disabled

                                        readonly disabled: boolean;
                                        • Reports whether the control is disabled, meaning that the control is disabled in the UI and is exempt from validation checks and excluded from aggregate values of ancestor controls. If the control is not present, null is returned.

                                        property enabled

                                        readonly enabled: boolean;
                                        • Reports whether the control is enabled, meaning that the control is included in ancestor calculations of validity or value. If the control is not present, null is returned.

                                        property errors

                                        readonly errors: ValidationErrors;
                                        • Reports the control's validation errors. If the control is not present, null is returned.

                                        property invalid

                                        readonly invalid: boolean;
                                        • Reports whether the control is invalid, meaning that an error exists in the input value. If the control is not present, null is returned.

                                        property path

                                        readonly path: string[];
                                        • 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.

                                        property pending

                                        readonly pending: boolean;
                                        • Reports whether a control is pending, meaning that that async validation is occurring and errors are not yet available for the input value. If the control is not present, null is returned.

                                        property pristine

                                        readonly pristine: boolean;
                                        • Reports whether the control is pristine, meaning that the user has not yet changed the value in the UI. If the control is not present, null is returned.

                                        property status

                                        readonly status: string;
                                        • Reports the validation status of the control. Possible values include: 'VALID', 'INVALID', 'DISABLED', and 'PENDING'. If the control is not present, null is returned.

                                        property statusChanges

                                        readonly statusChanges: any;
                                        • Returns a multicasting observable that emits a validation status whenever it is calculated for the control. If the control is not present, null is returned.

                                        property touched

                                        readonly touched: boolean;
                                        • Reports whether the control is touched, meaning that the user has triggered a blur event on it. If the control is not present, null is returned.

                                        property untouched

                                        readonly untouched: boolean;
                                        • Reports whether the control is untouched, meaning that the user has not yet triggered a blur event on it. If the control is not present, null is returned.

                                        property valid

                                        readonly valid: boolean;
                                        • Reports whether the control is valid. A control is considered valid if no validation errors exist with the current value. If the control is not present, null is returned.

                                        property validator

                                        readonly validator: ValidatorFn;
                                        • Synchronous validator function composed of all the synchronous validators registered with this directive.

                                        property value

                                        readonly value: any;
                                        • Reports the value of the control if it is present, otherwise null.

                                        property valueChanges

                                        readonly valueChanges: any;
                                        • Returns a multicasting observable of value changes for the control that emits every time the value of the control changes in the UI or programmatically. If the control is not present, null is returned.

                                        method getError

                                        getError: (errorCode: string, path?: Array<string | number> | string) => any;
                                        • Reports error data for the control with the given path.

                                          Parameter errorCode

                                          The code of the error to check

                                          Parameter path

                                          A list of control names that designates how to move from the current control to the control that should be queried for errors.

                                          For example, for the following FormGroup:

                                          form = new FormGroup({
                                          address: new FormGroup({ street: new FormControl() })
                                          });

                                          The path to the 'street' control from the root form would be 'address' -> 'street'.

                                          It can be provided to this method in one of two formats:

                                          1. An array of string control names, e.g. ['address', 'street'] 1. A period-delimited list of control names in one string, e.g. 'address.street'

                                          Returns

                                          error data for that particular error. If the control or error is not present, null is returned.

                                        method hasError

                                        hasError: (errorCode: string, path?: Array<string | number> | string) => boolean;
                                        • Reports whether the control with the given path has the error specified.

                                          Parameter errorCode

                                          The code of the error to check

                                          Parameter path

                                          A list of control names that designates how to move from the current control to the control that should be queried for errors.

                                          For example, for the following FormGroup:

                                          form = new FormGroup({
                                          address: new FormGroup({ street: new FormControl() })
                                          });

                                          The path to the 'street' control from the root form would be 'address' -> 'street'.

                                          It can be provided to this method in one of two formats:

                                          1. An array of string control names, e.g. ['address', 'street'] 1. A period-delimited list of control names in one string, e.g. 'address.street'

                                          If no path is given, this method checks for the error on the current control.

                                          Returns

                                          whether the given error is present in the control at the given path.

                                          If the control is not present, false is returned.

                                        method reset

                                        reset: (value?: any) => void;
                                        • Resets the control with the provided value if the control is present.

                                        class AbstractFormGroupDirective

                                        class AbstractFormGroupDirective
                                        extends ControlContainer
                                        implements OnInit, OnDestroy {}
                                        • A base class for code shared between the NgModelGroup and FormGroupName directives.

                                        property control

                                        readonly control: FormGroup;
                                        • The FormGroup bound to this directive.

                                        property formDirective

                                        readonly formDirective: Form;
                                        • The top-level directive for this group if present, otherwise null.

                                        property path

                                        readonly path: string[];
                                        • The path to this group from the top-level directive.

                                        method ngOnDestroy

                                        ngOnDestroy: () => void;

                                        method ngOnInit

                                        ngOnInit: () => void;

                                        class CheckboxControlValueAccessor

                                        class CheckboxControlValueAccessor
                                        extends ɵangular_packages_forms_forms_g
                                        implements ControlValueAccessor {}
                                        • A ControlValueAccessor for writing a value and listening to changes on a checkbox input element.

                                          ### Using a checkbox with a reactive form.

                                          The following example shows how to use a checkbox with a reactive form.

                                          const rememberLoginControl = new FormControl();

                                          <input type="checkbox" [formControl]="rememberLoginControl">

                                          ReactiveFormsModule FormsModule

                                        method writeValue

                                        writeValue: (value: any) => void;
                                        • Sets the "checked" property on the input element.

                                        class CheckboxRequiredValidator

                                        class CheckboxRequiredValidator extends RequiredValidator {}
                                        • 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 Also

                                          • [Form Validation](guide/form-validation)

                                            ### Adding a required checkbox validator using template-driven forms

                                            The following example shows how to add a checkbox required validator to an input attached to an ngModel binding.

                                            <input type="checkbox" name="active" ngModel required>

                                            FormsModule ReactiveFormsModule

                                        method validate

                                        validate: (control: AbstractControl) => ValidationErrors | null;
                                        • Method that validates whether or not the checkbox has been checked. Returns the validation result if enabled, otherwise null.

                                        class ControlContainer

                                        abstract class ControlContainer extends AbstractControlDirective {}
                                        • A base class for directives that contain multiple registered instances of NgControl. Only used by the forms module.

                                        property formDirective

                                        readonly formDirective: Form;
                                        • The top-level form directive for the control.

                                        property name

                                        name: string | number;
                                        • The name for the control

                                        property path

                                        readonly path: string[];
                                        • The path to this group.

                                        class DefaultValueAccessor

                                        class DefaultValueAccessor
                                        extends ɵangular_packages_forms_forms_f
                                        implements ControlValueAccessor {}
                                        • The default ControlValueAccessor for writing a value and listening to changes on input elements. The accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

                                          ### Using the default value accessor

                                          The following example shows how to use an input element that activates the default value accessor (in this case, a text field).

                                          const firstNameControl = new FormControl();

                                          <input type="text" [formControl]="firstNameControl">

                                          This value accessor is used by default for <input type="text"> and <textarea> elements, but you could also use it for custom components that have similar behavior and do not require special processing. In order to attach the default value accessor to a custom element, add the ngDefaultControl attribute as shown below.

                                          <custom-input-component ngDefaultControl [(ngModel)]="value"></custom-input-component>

                                          ReactiveFormsModule FormsModule

                                        constructor

                                        constructor(renderer: any, elementRef: any, _compositionMode: boolean);

                                          method writeValue

                                          writeValue: (value: any) => void;
                                          • Sets the "value" property on the input element.

                                          class EmailValidator

                                          class EmailValidator implements Validator {}
                                          • 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.

                                            See Also

                                            • [Form Validation](guide/form-validation)

                                              ### Adding an email validator

                                              The following example shows how to add an email validator to an input attached to an ngModel binding.

                                              <input type="email" name="email" ngModel email>
                                              <input type="email" name="email" ngModel email="true">
                                              <input type="email" name="email" ngModel [email]="true">

                                              FormsModule ReactiveFormsModule

                                          method registerOnValidatorChange

                                          registerOnValidatorChange: (fn: () => void) => void;
                                          • Registers a callback function to call when the validator inputs change.

                                          method validate

                                          validate: (control: AbstractControl) => ValidationErrors | null;
                                          • Method that validates whether an email address is valid. Returns the validation result if enabled, otherwise null.

                                          class FormArray

                                          class FormArray extends AbstractControl {}
                                          • Tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances.

                                            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.

                                            FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

                                            ### Create an array of form controls

                                            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.

                                            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.

                                            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 AbstractControls used to instantiate the FormArray directly, as that result in strange and unexpected behavior such as broken change detection.

                                          constructor

                                          constructor(
                                          controls: AbstractControl[],
                                          validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions,
                                          asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]
                                          );
                                          • Creates a new FormArray instance.

                                            Parameter controls

                                            An array of child controls. Each child control is given an index where it is registered.

                                            Parameter validatorOrOpts

                                            A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

                                            Parameter asyncValidator

                                            A single async validator or array of async validator functions

                                          property controls

                                          controls: AbstractControl[];

                                            property length

                                            readonly length: number;
                                            • Length of the control array.

                                            method at

                                            at: (index: number) => AbstractControl;
                                            • Get the AbstractControl at the given index in the array.

                                              Parameter index

                                              Index in the array to retrieve the control

                                            method clear

                                            clear: (options?: { emitEvent?: boolean }) => void;
                                            • Remove all controls in the FormArray.

                                              Parameter 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.

                                              ### Remove all elements from a FormArray

                                              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:

                                              const arr = new FormArray([
                                              new FormControl(),
                                              new FormControl()
                                              ]);
                                              while (arr.length) {
                                              arr.removeAt(0);
                                              }

                                            method getRawValue

                                            getRawValue: () => any[];
                                            • The aggregate value of the array, including any disabled controls.

                                              Reports all values regardless of disabled status. For enabled controls only, the value property is the best way to get the value of the array.

                                            method insert

                                            insert: (
                                            index: number,
                                            control: AbstractControl,
                                            options?: { emitEvent?: boolean }
                                            ) => void;
                                            • Insert a new AbstractControl at the given index in the array.

                                              Parameter index

                                              Index in the array to insert the control

                                              Parameter control

                                              Form control to be inserted

                                              Parameter 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.

                                            method patchValue

                                            patchValue: (
                                            value: any[],
                                            options?: { onlySelf?: boolean; emitEvent?: boolean }
                                            ) => void;
                                            • 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.

                                              ### Patch the values for controls in a form array

                                              const arr = new FormArray([
                                              new FormControl(),
                                              new FormControl()
                                              ]);
                                              console.log(arr.value); // [null, null]
                                              arr.patchValue(['Nancy']);
                                              console.log(arr.value); // ['Nancy', null]

                                              Parameter value

                                              Array of latest values for the controls

                                              Parameter 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 method.

                                            method push

                                            push: (control: AbstractControl, options?: { emitEvent?: boolean }) => void;
                                            • Insert a new AbstractControl at the end of the array.

                                              Parameter control

                                              Form control to be inserted

                                              Parameter 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.

                                            method removeAt

                                            removeAt: (index: number, options?: { emitEvent?: boolean }) => void;
                                            • Remove the control at the given index in the array.

                                              Parameter index

                                              Index in the array to remove the control

                                              Parameter 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.

                                            method reset

                                            reset: (
                                            value?: any,
                                            options?: { onlySelf?: boolean; emitEvent?: boolean }
                                            ) => void;
                                            • 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.

                                              ### Reset the values in a form array

                                              const arr = new FormArray([
                                              new FormControl(),
                                              new FormControl()
                                              ]);
                                              arr.reset(['name', 'last name']);
                                              console.log(this.arr.value); // ['name', 'last name']

                                              ### Reset the values in a form array and the disabled status for the first control

                                              this.arr.reset([
                                              {value: 'name', disabled: true},
                                              'last'
                                              ]);
                                              console.log(this.arr.value); // ['name', 'last name']
                                              console.log(this.arr.get(0).status); // 'DISABLED'

                                              Parameter value

                                              Array of values for the controls

                                              Parameter 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 method.

                                            method setControl

                                            setControl: (
                                            index: number,
                                            control: AbstractControl,
                                            options?: { emitEvent?: boolean }
                                            ) => void;
                                            • Replace an existing control.

                                              Parameter index

                                              Index in the array to replace the control

                                              Parameter control

                                              The AbstractControl control to replace the existing control

                                              Parameter 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.

                                            method setValue

                                            setValue: (
                                            value: any[],
                                            options?: { onlySelf?: boolean; emitEvent?: boolean }
                                            ) => void;
                                            • 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.

                                              ### Set the values for the controls in the form array

                                              const arr = new FormArray([
                                              new FormControl(),
                                              new FormControl()
                                              ]);
                                              console.log(arr.value); // [null, null]
                                              arr.setValue(['Nancy', 'Drew']);
                                              console.log(arr.value); // ['Nancy', 'Drew']

                                              Parameter value

                                              Array of values for the controls

                                              Parameter 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 method.

                                            class FormArrayName

                                            class FormArrayName extends ControlContainer implements OnInit, OnDestroy {}
                                            • 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 Also

                                              • [Reactive Forms Guide](guide/reactive-forms)

                                              • AbstractControl

                                                ### Example

                                                ReactiveFormsModule

                                            constructor

                                            constructor(
                                            parent: ControlContainer,
                                            validators: (ValidatorFn | Validator)[],
                                            asyncValidators: (AsyncValidatorFn | AsyncValidator)[]
                                            );

                                              property control

                                              readonly control: FormArray;
                                              • The FormArray bound to this directive.

                                              property formDirective

                                              readonly formDirective: FormGroupDirective;
                                              • The top-level directive for this group if present, otherwise null.

                                              property name

                                              name: string | number;
                                              • 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.

                                              property path

                                              readonly path: string[];
                                              • 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 ngOnDestroy

                                              ngOnDestroy: () => void;
                                              • A lifecycle method called before the directive's instance is destroyed. For internal use only.

                                              method ngOnInit

                                              ngOnInit: () => void;
                                              • 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.

                                              class FormBuilder

                                              class FormBuilder {}
                                              • Creates an AbstractControl from a user-specified configuration.

                                                The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.

                                                See Also

                                                • [Reactive Forms Guide](/guide/reactive-forms)

                                              method array

                                              array: (
                                              controlsConfig: any[],
                                              validatorOrOpts?:
                                              | ValidatorFn
                                              | ValidatorFn[]
                                              | AbstractControlOptions
                                              | null,
                                              asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
                                              ) => FormArray;
                                              • Constructs a new FormArray from the given array of configurations, validators and options.

                                                Parameter controlsConfig

                                                An array of child controls or control configs. Each child control is given an index when it is registered.

                                                Parameter validatorOrOpts

                                                A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

                                                Parameter asyncValidator

                                                A single async validator or array of async validator functions.

                                              method control

                                              control: (
                                              formState: any,
                                              validatorOrOpts?:
                                              | ValidatorFn
                                              | ValidatorFn[]
                                              | AbstractControlOptions
                                              | null,
                                              asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
                                              ) => FormControl;
                                              • Construct a new FormControl with the given state, validators and options.

                                                Parameter formState

                                                Initializes the control with an initial state value, or with an object that contains both a value and a disabled status.

                                                Parameter validatorOrOpts

                                                A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

                                                Parameter asyncValidator

                                                A single async validator or array of async validator functions.

                                                ### Initialize a control as disabled

                                                The following example returns a control with an initial value in a disabled state.

                                              method group

                                              group: {
                                              (
                                              controlsConfig: { [key: string]: any },
                                              options?: AbstractControlOptions | null
                                              ): FormGroup;
                                              (
                                              controlsConfig: { [key: string]: any },
                                              options: { [key: string]: any }
                                              ): FormGroup;
                                              };
                                              • Construct a new FormGroup instance.

                                                Parameter controlsConfig

                                                A collection of child controls. The key for each child is the name under which it is registered.

                                                Parameter options

                                                Configuration options object for the FormGroup. The object should have the the AbstractControlOptions type and might contain the following fields: * validators: A synchronous validator function, or an array of validator functions * asyncValidators: A single async validator or array of async validator functions * updateOn: The event upon which the control should be updated (options: 'change' | 'blur' | submit')

                                              • Construct a new FormGroup instance.

                                                Parameter controlsConfig

                                                A collection of child controls. The key for each child is the name under which it is registered.

                                                Parameter options

                                                Configuration options object for the FormGroup. The legacy configuration object consists of: * validator: A synchronous validator function, or an array of validator functions * asyncValidator: A single async validator or array of async validator functions Note: the legacy format is deprecated and might be removed in one of the next major versions of Angular.

                                                Deprecated

                                                This API is not typesafe and can result in issues with Closure Compiler renaming. Use the FormBuilder#group overload with AbstractControlOptions instead. Note that AbstractControlOptions expects validators and asyncValidators to be valid validators. If you have custom validators, make sure their validation function parameter is AbstractControl and not a sub-class, such as FormGroup. These functions will be called with an object of type AbstractControl and that cannot be automatically downcast to a subclass, so TypeScript sees this as an error. For example, change the `(group: FormGroup) => ValidationErrors|null signature to be (group: AbstractControl) => ValidationErrors|null`.

                                              class FormControl

                                              class FormControl extends AbstractControl {}
                                              • Tracks the value and validation status of an individual form control.

                                                This is one of the three fundamental building blocks of Angular forms, along with FormGroup and FormArray. It extends the AbstractControl class that implements most of the base functionality for accessing the value, validation status, user interactions and events. See [usage examples below](#usage-notes).

                                                See Also

                                                • AbstractControl

                                                • [Reactive Forms Guide](guide/reactive-forms)

                                                • [Usage Notes](#usage-notes)

                                                  ### Initializing Form Controls

                                                  Instantiate a FormControl, with an initial value.

                                                  const control = new FormControl('some value');
                                                  console.log(control.value); // 'some value'

                                                  The following example initializes the control with a form state object. The value and disabled keys are required in this case.

                                                  const control = new FormControl({ value: 'n/a', disabled: true });
                                                  console.log(control.value); // 'n/a'
                                                  console.log(control.status); // 'DISABLED'

                                                  The following example initializes the control with a sync validator.

                                                  const control = new FormControl('', Validators.required);
                                                  console.log(control.value); // ''
                                                  console.log(control.status); // 'INVALID'

                                                  The following example initializes the control using an options object.

                                                  const control = new FormControl('', {
                                                  validators: Validators.required,
                                                  asyncValidators: myAsyncValidator
                                                  });

                                                  ### Configure the control to update on a blur event

                                                  Set the updateOn option to 'blur' to update on the blur event.

                                                  const control = new FormControl('', { updateOn: 'blur' });

                                                  ### Configure the control to update on a submit event

                                                  Set the updateOn option to 'submit' to update on a submit event.

                                                  const control = new FormControl('', { updateOn: 'submit' });

                                                  ### Reset the control back to an initial value

                                                  You reset to a specific form state by passing through a standalone value or a form state object that contains both a value and a disabled state (these are the only two properties that cannot be calculated).

                                                  const control = new FormControl('Nancy');
                                                  console.log(control.value); // 'Nancy'
                                                  control.reset('Drew');
                                                  console.log(control.value); // 'Drew'

                                                  ### Reset the control back to an initial value and disabled

                                                  const control = new FormControl('Nancy');
                                                  console.log(control.value); // 'Nancy'
                                                  console.log(control.status); // 'VALID'
                                                  control.reset({ value: 'Drew', disabled: true });
                                                  console.log(control.value); // 'Drew'
                                                  console.log(control.status); // 'DISABLED'

                                              constructor

                                              constructor(
                                              formState?: any,
                                              validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions,
                                              asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]
                                              );
                                              • Creates a new FormControl instance.

                                                Parameter formState

                                                Initializes the control with an initial value, or an object that defines the initial value and disabled state.

                                                Parameter validatorOrOpts

                                                A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

                                                Parameter asyncValidator

                                                A single async validator or array of async validator functions

                                              method patchValue

                                              patchValue: (
                                              value: any,
                                              options?: {
                                              onlySelf?: boolean;
                                              emitEvent?: boolean;
                                              emitModelToViewChange?: boolean;
                                              emitViewToModelChange?: boolean;
                                              }
                                              ) => void;
                                              • Patches the value of a control.

                                                This function is functionally the same as at this level. It exists for symmetry with on FormGroups and FormArrays, where it does behave differently.

                                                See Also

                                                • setValue for options

                                              method registerOnChange

                                              registerOnChange: (fn: Function) => void;
                                              • Register a listener for change events.

                                                Parameter fn

                                                The method that is called when the value changes

                                              method registerOnDisabledChange

                                              registerOnDisabledChange: (fn: (isDisabled: boolean) => void) => void;
                                              • Register a listener for disabled events.

                                                Parameter fn

                                                The method that is called when the disabled status changes.

                                              method reset

                                              reset: (
                                              formState?: any,
                                              options?: { onlySelf?: boolean; emitEvent?: boolean }
                                              ) => void;
                                              • Resets the form control, marking it pristine and untouched, and setting the value to null.

                                                Parameter formState

                                                Resets the control with an initial value, or an object that defines the initial value and disabled state.

                                                Parameter options

                                                Configuration 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.

                                              method setValue

                                              setValue: (
                                              value: any,
                                              options?: {
                                              onlySelf?: boolean;
                                              emitEvent?: boolean;
                                              emitModelToViewChange?: boolean;
                                              emitViewToModelChange?: boolean;
                                              }
                                              ) => void;
                                              • Sets a new value for the form control.

                                                Parameter value

                                                The new value for the control.

                                                Parameter options

                                                Configuration options that determine how the control propagates changes and emits events when the value changes. The configuration options are passed to the method.

                                                * 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. * emitModelToViewChange: When true or not supplied (the default), each change triggers an onChange event to update the view. * emitViewToModelChange: When true or not supplied (the default), each change triggers an ngModelChange event to update the model.

                                              class FormControlDirective

                                              class FormControlDirective extends NgControl implements OnChanges, OnDestroy {}
                                              • Synchronizes a standalone FormControl instance to a form control element.

                                                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. For details, see [Deprecated features](guide/deprecations#ngmodel-with-reactive-forms).

                                                See Also

                                                • [Reactive Forms Guide](guide/reactive-forms)

                                                • FormControl

                                                • AbstractControl

                                                  The following example shows how to register a standalone control and set its value.

                                                  ReactiveFormsModule

                                              constructor

                                              constructor(
                                              validators: (ValidatorFn | Validator)[],
                                              asyncValidators: (AsyncValidatorFn | AsyncValidator)[],
                                              valueAccessors: ControlValueAccessor[],
                                              _ngModelWarningConfig: string
                                              );

                                                property control

                                                readonly control: FormControl;
                                                • The FormControl bound to this directive.

                                                property form

                                                form: FormControl;
                                                • Tracks the FormControl instance bound to the directive.

                                                property model

                                                model: any;
                                                • Deprecated

                                                  as of v6

                                                property path

                                                readonly path: string[];
                                                • 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.

                                                property update

                                                update: any;
                                                • Deprecated

                                                  as of v6

                                                property viewModel

                                                viewModel: any;
                                                • Internal reference to the view model value.

                                                method ngOnChanges

                                                ngOnChanges: (changes: any) => void;

                                                method ngOnDestroy

                                                ngOnDestroy: () => void;

                                                method viewToModelUpdate

                                                viewToModelUpdate: (newValue: any) => void;
                                                • Sets the new value for the view model and emits an ngModelChange event.

                                                  Parameter newValue

                                                  The new value for the view model.

                                                class FormControlName

                                                class FormControlName extends NgControl implements OnChanges, OnDestroy {}
                                                • Syncs a FormControl in an existing FormGroup to a form control element by name.

                                                  See Also

                                                  • [Reactive Forms Guide](guide/reactive-forms)

                                                  • FormControl

                                                  • AbstractControl

                                                    ### Register FormControl within a group

                                                    The following example shows how to register multiple form controls within a form group and set their value.

                                                    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.

                                                    For details, see [Deprecated features](guide/deprecations#ngmodel-with-reactive-forms).

                                                    ReactiveFormsModule

                                                constructor

                                                constructor(
                                                parent: ControlContainer,
                                                validators: (ValidatorFn | Validator)[],
                                                asyncValidators: (AsyncValidatorFn | AsyncValidator)[],
                                                valueAccessors: ControlValueAccessor[],
                                                _ngModelWarningConfig: string
                                                );

                                                  property control

                                                  readonly control: FormControl;
                                                  • Tracks the FormControl instance bound to the directive.

                                                  property formDirective

                                                  readonly formDirective: any;
                                                  • The top-level directive for this group if present, otherwise null.

                                                  property model

                                                  model: any;
                                                  • Deprecated

                                                    as of v6

                                                  property name

                                                  name: string | number;
                                                  • 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.

                                                  property path

                                                  readonly path: string[];
                                                  • 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.

                                                  property update

                                                  update: any;
                                                  • Deprecated

                                                    as of v6

                                                  method ngOnChanges

                                                  ngOnChanges: (changes: any) => void;

                                                  method ngOnDestroy

                                                  ngOnDestroy: () => void;

                                                  method viewToModelUpdate

                                                  viewToModelUpdate: (newValue: any) => void;
                                                  • Sets the new value for the view model and emits an ngModelChange event.

                                                    Parameter newValue

                                                    The new value for the view model.

                                                  class FormGroup

                                                  class FormGroup extends AbstractControl {}
                                                  • Tracks the value and validity state of a group of FormControl instances.

                                                    A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid.

                                                    FormGroup is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormArray.

                                                    When instantiating a FormGroup, pass in a collection of child controls as the first argument. The key for each child registers the name for the control.

                                                    ### Create a form group with 2 controls

                                                    const form = new FormGroup({
                                                    first: new FormControl('Nancy', Validators.minLength(2)),
                                                    last: new FormControl('Drew'),
                                                    });
                                                    console.log(form.value); // {first: 'Nancy', last; 'Drew'}
                                                    console.log(form.status); // 'VALID'

                                                    ### Create a form group with a group-level validator

                                                    You include group-level validators as the second arg, or group-level async validators as the third arg. These come in handy when you want to perform validation that considers the value of more than one child control.

                                                    const form = new FormGroup({
                                                    password: new FormControl('', Validators.minLength(2)),
                                                    passwordConfirm: new FormControl('', Validators.minLength(2)),
                                                    }, passwordMatchValidator);
                                                    function passwordMatchValidator(g: FormGroup) {
                                                    return g.get('password').value === g.get('passwordConfirm').value
                                                    ? null : {'mismatch': true};
                                                    }

                                                    Like FormControl instances, you choose to pass in validators and async validators as part of an options object.

                                                    const form = new FormGroup({
                                                    password: new FormControl('')
                                                    passwordConfirm: new FormControl('')
                                                    }, { validators: passwordMatchValidator, asyncValidators: otherValidator });

                                                    ### Set the updateOn property for all controls in a form group

                                                    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 group level, all child controls default to 'blur', unless the child has explicitly specified a different updateOn value.

                                                    const c = new FormGroup({
                                                    one: new FormControl()
                                                    }, { updateOn: 'blur' });

                                                  constructor

                                                  constructor(
                                                  controls: { [key: string]: AbstractControl },
                                                  validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions,
                                                  asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]
                                                  );
                                                  • Creates a new FormGroup instance.

                                                    Parameter controls

                                                    A collection of child controls. The key for each child is the name under which it is registered.

                                                    Parameter validatorOrOpts

                                                    A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

                                                    Parameter asyncValidator

                                                    A single async validator or array of async validator functions

                                                  property controls

                                                  controls: { [key: string]: AbstractControl };

                                                    method addControl

                                                    addControl: (
                                                    name: string,
                                                    control: AbstractControl,
                                                    options?: { emitEvent?: boolean }
                                                    ) => void;
                                                    • Add a control to this group.

                                                      This method also updates the value and validity of the control.

                                                      Parameter name

                                                      The control name to add to the collection

                                                      Parameter control

                                                      Provides the control for the given name

                                                      Parameter options

                                                      Specifies whether this FormGroup 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 added. When false, no events are emitted.

                                                    method contains

                                                    contains: (controlName: string) => boolean;
                                                    • Check whether there is an enabled control with the given name in the group.

                                                      Reports false for disabled controls. If you'd like to check for existence in the group only, use instead.

                                                      Parameter controlName

                                                      The control name to check for existence in the collection

                                                      Returns

                                                      false for disabled controls, true otherwise.

                                                    method getRawValue

                                                    getRawValue: () => any;
                                                    • The aggregate value of the FormGroup, including any disabled controls.

                                                      Retrieves all values regardless of disabled status. The value property is the best way to get the value of the group, because it excludes disabled controls in the FormGroup.

                                                    method patchValue

                                                    patchValue: (
                                                    value: { [key: string]: any },
                                                    options?: { onlySelf?: boolean; emitEvent?: boolean }
                                                    ) => void;
                                                    • Patches the value of the FormGroup. It accepts an object with control names as keys, 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 group without throwing an error.

                                                      ### Patch the value for a form group

                                                      const form = new FormGroup({
                                                      first: new FormControl(),
                                                      last: new FormControl()
                                                      });
                                                      console.log(form.value); // {first: null, last: null}
                                                      form.patchValue({first: 'Nancy'});
                                                      console.log(form.value); // {first: 'Nancy', last: null}

                                                      Parameter value

                                                      The object that matches the structure of the group.

                                                      Parameter options

                                                      Configuration options that determine how the control propagates changes and emits events after the value is patched. * onlySelf: When true, each change only affects this control and not its parent. Default is true. * 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 method.

                                                    method registerControl

                                                    registerControl: (name: string, control: AbstractControl) => AbstractControl;
                                                    • Registers a control with the group's list of controls.

                                                      This method does not update the value or validity of the control. Use instead.

                                                      Parameter name

                                                      The control name to register in the collection

                                                      Parameter control

                                                      Provides the control for the given name

                                                    method removeControl

                                                    removeControl: (name: string, options?: { emitEvent?: boolean }) => void;
                                                    • Remove a control from this group.

                                                      This method also updates the value and validity of the control.

                                                      Parameter name

                                                      The control name to remove from the collection

                                                      Parameter options

                                                      Specifies whether this FormGroup 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.

                                                    method reset

                                                    reset: (
                                                    value?: any,
                                                    options?: { onlySelf?: boolean; emitEvent?: boolean }
                                                    ) => void;
                                                    • Resets the FormGroup, marks all descendants pristine and untouched and sets the value of all descendants to null.

                                                      You reset to a specific form state by passing in a map of states that matches the structure of your form, with control names as keys. The state is a standalone value or a form state object with both a value and a disabled status.

                                                      Parameter value

                                                      Resets the control with an initial value, or an object that defines the initial value and disabled state.

                                                      Parameter options

                                                      Configuration options that determine how the control propagates changes and emits events when the group is reset. * 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 method.

                                                      ### Reset the form group values

                                                      const form = new FormGroup({
                                                      first: new FormControl('first name'),
                                                      last: new FormControl('last name')
                                                      });
                                                      console.log(form.value); // {first: 'first name', last: 'last name'}
                                                      form.reset({ first: 'name', last: 'last name' });
                                                      console.log(form.value); // {first: 'name', last: 'last name'}

                                                      ### Reset the form group values and disabled status

                                                      const form = new FormGroup({
                                                      first: new FormControl('first name'),
                                                      last: new FormControl('last name')
                                                      });
                                                      form.reset({
                                                      first: {value: 'name', disabled: true},
                                                      last: 'last'
                                                      });
                                                      console.log(form.value); // {last: 'last'}
                                                      console.log(form.get('first').status); // 'DISABLED'

                                                    method setControl

                                                    setControl: (
                                                    name: string,
                                                    control: AbstractControl,
                                                    options?: { emitEvent?: boolean }
                                                    ) => void;
                                                    • Replace an existing control.

                                                      Parameter name

                                                      The control name to replace in the collection

                                                      Parameter control

                                                      Provides the control for the given name

                                                      Parameter options

                                                      Specifies whether this FormGroup instance should emit events after an existing control is replaced. * 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.

                                                    method setValue

                                                    setValue: (
                                                    value: { [key: string]: any },
                                                    options?: { onlySelf?: boolean; emitEvent?: boolean }
                                                    ) => void;
                                                    • Sets the value of the FormGroup. It accepts an object that matches the structure of the group, with control names as keys.

                                                      ### Set the complete value for the form group

                                                      const form = new FormGroup({
                                                      first: new FormControl(),
                                                      last: new FormControl()
                                                      });
                                                      console.log(form.value); // {first: null, last: null}
                                                      form.setValue({first: 'Nancy', last: 'Drew'});
                                                      console.log(form.value); // {first: 'Nancy', last: 'Drew'}

                                                      Parameter value

                                                      The new value for the control that matches the structure of the group.

                                                      Parameter options

                                                      Configuration options that determine how the control propagates changes and emits events after the value changes. The configuration options are passed to the method.

                                                      * 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.

                                                      Throws

                                                      When strict checks fail, such as setting the value of a control that doesn't exist or if you exclude a value of a control that does exist.

                                                    class FormGroupDirective

                                                    class FormGroupDirective
                                                    extends ControlContainer
                                                    implements Form, OnChanges, OnDestroy {}
                                                    • Binds an existing FormGroup to a DOM element.

                                                      This directive accepts an existing FormGroup instance. It will then use this FormGroup instance to match any child FormControl, FormGroup, and FormArray instances to child FormControlName, FormGroupName, and FormArrayName directives.

                                                      See Also

                                                      • [Reactive Forms Guide](guide/reactive-forms)

                                                      • AbstractControl

                                                        ### 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.

                                                        ReactiveFormsModule

                                                    constructor

                                                    constructor(
                                                    validators: (ValidatorFn | Validator)[],
                                                    asyncValidators: (AsyncValidatorFn | AsyncValidator)[]
                                                    );

                                                      property control

                                                      readonly control: FormGroup;
                                                      • Returns the FormGroup bound to this directive.

                                                      property directives

                                                      directives: FormControlName[];
                                                      • Tracks the list of added FormControlName instances

                                                      property form

                                                      form: FormGroup;
                                                      • Tracks the FormGroup bound to this directive.

                                                      property formDirective

                                                      readonly formDirective: Form;
                                                      • Returns this directive's instance.

                                                      property ngSubmit

                                                      ngSubmit: any;
                                                      • Emits an event when the form submission has been triggered.

                                                      property path

                                                      readonly path: string[];
                                                      • 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.

                                                      property submitted

                                                      readonly submitted: boolean;
                                                      • Reports whether the form submission has been triggered.

                                                      method addControl

                                                      addControl: (dir: FormControlName) => FormControl;
                                                      • 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.

                                                        Parameter dir

                                                        The FormControlName directive instance.

                                                      method addFormArray

                                                      addFormArray: (dir: FormArrayName) => void;
                                                      • Performs the necessary setup when a FormArrayName directive instance is added to the view.

                                                        Parameter dir

                                                        The FormArrayName directive instance.

                                                      method addFormGroup

                                                      addFormGroup: (dir: FormGroupName) => void;
                                                      • Adds a new FormGroupName directive instance to the form.

                                                        Parameter dir

                                                        The FormGroupName directive instance.

                                                      method getControl

                                                      getControl: (dir: FormControlName) => FormControl;
                                                      • Retrieves the FormControl instance from the provided FormControlName directive

                                                        Parameter dir

                                                        The FormControlName directive instance.

                                                      method getFormArray

                                                      getFormArray: (dir: FormArrayName) => FormArray;
                                                      • Retrieves the FormArray for a provided FormArrayName directive instance.

                                                        Parameter dir

                                                        The FormArrayName directive instance.

                                                      method getFormGroup

                                                      getFormGroup: (dir: FormGroupName) => FormGroup;
                                                      • Retrieves the FormGroup for a provided FormGroupName directive instance

                                                        Parameter dir

                                                        The FormGroupName directive instance.

                                                      method ngOnChanges

                                                      ngOnChanges: (changes: any) => void;

                                                      method ngOnDestroy

                                                      ngOnDestroy: () => void;

                                                      method onReset

                                                      onReset: () => void;
                                                      • Method called when the "reset" event is triggered on the form.

                                                      method onSubmit

                                                      onSubmit: ($event: Event) => boolean;
                                                      • Method called with the "submit" event is triggered on the form. Triggers the ngSubmit emitter to emit the "submit" event as its payload.

                                                        Parameter $event

                                                        The "submit" event object

                                                      method removeControl

                                                      removeControl: (dir: FormControlName) => void;
                                                      • Removes the FormControlName instance from the internal list of directives

                                                        Parameter dir

                                                        The FormControlName directive instance.

                                                      method removeFormArray

                                                      removeFormArray: (dir: FormArrayName) => void;
                                                      • Performs the necessary cleanup when a FormArrayName directive instance is removed from the view.

                                                        Parameter dir

                                                        The FormArrayName directive instance.

                                                      method removeFormGroup

                                                      removeFormGroup: (dir: FormGroupName) => void;
                                                      • Performs the necessary cleanup when a FormGroupName directive instance is removed from the view.

                                                        Parameter dir

                                                        The FormGroupName directive instance.

                                                      method resetForm

                                                      resetForm: (value?: any) => void;
                                                      • Resets the form to an initial value and resets its submitted status.

                                                        Parameter value

                                                        The new value for the form.

                                                      method updateModel

                                                      updateModel: (dir: FormControlName, value: any) => void;
                                                      • Sets the new value for the provided FormControlName directive.

                                                        Parameter dir

                                                        The FormControlName directive instance.

                                                        Parameter value

                                                        The new value for the directive's control.

                                                      class FormGroupName

                                                      class FormGroupName
                                                      extends AbstractFormGroupDirective
                                                      implements OnInit, OnDestroy {}
                                                      • Syncs a nested FormGroup to a DOM element.

                                                        This directive can only be used with a parent FormGroupDirective.

                                                        It accepts the string name of the nested FormGroup to link, and looks for a FormGroup 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 Also

                                                        • [Reactive Forms Guide](guide/reactive-forms)

                                                          ### Access the group by name

                                                          The following example uses the method to access the associated FormGroup

                                                          this.form.get('name');

                                                          ### Access individual controls in the group

                                                          The following example uses the method to access individual controls within the group using dot syntax.

                                                          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.

                                                          ReactiveFormsModule

                                                      constructor

                                                      constructor(
                                                      parent: ControlContainer,
                                                      validators: (ValidatorFn | Validator)[],
                                                      asyncValidators: (AsyncValidatorFn | AsyncValidator)[]
                                                      );

                                                        property name

                                                        name: string | number;
                                                        • 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.

                                                        class FormsModule

                                                        class FormsModule {}
                                                        • Exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module.

                                                          Providers associated with this module: * RadioControlRegistry

                                                          See Also

                                                          • [Forms Overview](/guide/forms-overview)

                                                          • [Template-driven Forms Guide](/guide/forms)

                                                        class MaxLengthValidator

                                                        class MaxLengthValidator implements Validator, OnChanges {}
                                                        • A directive that adds max length validation to controls marked with the maxlength attribute. The directive is provided with the NG_VALIDATORS multi-provider list.

                                                          See Also

                                                          • [Form Validation](guide/form-validation)

                                                            ### Adding a maximum length validator

                                                            The following example shows how to add a maximum length validator to an input attached to an ngModel binding.

                                                            <input name="firstName" ngModel maxlength="25">

                                                            ReactiveFormsModule FormsModule

                                                        property maxlength

                                                        maxlength: string | number;
                                                        • Tracks changes to the maximum length bound to this directive.

                                                        method ngOnChanges

                                                        ngOnChanges: (changes: any) => void;

                                                        method registerOnValidatorChange

                                                        registerOnValidatorChange: (fn: () => void) => void;
                                                        • Registers a callback function to call when the validator inputs change.

                                                        method validate

                                                        validate: (control: AbstractControl) => ValidationErrors | null;
                                                        • Method that validates whether the value exceeds the maximum length requirement.

                                                        class MaxValidator

                                                        class MaxValidator extends AbstractValidatorDirective implements OnChanges {}
                                                        • A directive which installs the MaxValidator for any formControlName, formControl, or control with ngModel that also has a max attribute.

                                                          See Also

                                                          • [Form Validation](guide/form-validation)

                                                            ### Adding a max validator

                                                            The following example shows how to add a max validator to an input attached to an ngModel binding.

                                                            <input type="number" ngModel max="4">

                                                            ReactiveFormsModule FormsModule

                                                        property max

                                                        max: string | number;
                                                        • Tracks changes to the max bound to this directive.

                                                        method ngOnChanges

                                                        ngOnChanges: (changes: any) => void;
                                                        • Declare ngOnChanges lifecycle hook at the main directive level (vs keeping it in base class) to avoid differences in handling inheritance of lifecycle hooks between Ivy and ViewEngine in AOT mode. This could be refactored once ViewEngine is removed.

                                                        class MinLengthValidator

                                                        class MinLengthValidator implements Validator, OnChanges {}
                                                        • 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 Also

                                                          • [Form Validation](guide/form-validation)

                                                            ### Adding a minimum length validator

                                                            The following example shows how to add a minimum length validator to an input attached to an ngModel binding.

                                                            <input name="firstName" ngModel minlength="4">

                                                            ReactiveFormsModule FormsModule

                                                        property minlength

                                                        minlength: string | number;
                                                        • Tracks changes to the minimum length bound to this directive.

                                                        method ngOnChanges

                                                        ngOnChanges: (changes: any) => void;

                                                        method registerOnValidatorChange

                                                        registerOnValidatorChange: (fn: () => void) => void;
                                                        • Registers a callback function to call when the validator inputs change.

                                                        method validate

                                                        validate: (control: AbstractControl) => ValidationErrors | null;
                                                        • Method that validates whether the value meets a minimum length requirement. Returns the validation result if enabled, otherwise null.

                                                        class MinValidator

                                                        class MinValidator extends AbstractValidatorDirective implements OnChanges {}
                                                        • A directive which installs the MinValidator for any formControlName, formControl, or control with ngModel that also has a min attribute.

                                                          See Also

                                                          • [Form Validation](guide/form-validation)

                                                            ### Adding a min validator

                                                            The following example shows how to add a min validator to an input attached to an ngModel binding.

                                                            <input type="number" ngModel min="4">

                                                            ReactiveFormsModule FormsModule

                                                        property min

                                                        min: string | number;
                                                        • Tracks changes to the min bound to this directive.

                                                        method ngOnChanges

                                                        ngOnChanges: (changes: any) => void;
                                                        • Declare ngOnChanges lifecycle hook at the main directive level (vs keeping it in base class) to avoid differences in handling inheritance of lifecycle hooks between Ivy and ViewEngine in AOT mode. This could be refactored once ViewEngine is removed.

                                                        class NgControl

                                                        abstract class NgControl extends AbstractControlDirective {}
                                                        • A base class that all FormControl-based directives extend. It binds a FormControl object to a DOM element.

                                                        property name

                                                        name: string | number;
                                                        • The name for the control

                                                        property valueAccessor

                                                        valueAccessor: ControlValueAccessor;
                                                        • The value accessor for the control

                                                        method viewToModelUpdate

                                                        abstract viewToModelUpdate: (newValue: any) => void;
                                                        • The callback method to update the model from the view when requested

                                                          Parameter newValue

                                                          The new value for the view

                                                        class NgControlStatus

                                                        class NgControlStatus extends ɵangular_packages_forms_forms_i {}
                                                        • Directive automatically applied to Angular form controls that sets CSS classes based on control status.

                                                          ### CSS classes applied

                                                          The following classes are applied as the properties become true:

                                                          * ng-valid * ng-invalid * ng-pending * ng-pristine * ng-dirty * ng-untouched * ng-touched

                                                          ReactiveFormsModule FormsModule

                                                        constructor

                                                        constructor(cd: NgControl);

                                                          class NgControlStatusGroup

                                                          class NgControlStatusGroup extends ɵangular_packages_forms_forms_i {}
                                                          • Directive automatically applied to Angular form groups that sets CSS classes based on control status (valid/invalid/dirty/etc).

                                                            See Also

                                                            • NgControlStatus

                                                              ReactiveFormsModule FormsModule

                                                          constructor

                                                          constructor(cd: ControlContainer);

                                                            class NgForm

                                                            class NgForm extends ControlContainer implements Form, AfterViewInit {}
                                                            • Creates a top-level FormGroup instance and binds it to a form to track aggregate form value and validation status.

                                                              As soon as you import the FormsModule, this directive becomes active by default on all <form> tags. You don't need to add a special selector.

                                                              You optionally export the directive into a local template variable using ngForm as the key (ex: #myForm="ngForm"). This is optional, but useful. Many properties from the underlying FormGroup instance are duplicated on the directive itself, so a reference to it gives you access to the aggregate value and validity status of the form, as well as user interaction properties like dirty and touched.

                                                              To register child controls with the form, use NgModel with a name attribute. You may use NgModelGroup to create sub-groups within the form.

                                                              If necessary, listen to the directive's ngSubmit event to be notified when the user has triggered a form submission. The ngSubmit event emits the original form submission event.

                                                              In template driven forms, all <form> tags are automatically tagged as NgForm. To import the FormsModule but skip its usage in some forms, for example, to use native HTML5 validation, add the ngNoForm and the <form> tags won't create an NgForm directive. In reactive forms, using ngNoForm is unnecessary because the <form> tags are inert. In that case, you would refrain from using the formGroup directive.

                                                              ### Listening for form submission

                                                              The following example shows how to capture the form values from the "ngSubmit" event.

                                                              ### Setting the update options

                                                              The following example shows you how to change the "updateOn" option from its default using ngFormOptions.

                                                              <form [ngFormOptions]="{updateOn: 'blur'}">
                                                              <input name="one" ngModel> <!-- this ngModel will update on blur -->
                                                              </form>

                                                              ### Native DOM validation UI

                                                              In order to prevent the native DOM form validation UI from interfering with Angular's form validation, Angular automatically adds the novalidate attribute on any <form> whenever FormModule or ReactiveFormModule are imported into the application. If you want to explicitly enable native DOM validation UI with Angular forms, you can add the ngNativeValidate attribute to the <form> element:

                                                              <form ngNativeValidate>
                                                              ...
                                                              </form>

                                                              FormsModule

                                                            constructor

                                                            constructor(
                                                            validators: (ValidatorFn | Validator)[],
                                                            asyncValidators: (AsyncValidatorFn | AsyncValidator)[]
                                                            );

                                                              property control

                                                              readonly control: FormGroup;
                                                              • The internal FormGroup instance.

                                                              property controls

                                                              readonly controls: { [key: string]: AbstractControl };
                                                              • Returns a map of the controls in this group.

                                                              property form

                                                              form: FormGroup;
                                                              • The FormGroup instance created for this form.

                                                              property formDirective

                                                              readonly formDirective: Form;
                                                              • The directive instance.

                                                              property ngSubmit

                                                              ngSubmit: any;
                                                              • Event emitter for the "ngSubmit" event

                                                              property options

                                                              options: { updateOn?: FormHooks };
                                                              • Tracks options for the NgForm instance.

                                                                **updateOn**: Sets the default updateOn value for all child NgModels below it unless explicitly set by a child NgModel using ngModelOptions). Defaults to 'change'. Possible values: 'change' | 'blur' | 'submit'.

                                                              property path

                                                              readonly path: string[];
                                                              • Returns an array representing the path to this group. Because this directive always lives at the top level of a form, it is always an empty array.

                                                              property submitted

                                                              readonly submitted: boolean;
                                                              • Returns whether the form submission has been triggered.

                                                              method addControl

                                                              addControl: (dir: NgModel) => void;
                                                              • 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.

                                                                Parameter dir

                                                                The NgModel directive instance.

                                                              method addFormGroup

                                                              addFormGroup: (dir: NgModelGroup) => void;
                                                              • Adds a new NgModelGroup directive instance to the form.

                                                                Parameter dir

                                                                The NgModelGroup directive instance.

                                                              method getControl

                                                              getControl: (dir: NgModel) => FormControl;
                                                              • Retrieves the FormControl instance from the provided NgModel directive.

                                                                Parameter dir

                                                                The NgModel directive instance.

                                                              method getFormGroup

                                                              getFormGroup: (dir: NgModelGroup) => FormGroup;
                                                              • Retrieves the FormGroup for a provided NgModelGroup directive instance

                                                                Parameter dir

                                                                The NgModelGroup directive instance.

                                                              method ngAfterViewInit

                                                              ngAfterViewInit: () => void;

                                                              method onReset

                                                              onReset: () => void;
                                                              • Method called when the "reset" event is triggered on the form.

                                                              method onSubmit

                                                              onSubmit: ($event: Event) => boolean;
                                                              • Method called when the "submit" event is triggered on the form. Triggers the ngSubmit emitter to emit the "submit" event as its payload.

                                                                Parameter $event

                                                                The "submit" event object

                                                              method removeControl

                                                              removeControl: (dir: NgModel) => void;
                                                              • Removes the NgModel instance from the internal list of directives

                                                                Parameter dir

                                                                The NgModel directive instance.

                                                              method removeFormGroup

                                                              removeFormGroup: (dir: NgModelGroup) => void;
                                                              • Removes the NgModelGroup directive instance from the form.

                                                                Parameter dir

                                                                The NgModelGroup directive instance.

                                                              method resetForm

                                                              resetForm: (value?: any) => void;
                                                              • Resets the form to an initial value and resets its submitted status.

                                                                Parameter value

                                                                The new value for the form.

                                                              method setValue

                                                              setValue: (value: { [key: string]: any }) => void;
                                                              • Sets the value for this FormGroup.

                                                                Parameter value

                                                                The new value

                                                              method updateModel

                                                              updateModel: (dir: NgControl, value: any) => void;
                                                              • Sets the new value for the provided NgControl directive.

                                                                Parameter dir

                                                                The NgControl directive instance.

                                                                Parameter value

                                                                The new value for the directive's control.

                                                              class NgModel

                                                              class NgModel extends NgControl implements OnChanges, OnDestroy {}
                                                              • Creates a FormControl instance from a domain model and binds it to a form control element.

                                                                The FormControl instance tracks the value, user interaction, and validation status of the control and keeps the view synced with the model. If used within a parent form, the directive also registers itself with the form as a child control.

                                                                This directive is used by itself or as part of a larger form. Use the ngModel selector to activate it.

                                                                It accepts a domain model as an optional Input. If you have a one-way binding to ngModel with [] syntax, changing the domain model's value in the component class sets the value in the view. If you have a two-way binding with [()] syntax (also known as 'banana-in-a-box syntax'), the value in the UI always syncs back to the domain model in your class.

                                                                To inspect the properties of the associated FormControl (like the validity state), export the directive into a local template variable using ngModel as the key (ex: #myVar="ngModel"). You can then access the control using the directive's control property. However, the most commonly used properties (like valid and dirty) also exist on the control for direct access. See a full list of properties directly available in AbstractControlDirective.

                                                                See Also

                                                                • RadioControlValueAccessor

                                                                • SelectControlValueAccessor

                                                                  ### Using ngModel on a standalone control

                                                                  The following examples show a simple standalone control using ngModel:

                                                                  When using the ngModel within <form> tags, you'll also need to supply a name attribute so that the control can be registered with the parent form under that name.

                                                                  In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you. You access its properties by exporting it into a local template variable using ngForm such as (#f="ngForm"). Use the variable where needed on form submission.

                                                                  If you do need to populate initial values into your form, using a one-way binding for ngModel tends to be sufficient as long as you use the exported form's value rather than the domain model's value on submit.

                                                                  ### Using ngModel within a form

                                                                  The following example shows controls using ngModel within a form:

                                                                  ### Using a standalone ngModel within a group

                                                                  The following example shows you how to use a standalone ngModel control within a form. This controls the display of the form, but doesn't contain form data.

                                                                  <form>
                                                                  <input name="login" ngModel placeholder="Login">
                                                                  <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
                                                                  </form>
                                                                  <!-- form value: {login: ''} -->

                                                                  ### Setting the ngModel name attribute through options

                                                                  The following example shows you an alternate way to set the name attribute. Here, an attribute identified as name is used within a custom form control component. To still be able to specify the NgModel's name, you must specify it using the ngModelOptions input instead.

                                                                  <form>
                                                                  <my-custom-form-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
                                                                  </my-custom-form-control>
                                                                  </form>
                                                                  <!-- form value: {user: ''} -->

                                                                  FormsModule

                                                              constructor

                                                              constructor(
                                                              parent: ControlContainer,
                                                              validators: (ValidatorFn | Validator)[],
                                                              asyncValidators: (AsyncValidatorFn | AsyncValidator)[],
                                                              valueAccessors: ControlValueAccessor[]
                                                              );

                                                                property control

                                                                readonly control: FormControl;

                                                                  property formDirective

                                                                  readonly formDirective: any;
                                                                  • The top-level directive for this control if present, otherwise null.

                                                                  property isDisabled

                                                                  isDisabled: boolean;
                                                                  • Tracks whether the control is disabled.

                                                                  property model

                                                                  model: any;
                                                                  • Tracks the value bound to this directive.

                                                                  property name

                                                                  name: string;
                                                                  • Tracks the name bound to the directive. If a parent form exists, it uses this name as a key to retrieve this control's value.

                                                                  property ngAcceptInputType_isDisabled

                                                                  static ngAcceptInputType_isDisabled: string | boolean;

                                                                  property options

                                                                  options: { name?: string; standalone?: boolean; updateOn?: FormHooks };
                                                                  • Tracks the configuration options for this ngModel instance.

                                                                    **name**: An alternative to setting the name attribute on the form control element. See the [example](api/forms/NgModel#using-ngmodel-on-a-standalone-control) for using NgModel as a standalone control.

                                                                    **standalone**: When set to true, the ngModel will not register itself with its parent form, and acts as if it's not in the form. Defaults to false. If no parent form exists, this option has no effect.

                                                                    **updateOn**: Defines the event upon which the form control value and validity update. Defaults to 'change'. Possible values: 'change' | 'blur' | 'submit'.

                                                                  property path

                                                                  readonly path: string[];
                                                                  • 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.

                                                                  property update

                                                                  update: any;
                                                                  • Event emitter for producing the ngModelChange event after the view model updates.

                                                                  property viewModel

                                                                  viewModel: any;
                                                                  • Internal reference to the view model value.

                                                                  method ngOnChanges

                                                                  ngOnChanges: (changes: any) => void;

                                                                  method ngOnDestroy

                                                                  ngOnDestroy: () => void;

                                                                  method viewToModelUpdate

                                                                  viewToModelUpdate: (newValue: any) => void;
                                                                  • Sets the new value for the view model and emits an ngModelChange event.

                                                                    Parameter newValue

                                                                    The new value emitted by ngModelChange.

                                                                  class NgModelGroup

                                                                  class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {}
                                                                  • Creates and binds a FormGroup instance to a DOM element.

                                                                    This directive can only be used as a child of NgForm (within <form> tags).

                                                                    Use this directive to validate a sub-group of your form separately from the rest of your form, or if some values in your domain model make more sense to consume together in a nested object.

                                                                    Provide a name for the sub-group and it will become the key for the sub-group in the form's full value. If you need direct access, export the directive into a local template variable using ngModelGroup (ex: #myGroup="ngModelGroup").

                                                                    ### Consuming controls in a grouping

                                                                    The following example shows you how to combine controls together in a sub-group of the form.

                                                                    FormsModule

                                                                  constructor

                                                                  constructor(
                                                                  parent: ControlContainer,
                                                                  validators: (ValidatorFn | Validator)[],
                                                                  asyncValidators: (AsyncValidatorFn | AsyncValidator)[]
                                                                  );

                                                                    property name

                                                                    name: string;
                                                                    • Tracks the name of the NgModelGroup bound to the directive. The name corresponds to a key in the parent NgForm.

                                                                    class NgSelectOption

                                                                    class NgSelectOption implements OnDestroy {}
                                                                    • Marks <option> as dynamic, so Angular can be notified when options change.

                                                                      See Also

                                                                      • SelectControlValueAccessor

                                                                        ReactiveFormsModule FormsModule

                                                                    constructor

                                                                    constructor(_element: any, _renderer: any, _select: SelectControlValueAccessor);

                                                                      property id

                                                                      id: string;
                                                                      • ID of the option element

                                                                      method ngOnDestroy

                                                                      ngOnDestroy: () => void;

                                                                      class NumberValueAccessor

                                                                      class NumberValueAccessor
                                                                      extends ɵangular_packages_forms_forms_g
                                                                      implements ControlValueAccessor {}
                                                                      • The ControlValueAccessor for writing a number value and listening to number input changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

                                                                        ### Using a number input with a reactive form.

                                                                        The following example shows how to use a number input with a reactive form.

                                                                        const totalCountControl = new FormControl();

                                                                        <input type="number" [formControl]="totalCountControl">

                                                                        ReactiveFormsModule FormsModule

                                                                      method registerOnChange

                                                                      registerOnChange: (fn: (_: number | null) => void) => void;
                                                                      • Registers a function called when the control value changes.

                                                                      method writeValue

                                                                      writeValue: (value: number) => void;
                                                                      • Sets the "value" property on the input element.

                                                                      class ɵangular_packages_forms_forms_ba

                                                                      class ɵNgSelectMultipleOption implements OnDestroy {}
                                                                      • Marks <option> as dynamic, so Angular can be notified when options change.

                                                                        See Also

                                                                        • SelectMultipleControlValueAccessor

                                                                          ReactiveFormsModule FormsModule

                                                                      constructor

                                                                      constructor(
                                                                      _element: any,
                                                                      _renderer: any,
                                                                      _select: SelectMultipleControlValueAccessor
                                                                      );

                                                                        property id

                                                                        id: string;

                                                                          method ngOnDestroy

                                                                          ngOnDestroy: () => void;

                                                                          class ɵangular_packages_forms_forms_bb

                                                                          class ɵNgNoValidate {}
                                                                          • Adds novalidate attribute to all forms by default.

                                                                            novalidate is used to disable browser's native form validation.

                                                                            If you want to use native validation with Angular forms, just add ngNativeValidate attribute:

                                                                            <form ngNativeValidate></form>

                                                                            ReactiveFormsModule FormsModule

                                                                          class ɵangular_packages_forms_forms_d

                                                                          class ɵInternalFormsSharedModule {}
                                                                          • Internal module used for sharing directives between FormsModule and ReactiveFormsModule

                                                                          class ɵangular_packages_forms_forms_f

                                                                          class ɵangular_packages_forms_forms_f {}
                                                                          • Base class for all ControlValueAccessor classes defined in Forms package. Contains common logic and utility functions.

                                                                            Note: this is an *internal-only* class and should not be extended or used directly in applications code.

                                                                          constructor

                                                                          constructor(_renderer: any, _elementRef: any);

                                                                            property onChange

                                                                            onChange: (_: any) => void;
                                                                            • The registered callback function called when a change or input event occurs on the input element.

                                                                            property onTouched

                                                                            onTouched: () => void;
                                                                            • The registered callback function called when a blur event occurs on the input element.

                                                                            method registerOnChange

                                                                            registerOnChange: (fn: (_: any) => {}) => void;
                                                                            • Registers a function called when the control value changes.

                                                                            method registerOnTouched

                                                                            registerOnTouched: (fn: () => void) => void;
                                                                            • Registers a function called when the control is touched.

                                                                            method setDisabledState

                                                                            setDisabledState: (isDisabled: boolean) => void;
                                                                            • Sets the "disabled" property on the range input element.

                                                                            method setProperty

                                                                            protected setProperty: (key: string, value: any) => void;
                                                                            • Helper method that sets a property on a target element using the current Renderer implementation.

                                                                            class ɵangular_packages_forms_forms_g

                                                                            class ɵangular_packages_forms_forms_g extends ɵangular_packages_forms_forms_f {}
                                                                            • Base class for all built-in ControlValueAccessor classes (except DefaultValueAccessor, which is used in case no other CVAs can be found). We use this class to distinguish between default CVA, built-in CVAs and custom CVAs, so that Forms logic can recognize built-in CVAs and treat custom ones with higher priority (when both built-in and custom CVAs are present).

                                                                              Note: this is an *internal-only* class and should not be extended or used directly in applications code.

                                                                            class ɵangular_packages_forms_forms_i

                                                                            class ɵangular_packages_forms_forms_i {}

                                                                              constructor

                                                                              constructor(cd: AbstractControlDirective);

                                                                                method is

                                                                                is: (status: AnyControlStatus) => boolean;

                                                                                  class ɵangular_packages_forms_forms_p

                                                                                  class ɵangular_packages_forms_forms_p {}
                                                                                  • Internal-only NgModule that works as a host for the RadioControlRegistry tree-shakable provider. Note: the InternalFormsSharedModule can not be used here directly, since it's declared *after* the RadioControlRegistry class and the providedIn doesn't support forwardRef logic.

                                                                                  class ɵangular_packages_forms_forms_q

                                                                                  class ɵangular_packages_forms_forms_q {}
                                                                                  • Class used by Angular to track radio buttons. For internal use only.

                                                                                  method add

                                                                                  add: (control: NgControl, accessor: RadioControlValueAccessor) => void;
                                                                                  • Adds a control to the internal registry. For internal use only.

                                                                                  method remove

                                                                                  remove: (accessor: RadioControlValueAccessor) => void;
                                                                                  • Removes a control from the internal registry. For internal use only.

                                                                                  method select

                                                                                  select: (accessor: RadioControlValueAccessor) => void;
                                                                                  • Selects a radio button. For internal use only.

                                                                                  class ɵInternalFormsSharedModule

                                                                                  class ɵInternalFormsSharedModule {}
                                                                                  • Internal module used for sharing directives between FormsModule and ReactiveFormsModule

                                                                                  class ɵNgNoValidate

                                                                                  class ɵNgNoValidate {}
                                                                                  • Adds novalidate attribute to all forms by default.

                                                                                    novalidate is used to disable browser's native form validation.

                                                                                    If you want to use native validation with Angular forms, just add ngNativeValidate attribute:

                                                                                    <form ngNativeValidate></form>

                                                                                    ReactiveFormsModule FormsModule

                                                                                  class ɵNgSelectMultipleOption

                                                                                  class ɵNgSelectMultipleOption implements OnDestroy {}
                                                                                  • Marks <option> as dynamic, so Angular can be notified when options change.

                                                                                    See Also

                                                                                    • SelectMultipleControlValueAccessor

                                                                                      ReactiveFormsModule FormsModule

                                                                                  constructor

                                                                                  constructor(
                                                                                  _element: any,
                                                                                  _renderer: any,
                                                                                  _select: SelectMultipleControlValueAccessor
                                                                                  );

                                                                                    property id

                                                                                    id: string;

                                                                                      method ngOnDestroy

                                                                                      ngOnDestroy: () => void;

                                                                                      class PatternValidator

                                                                                      class PatternValidator implements Validator, OnChanges {}
                                                                                      • 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 Also

                                                                                        • [Form Validation](guide/form-validation)

                                                                                          ### Adding a pattern validator

                                                                                          The following example shows how to add a pattern validator to an input attached to an ngModel binding.

                                                                                          <input name="firstName" ngModel pattern="[a-zA-Z ]*">

                                                                                          ReactiveFormsModule FormsModule

                                                                                      property pattern

                                                                                      pattern: string | RegExp;
                                                                                      • Tracks changes to the pattern bound to this directive.

                                                                                      method ngOnChanges

                                                                                      ngOnChanges: (changes: any) => void;

                                                                                      method registerOnValidatorChange

                                                                                      registerOnValidatorChange: (fn: () => void) => void;
                                                                                      • Registers a callback function to call when the validator inputs change.

                                                                                      method validate

                                                                                      validate: (control: AbstractControl) => ValidationErrors | null;
                                                                                      • Method that validates whether the value matches the pattern requirement.

                                                                                      class RadioControlValueAccessor

                                                                                      class RadioControlValueAccessor
                                                                                      extends ɵangular_packages_forms_forms_g
                                                                                      implements ControlValueAccessor, OnDestroy, OnInit {}
                                                                                      • The ControlValueAccessor for writing radio control values and listening to radio control changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

                                                                                        ### Using radio buttons with reactive form directives

                                                                                        The follow example shows how to use radio buttons in a reactive form. When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. Providing a name attribute is optional.

                                                                                        ReactiveFormsModule FormsModule

                                                                                      constructor

                                                                                      constructor(
                                                                                      renderer: any,
                                                                                      elementRef: any,
                                                                                      _registry: ɵangular_packages_forms_forms_q,
                                                                                      _injector: any
                                                                                      );

                                                                                        property formControlName

                                                                                        formControlName: string;
                                                                                        • Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray.

                                                                                        property name

                                                                                        name: string;
                                                                                        • Tracks the name of the radio input element.

                                                                                        property onChange

                                                                                        onChange: () => void;
                                                                                        • The registered callback function called when a change event occurs on the input element. Note: we declare onChange here (also used as host listener) as a function with no arguments to override the onChange function (which expects 1 argument) in the parent BaseControlValueAccessor class.

                                                                                        property value

                                                                                        value: any;
                                                                                        • Tracks the value of the radio input element

                                                                                        method fireUncheck

                                                                                        fireUncheck: (value: any) => void;
                                                                                        • Sets the "value" on the radio input element and unchecks it.

                                                                                          Parameter value

                                                                                        method ngOnDestroy

                                                                                        ngOnDestroy: () => void;

                                                                                        method ngOnInit

                                                                                        ngOnInit: () => void;

                                                                                        method registerOnChange

                                                                                        registerOnChange: (fn: (_: any) => {}) => void;
                                                                                        • Registers a function called when the control value changes.

                                                                                        method writeValue

                                                                                        writeValue: (value: any) => void;
                                                                                        • Sets the "checked" property value on the radio input element.

                                                                                        class RangeValueAccessor

                                                                                        class RangeValueAccessor
                                                                                        extends ɵangular_packages_forms_forms_g
                                                                                        implements ControlValueAccessor {}
                                                                                        • The ControlValueAccessor for writing a range value and listening to range input changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

                                                                                          ### Using a range input with a reactive form

                                                                                          The following example shows how to use a range input with a reactive form.

                                                                                          const ageControl = new FormControl();

                                                                                          <input type="range" [formControl]="ageControl">

                                                                                          ReactiveFormsModule FormsModule

                                                                                        method registerOnChange

                                                                                        registerOnChange: (fn: (_: number | null) => void) => void;
                                                                                        • Registers a function called when the control value changes.

                                                                                        method writeValue

                                                                                        writeValue: (value: any) => void;
                                                                                        • Sets the "value" property on the input element.

                                                                                        class ReactiveFormsModule

                                                                                        class ReactiveFormsModule {}
                                                                                        • Exports the required infrastructure and directives for reactive forms, making them available for import by NgModules that import this module.

                                                                                          Providers associated with this module: * FormBuilder * RadioControlRegistry

                                                                                          See Also

                                                                                          • [Forms Overview](guide/forms-overview)

                                                                                          • [Reactive Forms Guide](guide/reactive-forms)

                                                                                        method withConfig

                                                                                        static withConfig: (opts: {
                                                                                        warnOnNgModelWithFormControl: 'never' | 'once' | 'always';
                                                                                        }) => any;
                                                                                        • Provides options for configuring the reactive forms module.

                                                                                          Parameter opts

                                                                                          An object of configuration options * warnOnNgModelWithFormControl Configures when to emit a warning when an ngModel binding is used with reactive form directives.

                                                                                        class RequiredValidator

                                                                                        class RequiredValidator implements Validator {}
                                                                                        • 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 Also

                                                                                          • [Form Validation](guide/form-validation)

                                                                                            ### Adding a required validator using template-driven forms

                                                                                            <input name="fullName" ngModel required>

                                                                                            FormsModule ReactiveFormsModule

                                                                                        property required

                                                                                        required: string | boolean;
                                                                                        • Tracks changes to the required attribute bound to this directive.

                                                                                        method registerOnValidatorChange

                                                                                        registerOnValidatorChange: (fn: () => void) => void;
                                                                                        • Registers a callback function to call when the validator inputs change.

                                                                                        method validate

                                                                                        validate: (control: AbstractControl) => ValidationErrors | null;
                                                                                        • Method that validates whether the control is empty. Returns the validation result if enabled, otherwise null.

                                                                                        class SelectControlValueAccessor

                                                                                        class SelectControlValueAccessor
                                                                                        extends ɵangular_packages_forms_forms_g
                                                                                        implements ControlValueAccessor {}
                                                                                        • 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.

                                                                                          ### Using select controls in a reactive form

                                                                                          The following examples show how to use a select control in a reactive form.

                                                                                          ### 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.

                                                                                          ### 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.

                                                                                          const selectedCountriesControl = new FormControl();

                                                                                          <select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
                                                                                          <option *ngFor="let country of countries" [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

                                                                                          ReactiveFormsModule FormsModule

                                                                                        property value

                                                                                        value: any;

                                                                                        method registerOnChange

                                                                                        registerOnChange: (fn: (value: any) => any) => void;
                                                                                        • Registers a function called when the control value changes.

                                                                                        method writeValue

                                                                                        writeValue: (value: any) => void;
                                                                                        • Sets the "value" property on the input element. The "selectedIndex" property is also set if an ID is provided on the option element.

                                                                                        class SelectMultipleControlValueAccessor

                                                                                        class SelectMultipleControlValueAccessor
                                                                                        extends ɵangular_packages_forms_forms_g
                                                                                        implements ControlValueAccessor {}
                                                                                        • 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 Also

                                                                                          • SelectControlValueAccessor

                                                                                            ### Using a multi-select control

                                                                                            The follow example shows you how to use a multi-select control with a reactive form.

                                                                                            const countryControl = new FormControl();

                                                                                            <select multiple name="countries" [formControl]="countryControl">
                                                                                            <option *ngFor="let country of countries" [ngValue]="country">
                                                                                            {{ country.name }}
                                                                                            </option>
                                                                                            </select>

                                                                                            ### Customizing option selection

                                                                                            To customize the default option comparison algorithm, <select> supports compareWith input. See the SelectControlValueAccessor for usage.

                                                                                            ReactiveFormsModule FormsModule

                                                                                        property value

                                                                                        value: any;
                                                                                        • The current value.

                                                                                        method registerOnChange

                                                                                        registerOnChange: (fn: (value: any) => any) => void;
                                                                                        • Registers a function called when the control value changes and writes an array of the selected options.

                                                                                        method writeValue

                                                                                        writeValue: (value: any) => void;
                                                                                        • Sets the "value" property on one or of more of the select's options.

                                                                                        class Validators

                                                                                        class Validators {}
                                                                                        • Provides a set of built-in validators that can be used by form controls.

                                                                                          A validator is a function that processes a FormControl or collection of controls and returns an error map or null. A null map means that validation has passed.

                                                                                          See Also

                                                                                          • [Form Validation](/guide/form-validation)

                                                                                        method compose

                                                                                        static compose: {
                                                                                        (validators: null): null;
                                                                                        (validators: ValidatorFn[]): ValidatorFn;
                                                                                        };
                                                                                        • Compose multiple validators into a single function that returns the union of the individual error maps for the provided control.

                                                                                          Returns

                                                                                          A validator function that returns an error map with the merged error maps of the validators if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method composeAsync

                                                                                        static composeAsync: (
                                                                                        validators: (AsyncValidatorFn | null)[]
                                                                                        ) => AsyncValidatorFn | null;
                                                                                        • Compose multiple async validators into a single function that returns the union of the individual error objects for the provided control.

                                                                                          Returns

                                                                                          A validator function that returns an error map with the merged error objects of the async validators if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method email

                                                                                        static email: (control: AbstractControl) => ValidationErrors | null;
                                                                                        • Validator that requires the control's value pass an email validation test.

                                                                                          Tests the value using a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) pattern suitable for common usecases. The pattern is based on the definition of a valid email address in the [WHATWG HTML specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with some enhancements to incorporate more RFC rules (such as rules related to domain names and the lengths of different parts of the address).

                                                                                          The differences from the WHATWG version include: - Disallow local-part (the part before the @ symbol) to begin or end with a period (.). - Disallow local-part to be longer than 64 characters. - Disallow the whole address to be longer than 254 characters.

                                                                                          If this pattern does not satisfy your business needs, you can use Validators.pattern() to validate the value against a different pattern.

                                                                                          ### Validate that the field matches a valid email pattern

                                                                                          const control = new FormControl('bad@', Validators.email);
                                                                                          console.log(control.errors); // {email: true}

                                                                                          Returns

                                                                                          An error map with the email property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method max

                                                                                        static max: (max: number) => ValidatorFn;
                                                                                        • Validator that requires the control's value to be less than or equal to the provided number.

                                                                                          ### Validate against a maximum of 15

                                                                                          const control = new FormControl(16, Validators.max(15));
                                                                                          console.log(control.errors); // {max: {max: 15, actual: 16}}

                                                                                          Returns

                                                                                          A validator function that returns an error map with the max property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method maxLength

                                                                                        static maxLength: (maxLength: number) => ValidatorFn;
                                                                                        • Validator that requires the length of the control's value to be less than or equal to the provided maximum length. This validator is also provided by default if you use the the HTML5 maxlength attribute. Note that the maxLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays.

                                                                                          ### Validate that the field has maximum of 5 characters

                                                                                          const control = new FormControl('Angular', Validators.maxLength(5));
                                                                                          console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}

                                                                                          <input maxlength="5">

                                                                                          Returns

                                                                                          A validator function that returns an error map with the maxlength property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method min

                                                                                        static min: (min: number) => ValidatorFn;
                                                                                        • Validator that requires the control's value to be greater than or equal to the provided number.

                                                                                          ### Validate against a minimum of 3

                                                                                          const control = new FormControl(2, Validators.min(3));
                                                                                          console.log(control.errors); // {min: {min: 3, actual: 2}}

                                                                                          Returns

                                                                                          A validator function that returns an error map with the min property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method minLength

                                                                                        static minLength: (minLength: number) => ValidatorFn;
                                                                                        • Validator that requires the length of the control's value to be greater than or equal to the provided minimum length. This validator is also provided by default if you use the the HTML5 minlength attribute. Note that the minLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays. The minLength validator logic is also not invoked for values when their length property is 0 (for example in case of an empty string or an empty array), to support optional controls. You can use the standard required validator if empty values should not be considered valid.

                                                                                          ### Validate that the field has a minimum of 3 characters

                                                                                          const control = new FormControl('ng', Validators.minLength(3));
                                                                                          console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}

                                                                                          <input minlength="5">

                                                                                          Returns

                                                                                          A validator function that returns an error map with the minlength property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method nullValidator

                                                                                        static nullValidator: (control: AbstractControl) => ValidationErrors | null;
                                                                                        • Validator that performs no operation.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method pattern

                                                                                        static pattern: (pattern: string | RegExp) => ValidatorFn;
                                                                                        • Validator that requires the control's value to match a regex pattern. This validator is also provided by default if you use the HTML5 pattern attribute.

                                                                                          ### Validate that the field only contains letters or spaces

                                                                                          const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
                                                                                          console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}

                                                                                          <input pattern="[a-zA-Z ]*">

                                                                                          ### Pattern matching with the global or sticky flag

                                                                                          RegExp objects created with the g or y flags that are passed into Validators.pattern can produce different results on the same input when validations are run consecutively. This is due to how the behavior of RegExp.prototype.test is specified in [ECMA-262](https://tc39.es/ecma262/#sec-regexpbuiltinexec) (RegExp preserves the index of the last match when the global or sticky flag is used). Due to this behavior, it is recommended that when using Validators.pattern you **do not** pass in a RegExp object with either the global or sticky flag enabled.

                                                                                          // Not recommended (since the `g` flag is used)
                                                                                          const controlOne = new FormControl('1', Validators.pattern(/foo/g));
                                                                                          // Good
                                                                                          const controlTwo = new FormControl('1', Validators.pattern(/foo/));

                                                                                          Parameter pattern

                                                                                          A regular expression to be used as is to test the values, or a string. If a string is passed, the ^ character is prepended and the $ character is appended to the provided string (if not already present), and the resulting regular expression is used to test the values.

                                                                                          Returns

                                                                                          A validator function that returns an error map with the pattern property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method required

                                                                                        static required: (control: AbstractControl) => ValidationErrors | null;
                                                                                        • Validator that requires the control have a non-empty value.

                                                                                          ### Validate that the field is non-empty

                                                                                          const control = new FormControl('', Validators.required);
                                                                                          console.log(control.errors); // {required: true}

                                                                                          Returns

                                                                                          An error map with the required property if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        method requiredTrue

                                                                                        static requiredTrue: (control: AbstractControl) => ValidationErrors | null;
                                                                                        • Validator that requires the control's value be true. This validator is commonly used for required checkboxes.

                                                                                          ### Validate that the field value is true

                                                                                          const control = new FormControl('', Validators.requiredTrue);
                                                                                          console.log(control.errors); // {required: true}

                                                                                          Returns

                                                                                          An error map that contains the required property set to true if the validation check fails, otherwise null.

                                                                                          See Also

                                                                                          • updateValueAndValidity()

                                                                                        Interfaces

                                                                                        interface AbstractControlOptions

                                                                                        interface AbstractControlOptions {}
                                                                                        • Interface for options provided to an AbstractControl.

                                                                                        property asyncValidators

                                                                                        asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
                                                                                        • The list of async validators applied to control.

                                                                                        property updateOn

                                                                                        updateOn?: 'change' | 'blur' | 'submit';
                                                                                        • The event name for control to update upon.

                                                                                        property validators

                                                                                        validators?: ValidatorFn | ValidatorFn[] | null;
                                                                                        • The list of validators applied to a control.

                                                                                        interface AsyncValidator

                                                                                        interface AsyncValidator extends Validator {}
                                                                                        • An interface implemented by classes that perform asynchronous validation.

                                                                                          ### Provide a custom async validator directive

                                                                                          The following example implements the AsyncValidator interface to create an async validator directive with a custom error key.

                                                                                          import { of } from 'rxjs';
                                                                                          @Directive({
                                                                                          selector: '[customAsyncValidator]',
                                                                                          providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CustomAsyncValidatorDirective, multi:
                                                                                          true}]
                                                                                          })
                                                                                          class CustomAsyncValidatorDirective implements AsyncValidator {
                                                                                          validate(control: AbstractControl): Observable<ValidationErrors|null> {
                                                                                          return of({'custom': true});
                                                                                          }
                                                                                          }

                                                                                        method validate

                                                                                        validate: (
                                                                                        control: AbstractControl
                                                                                        ) => Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
                                                                                        • Method that performs async validation against the provided control.

                                                                                          Parameter control

                                                                                          The control to validate against.

                                                                                          Returns

                                                                                          A promise or observable that resolves a map of validation errors if validation fails, otherwise null.

                                                                                        interface AsyncValidatorFn

                                                                                        interface AsyncValidatorFn {}
                                                                                        • A function that receives a control and returns a Promise or observable that emits validation errors if present, otherwise null.

                                                                                        call signature

                                                                                        (control: AbstractControl):
                                                                                        | Promise<ValidationErrors | null>
                                                                                        | Observable<ValidationErrors | null>;

                                                                                          interface ControlValueAccessor

                                                                                          interface ControlValueAccessor {}
                                                                                          • Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM.

                                                                                            Implement this interface to create a custom form control directive that integrates with Angular forms.

                                                                                            See Also

                                                                                            • DefaultValueAccessor

                                                                                          method registerOnChange

                                                                                          registerOnChange: (fn: any) => void;
                                                                                          • Registers a callback function that is called when the control's value changes in the UI.

                                                                                            This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

                                                                                            When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

                                                                                            ### Store the change function

                                                                                            The following example stores the provided function as an internal method.

                                                                                            registerOnChange(fn: (_: any) => void): void {
                                                                                            this._onChange = fn;
                                                                                            }

                                                                                            When the value changes in the UI, call the registered function to allow the forms API to update itself:

                                                                                            host: {
                                                                                            '(change)': '_onChange($event.target.value)'
                                                                                            }

                                                                                            Parameter fn

                                                                                            The callback function to register

                                                                                          method registerOnTouched

                                                                                          registerOnTouched: (fn: any) => void;
                                                                                          • Registers a callback function that is called by the forms API on initialization to update the form model on blur.

                                                                                            When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

                                                                                            ### Store the callback function

                                                                                            The following example stores the provided function as an internal method.

                                                                                            registerOnTouched(fn: any): void {
                                                                                            this._onTouched = fn;
                                                                                            }

                                                                                            On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

                                                                                            host: {
                                                                                            '(blur)': '_onTouched()'
                                                                                            }

                                                                                            Parameter fn

                                                                                            The callback function to register

                                                                                          method setDisabledState

                                                                                          setDisabledState: (isDisabled: boolean) => void;
                                                                                          • Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

                                                                                            The following is an example of writing the disabled property to a native DOM element:

                                                                                            setDisabledState(isDisabled: boolean): void {
                                                                                            this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
                                                                                            }

                                                                                            Parameter isDisabled

                                                                                            The disabled status to set on the element

                                                                                          method writeValue

                                                                                          writeValue: (obj: any) => void;
                                                                                          • Writes a new value to the element.

                                                                                            This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

                                                                                            ### Write a value to the element

                                                                                            The following example writes a value to the native DOM element.

                                                                                            writeValue(value: any): void {
                                                                                            this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
                                                                                            }

                                                                                            Parameter obj

                                                                                            The new value for the element

                                                                                          interface Form

                                                                                          interface Form {}
                                                                                          • An interface implemented by FormGroupDirective and NgForm directives.

                                                                                            Only used by the ReactiveFormsModule and FormsModule.

                                                                                          method addControl

                                                                                          addControl: (dir: NgControl) => void;
                                                                                          • Add a control to this form.

                                                                                            Parameter dir

                                                                                            The control directive to add to the form.

                                                                                          method addFormGroup

                                                                                          addFormGroup: (dir: AbstractFormGroupDirective) => void;
                                                                                          • Add a group of controls to this form.

                                                                                            Parameter dir

                                                                                            : The control group directive to add.

                                                                                          method getControl

                                                                                          getControl: (dir: NgControl) => FormControl;
                                                                                          • The control directive from which to get the FormControl.

                                                                                            Parameter dir

                                                                                            : The control directive.

                                                                                          method getFormGroup

                                                                                          getFormGroup: (dir: AbstractFormGroupDirective) => FormGroup;
                                                                                          • The FormGroup associated with a particular AbstractFormGroupDirective.

                                                                                            Parameter dir

                                                                                            : The form group directive from which to get the FormGroup.

                                                                                          method removeControl

                                                                                          removeControl: (dir: NgControl) => void;
                                                                                          • Remove a control from this form.

                                                                                            Parameter dir

                                                                                            : The control directive to remove from the form.

                                                                                          method removeFormGroup

                                                                                          removeFormGroup: (dir: AbstractFormGroupDirective) => void;
                                                                                          • Remove a group of controls to this form.

                                                                                            Parameter dir

                                                                                            : The control group directive to remove.

                                                                                          method updateModel

                                                                                          updateModel: (dir: NgControl, value: any) => void;
                                                                                          • Update the model for a particular control with a new value.

                                                                                            Parameter dir

                                                                                            : The control directive to update.

                                                                                            Parameter value

                                                                                            : The new value for the control.

                                                                                          interface Validator

                                                                                          interface Validator {}
                                                                                          • An interface implemented by classes that perform synchronous validation.

                                                                                            ### Provide a custom validator

                                                                                            The following example implements the Validator interface to create a validator directive with a custom error key.

                                                                                            @Directive({
                                                                                            selector: '[customValidator]',
                                                                                            providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
                                                                                            })
                                                                                            class CustomValidatorDirective implements Validator {
                                                                                            validate(control: AbstractControl): ValidationErrors|null {
                                                                                            return {'custom': true};
                                                                                            }
                                                                                            }

                                                                                          method registerOnValidatorChange

                                                                                          registerOnValidatorChange: (fn: () => void) => void;
                                                                                          • Registers a callback function to call when the validator inputs change.

                                                                                            Parameter fn

                                                                                            The callback function

                                                                                          method validate

                                                                                          validate: (control: AbstractControl) => ValidationErrors | null;
                                                                                          • Method that performs synchronous validation against the provided control.

                                                                                            Parameter control

                                                                                            The control to validate against.

                                                                                            Returns

                                                                                            A map of validation errors if validation fails, otherwise null.

                                                                                          interface ValidatorFn

                                                                                          interface ValidatorFn {}
                                                                                          • A function that receives a control and synchronously returns a map of validation errors if present, otherwise null.

                                                                                          call signature

                                                                                          (control: AbstractControl): ValidationErrors | null;

                                                                                            Type Aliases

                                                                                            type ValidationErrors

                                                                                            type ValidationErrors = {
                                                                                            [key: string]: any;
                                                                                            };
                                                                                            • Defines the map of errors returned from failed validation checks.

                                                                                            Package Files (1)

                                                                                            Dependencies (1)

                                                                                            Dev Dependencies (0)

                                                                                            No dev dependencies.

                                                                                            Peer Dependencies (4)

                                                                                            Badge

                                                                                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular/forms.

                                                                                            • Markdown
                                                                                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@angular/forms)
                                                                                            • HTML
                                                                                              <a href="https://www.jsdocs.io/package/@angular/forms"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>