@angular/forms/fesm2022/forms.mjs.map

Angular - directives and services for creating forms

{"version":3,"file":"forms.mjs","sources":["../../../../../../packages/forms/src/directives/control_value_accessor.ts","../../../../../../packages/forms/src/directives/checkbox_value_accessor.ts","../../../../../../packages/forms/src/directives/default_value_accessor.ts","../../../../../../packages/forms/src/validators.ts","../../../../../../packages/forms/src/directives/abstract_control_directive.ts","../../../../../../packages/forms/src/directives/control_container.ts","../../../../../../packages/forms/src/directives/ng_control.ts","../../../../../../packages/forms/src/directives/ng_control_status.ts","../../../../../../packages/forms/src/directives/error_examples.ts","../../../../../../packages/forms/src/directives/reactive_errors.ts","../../../../../../packages/forms/src/model/abstract_model.ts","../../../../../../packages/forms/src/model/form_group.ts","../../../../../../packages/forms/src/directives/shared.ts","../../../../../../packages/forms/src/directives/ng_form.ts","../../../../../../packages/forms/src/util.ts","../../../../../../packages/forms/src/model/form_control.ts","../../../../../../packages/forms/src/directives/abstract_form_group_directive.ts","../../../../../../packages/forms/src/directives/template_driven_errors.ts","../../../../../../packages/forms/src/directives/ng_model_group.ts","../../../../../../packages/forms/src/directives/ng_model.ts","../../../../../../packages/forms/src/directives/ng_no_validate_directive.ts","../../../../../../packages/forms/src/directives/number_value_accessor.ts","../../../../../../packages/forms/src/directives/radio_control_value_accessor.ts","../../../../../../packages/forms/src/directives/range_value_accessor.ts","../../../../../../packages/forms/src/directives/reactive_directives/form_control_directive.ts","../../../../../../packages/forms/src/directives/reactive_directives/form_group_directive.ts","../../../../../../packages/forms/src/directives/reactive_directives/form_group_name.ts","../../../../../../packages/forms/src/directives/reactive_directives/form_control_name.ts","../../../../../../packages/forms/src/directives/select_control_value_accessor.ts","../../../../../../packages/forms/src/directives/select_multiple_control_value_accessor.ts","../../../../../../packages/forms/src/directives/validators.ts","../../../../../../packages/forms/src/directives.ts","../../../../../../packages/forms/src/model/form_array.ts","../../../../../../packages/forms/src/form_builder.ts","../../../../../../packages/forms/src/version.ts","../../../../../../packages/forms/src/form_providers.ts","../../../../../../packages/forms/src/forms.ts","../../../../../../packages/forms/public_api.ts","../../../../../../packages/forms/index.ts","../../../../../../packages/forms/forms.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, InjectionToken, Renderer2} from '@angular/core';\n\n/**\n * @description\n * Defines an interface that acts as a bridge between the Angular forms API and a\n * native element in the DOM.\n *\n * Implement this interface to create a custom form control directive\n * that integrates with Angular forms.\n *\n * @see {@link DefaultValueAccessor}\n *\n * @publicApi\n */\nexport interface ControlValueAccessor {\n  /**\n   * @description\n   * Writes a new value to the element.\n   *\n   * This method is called by the forms API to write to the view when programmatic\n   * changes from model to view are requested.\n   *\n   * @usageNotes\n   * ### Write a value to the element\n   *\n   * The following example writes a value to the native DOM element.\n   *\n   * ```ts\n   * writeValue(value: any): void {\n   *   this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);\n   * }\n   * ```\n   *\n   * @param obj The new value for the element\n   */\n  writeValue(obj: any): void;\n\n  /**\n   * @description\n   * Registers a callback function that is called when the control's value\n   * changes in the UI.\n   *\n   * This method is called by the forms API on initialization to update the form\n   * model when values propagate from the view to the model.\n   *\n   * When implementing the `registerOnChange` method in your own value accessor,\n   * save the given function so your class calls it at the appropriate time.\n   *\n   * @usageNotes\n   * ### Store the change function\n   *\n   * The following example stores the provided function as an internal method.\n   *\n   * ```ts\n   * registerOnChange(fn: (_: any) => void): void {\n   *   this._onChange = fn;\n   * }\n   * ```\n   *\n   * When the value changes in the UI, call the registered\n   * function to allow the forms API to update itself:\n   *\n   * ```ts\n   * host: {\n   *    '(change)': '_onChange($event.target.value)'\n   * }\n   * ```\n   *\n   * @param fn The callback function to register\n   */\n  registerOnChange(fn: any): void;\n\n  /**\n   * @description\n   * Registers a callback function that is called by the forms API on initialization\n   * to update the form model on blur.\n   *\n   * When implementing `registerOnTouched` in your own value accessor, save the given\n   * function so your class calls it when the control should be considered\n   * blurred or \"touched\".\n   *\n   * @usageNotes\n   * ### Store the callback function\n   *\n   * The following example stores the provided function as an internal method.\n   *\n   * ```ts\n   * registerOnTouched(fn: any): void {\n   *   this._onTouched = fn;\n   * }\n   * ```\n   *\n   * On blur (or equivalent), your class should call the registered function to allow\n   * the forms API to update itself:\n   *\n   * ```ts\n   * host: {\n   *    '(blur)': '_onTouched()'\n   * }\n   * ```\n   *\n   * @param fn The callback function to register\n   */\n  registerOnTouched(fn: any): void;\n\n  /**\n   * @description\n   * Function that is called by the forms API when the control status changes to\n   * or from 'DISABLED'. Depending on the status, it enables or disables the\n   * appropriate DOM element.\n   *\n   * @usageNotes\n   * The following is an example of writing the disabled property to a native DOM element:\n   *\n   * ```ts\n   * setDisabledState(isDisabled: boolean): void {\n   *   this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);\n   * }\n   * ```\n   *\n   * @param isDisabled The disabled status to set on the element\n   */\n  setDisabledState?(isDisabled: boolean): void;\n}\n\n/**\n * Base class for all ControlValueAccessor classes defined in Forms package.\n * Contains common logic and utility functions.\n *\n * Note: this is an *internal-only* class and should not be extended or used directly in\n * applications code.\n */\n@Directive()\nexport class BaseControlValueAccessor {\n  /**\n   * The registered callback function called when a change or input event occurs on the input\n   * element.\n   * @nodoc\n   */\n  onChange = (_: any) => {};\n\n  /**\n   * The registered callback function called when a blur event occurs on the input element.\n   * @nodoc\n   */\n  onTouched = () => {};\n\n  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}\n\n  /**\n   * Helper method that sets a property on a target element using the current Renderer\n   * implementation.\n   * @nodoc\n   */\n  protected setProperty(key: string, value: any): void {\n    this._renderer.setProperty(this._elementRef.nativeElement, key, value);\n  }\n\n  /**\n   * Registers a function called when the control is touched.\n   * @nodoc\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Registers a function called when the control value changes.\n   * @nodoc\n   */\n  registerOnChange(fn: (_: any) => {}): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Sets the \"disabled\" property on the range input element.\n   * @nodoc\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.setProperty('disabled', isDisabled);\n  }\n}\n\n/**\n * Base class for all built-in ControlValueAccessor classes (except DefaultValueAccessor, which is\n * used in case no other CVAs can be found). We use this class to distinguish between default CVA,\n * built-in CVAs and custom CVAs, so that Forms logic can recognize built-in CVAs and treat custom\n * ones with higher priority (when both built-in and custom CVAs are present).\n *\n * Note: this is an *internal-only* class and should not be extended or used directly in\n * applications code.\n */\n@Directive()\nexport class BuiltInControlValueAccessor extends BaseControlValueAccessor {\n}\n\n/**\n * Used to provide a `ControlValueAccessor` for form controls.\n *\n * See `DefaultValueAccessor` for how to implement one.\n *\n * @publicApi\n */\nexport const NG_VALUE_ACCESSOR =\n    new InjectionToken<ReadonlyArray<ControlValueAccessor>>(ngDevMode ? 'NgValueAccessor' : '');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, forwardRef, Provider} from '@angular/core';\n\nimport {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';\n\nconst CHECKBOX_VALUE_ACCESSOR: Provider = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => CheckboxControlValueAccessor),\n  multi: true,\n};\n\n/**\n * @description\n * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input\n * element.\n *\n * @usageNotes\n *\n * ### Using a checkbox with a reactive form.\n *\n * The following example shows how to use a checkbox with a reactive form.\n *\n * ```ts\n * const rememberLoginControl = new FormControl();\n * ```\n *\n * ```\n * <input type=\"checkbox\" [formControl]=\"rememberLoginControl\">\n * ```\n *\n * @ngModule ReactiveFormsModule\n * @ngModule FormsModule\n * @publicApi\n */\n@Directive({\n  selector:\n      'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',\n  host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},\n  providers: [CHECKBOX_VALUE_ACCESSOR]\n})\nexport class CheckboxControlValueAccessor extends BuiltInControlValueAccessor implements\n    ControlValueAccessor {\n  /**\n   * Sets the \"checked\" property on the input element.\n   * @nodoc\n   */\n  writeValue(value: any): void {\n    this.setProperty('checked', value);\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ɵgetDOM as getDOM} from '@angular/common';\nimport {Directive, ElementRef, forwardRef, Inject, InjectionToken, Optional, Provider, Renderer2} from '@angular/core';\n\nimport {BaseControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';\n\nexport const DEFAULT_VALUE_ACCESSOR: Provider = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => DefaultValueAccessor),\n  multi: true\n};\n\n/**\n * We must check whether the agent is Android because composition events\n * behave differently between iOS and Android.\n */\nfunction _isAndroid(): boolean {\n  const userAgent = getDOM() ? getDOM().getUserAgent() : '';\n  return /android (\\d+)/.test(userAgent.toLowerCase());\n}\n\n/**\n * @description\n * Provide this token to control if form directives buffer IME input until\n * the \"compositionend\" event occurs.\n * @publicApi\n */\nexport const COMPOSITION_BUFFER_MODE =\n    new InjectionToken<boolean>(ngDevMode ? 'CompositionEventMode' : '');\n\n/**\n * The default `ControlValueAccessor` for writing a value and listening to changes on input\n * elements. The accessor is used by the `FormControlDirective`, `FormControlName`, and\n * `NgModel` directives.\n *\n * {@searchKeywords ngDefaultControl}\n *\n * @usageNotes\n *\n * ### Using the default value accessor\n *\n * The following example shows how to use an input element that activates the default value accessor\n * (in this case, a text field).\n *\n * ```ts\n * const firstNameControl = new FormControl();\n * ```\n *\n * ```\n * <input type=\"text\" [formControl]=\"firstNameControl\">\n * ```\n *\n * This value accessor is used by default for `<input type=\"text\">` and `<textarea>` elements, but\n * you could also use it for custom components that have similar behavior and do not require special\n * processing. In order to attach the default value accessor to a custom element, add the\n * `ngDefaultControl` attribute as shown below.\n *\n * ```\n * <custom-input-component ngDefaultControl [(ngModel)]=\"value\"></custom-input-component>\n * ```\n *\n * @ngModule ReactiveFormsModule\n * @ngModule FormsModule\n * @publicApi\n */\n@Directive({\n  selector:\n      'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',\n  // TODO: vsavkin replace the above selector with the one below it once\n  // https://github.com/angular/angular/issues/3011 is implemented\n  // selector: '[ngModel],[formControl],[formControlName]',\n  host: {\n    '(input)': '$any(this)._handleInput($event.target.value)',\n    '(blur)': 'onTouched()',\n    '(compositionstart)': '$any(this)._compositionStart()',\n    '(compositionend)': '$any(this)._compositionEnd($event.target.value)'\n  },\n  providers: [DEFAULT_VALUE_ACCESSOR]\n})\nexport class DefaultValueAccessor extends BaseControlValueAccessor implements ControlValueAccessor {\n  /** Whether the user is creating a composition string (IME events). */\n  private _composing = false;\n\n  constructor(\n      renderer: Renderer2, elementRef: ElementRef,\n      @Optional() @Inject(COMPOSITION_BUFFER_MODE) private _compositionMode: boolean) {\n    super(renderer, elementRef);\n    if (this._compositionMode == null) {\n      this._compositionMode = !_isAndroid();\n    }\n  }\n\n  /**\n   * Sets the \"value\" property on the input element.\n   * @nodoc\n   */\n  writeValue(value: any): void {\n    const normalizedValue = value == null ? '' : value;\n    this.setProperty('value', normalizedValue);\n  }\n\n  /** @internal */\n  _handleInput(value: any): void {\n    if (!this._compositionMode || (this._compositionMode && !this._composing)) {\n      this.onChange(value);\n    }\n  }\n\n  /** @internal */\n  _compositionStart(): void {\n    this._composing = true;\n  }\n\n  /** @internal */\n  _compositionEnd(value: any): void {\n    this._composing = false;\n    this._compositionMode && this.onChange(value);\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {InjectionToken, ɵisPromise as isPromise, ɵisSubscribable as isSubscribable, ɵRuntimeError as RuntimeError} from '@angular/core';\nimport {forkJoin, from, Observable} from 'rxjs';\nimport {map} from 'rxjs/operators';\n\nimport {AsyncValidator, AsyncValidatorFn, ValidationErrors, Validator, ValidatorFn} from './directives/validators';\nimport {RuntimeErrorCode} from './errors';\nimport {AbstractControl} from './model/abstract_model';\n\n\nfunction isEmptyInputValue(value: any): boolean {\n  /**\n   * Check if the object is a string or array before evaluating the length attribute.\n   * This avoids falsely rejecting objects that contain a custom length attribute.\n   * For example, the object {id: 1, length: 0, width: 0} should not be returned as empty.\n   */\n  return value == null ||\n      ((typeof value === 'string' || Array.isArray(value)) && value.length === 0);\n}\n\nfunction hasValidLength(value: any): boolean {\n  // non-strict comparison is intentional, to check for both `null` and `undefined` values\n  return value != null && typeof value.length === 'number';\n}\n\n/**\n * @description\n * An `InjectionToken` for registering additional synchronous validators used with\n * `AbstractControl`s.\n *\n * @see {@link NG_ASYNC_VALIDATORS}\n *\n * @usageNotes\n *\n * ### Providing a custom validator\n *\n * The following example registers a custom validator directive. Adding the validator to the\n * existing collection of validators requires the `multi: true` option.\n *\n * ```typescript\n * @Directive({\n *   selector: '[customValidator]',\n *   providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]\n * })\n * class CustomValidatorDirective implements Validator {\n *   validate(control: AbstractControl): ValidationErrors | null {\n *     return { 'custom': true };\n *   }\n * }\n * ```\n *\n * @publicApi\n */\nexport const NG_VALIDATORS =\n    new InjectionToken<ReadonlyArray<Validator|Function>>(ngDevMode ? 'NgValidators' : '');\n\n/**\n * @description\n * An `InjectionToken` for registering additional asynchronous validators used with\n * `AbstractControl`s.\n *\n * @see {@link NG_VALIDATORS}\n *\n * @usageNotes\n *\n * ### Provide a custom async validator directive\n *\n * The following example implements the `AsyncValidator` interface to create an\n * async validator directive with a custom error key.\n *\n * ```typescript\n * @Directive({\n *   selector: '[customAsyncValidator]',\n *   providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CustomAsyncValidatorDirective, multi:\n * true}]\n * })\n * class CustomAsyncValidatorDirective implements AsyncValidator {\n *   validate(control: AbstractControl): Promise<ValidationErrors|null> {\n *     return Promise.resolve({'custom': true});\n *   }\n * }\n * ```\n *\n * @publicApi\n */\nexport const NG_ASYNC_VALIDATORS =\n    new InjectionToken<ReadonlyArray<Validator|Function>>(ngDevMode ? 'NgAsyncValidators' : '');\n\n/**\n * A regular expression that matches valid e-mail addresses.\n *\n * At a high level, this regexp matches e-mail addresses of the format `local-part@tld`, where:\n * - `local-part` consists of one or more of the allowed characters (alphanumeric and some\n *   punctuation symbols).\n * - `local-part` cannot begin or end with a period (`.`).\n * - `local-part` cannot be longer than 64 characters.\n * - `tld` consists of one or more `labels` separated by periods (`.`). For example `localhost` or\n *   `foo.com`.\n * - A `label` consists of one or more of the allowed characters (alphanumeric, dashes (`-`) and\n *   periods (`.`)).\n * - A `label` cannot begin or end with a dash (`-`) or a period (`.`).\n * - A `label` cannot be longer than 63 characters.\n * - The whole address cannot be longer than 254 characters.\n *\n * ## Implementation background\n *\n * This regexp was ported over from AngularJS (see there for git history):\n * https://github.com/angular/angular.js/blob/c133ef836/src/ng/directive/input.js#L27\n * It is based on the\n * [WHATWG version](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with\n * some enhancements to incorporate more RFC rules (such as rules related to domain names and the\n * lengths of different parts of the address). The main differences from the WHATWG version are:\n *   - Disallow `local-part` to begin or end with a period (`.`).\n *   - Disallow `local-part` length to exceed 64 characters.\n *   - Disallow total address length to exceed 254 characters.\n *\n * See [this commit](https://github.com/angular/angular.js/commit/f3f5cf72e) for more details.\n */\nconst EMAIL_REGEXP =\n    /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n/**\n * @description\n * Provides a set of built-in validators that can be used by form controls.\n *\n * A validator is a function that processes a `FormControl` or collection of\n * controls and returns an error map or null. A null map means that validation has passed.\n *\n * @see [Form Validation](/guide/form-validation)\n *\n * @publicApi\n */\nexport class Validators {\n  /**\n   * @description\n   * Validator that requires the control's value to be greater than or equal to the provided number.\n   *\n   * @usageNotes\n   *\n   * ### Validate against a minimum of 3\n   *\n   * ```typescript\n   * const control = new FormControl(2, Validators.min(3));\n   *\n   * console.log(control.errors); // {min: {min: 3, actual: 2}}\n   * ```\n   *\n   * @returns A validator function that returns an error map with the\n   * `min` property if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static min(min: number): ValidatorFn {\n    return minValidator(min);\n  }\n\n  /**\n   * @description\n   * Validator that requires the control's value to be less than or equal to the provided number.\n   *\n   * @usageNotes\n   *\n   * ### Validate against a maximum of 15\n   *\n   * ```typescript\n   * const control = new FormControl(16, Validators.max(15));\n   *\n   * console.log(control.errors); // {max: {max: 15, actual: 16}}\n   * ```\n   *\n   * @returns A validator function that returns an error map with the\n   * `max` property if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static max(max: number): ValidatorFn {\n    return maxValidator(max);\n  }\n\n  /**\n   * @description\n   * Validator that requires the control have a non-empty value.\n   *\n   * @usageNotes\n   *\n   * ### Validate that the field is non-empty\n   *\n   * ```typescript\n   * const control = new FormControl('', Validators.required);\n   *\n   * console.log(control.errors); // {required: true}\n   * ```\n   *\n   * @returns An error map with the `required` property\n   * if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static required(control: AbstractControl): ValidationErrors|null {\n    return requiredValidator(control);\n  }\n\n  /**\n   * @description\n   * Validator that requires the control's value be true. This validator is commonly\n   * used for required checkboxes.\n   *\n   * @usageNotes\n   *\n   * ### Validate that the field value is true\n   *\n   * ```typescript\n   * const control = new FormControl('some value', Validators.requiredTrue);\n   *\n   * console.log(control.errors); // {required: true}\n   * ```\n   *\n   * @returns An error map that contains the `required` property\n   * set to `true` if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static requiredTrue(control: AbstractControl): ValidationErrors|null {\n    return requiredTrueValidator(control);\n  }\n\n  /**\n   * @description\n   * Validator that requires the control's value pass an email validation test.\n   *\n   * Tests the value using a [regular\n   * expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)\n   * pattern suitable for common use cases. The pattern is based on the definition of a valid email\n   * address in the [WHATWG HTML\n   * specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with\n   * some enhancements to incorporate more RFC rules (such as rules related to domain names and the\n   * lengths of different parts of the address).\n   *\n   * The differences from the WHATWG version include:\n   * - Disallow `local-part` (the part before the `@` symbol) to begin or end with a period (`.`).\n   * - Disallow `local-part` to be longer than 64 characters.\n   * - Disallow the whole address to be longer than 254 characters.\n   *\n   * If this pattern does not satisfy your business needs, you can use `Validators.pattern()` to\n   * validate the value against a different pattern.\n   *\n   * @usageNotes\n   *\n   * ### Validate that the field matches a valid email pattern\n   *\n   * ```typescript\n   * const control = new FormControl('bad@', Validators.email);\n   *\n   * console.log(control.errors); // {email: true}\n   * ```\n   *\n   * @returns An error map with the `email` property\n   * if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static email(control: AbstractControl): ValidationErrors|null {\n    return emailValidator(control);\n  }\n\n  /**\n   * @description\n   * Validator that requires the length of the control's value to be greater than or equal\n   * to the provided minimum length. This validator is also provided by default if you use the\n   * the HTML5 `minlength` attribute. Note that the `minLength` validator is intended to be used\n   * only for types that have a numeric `length` property, such as strings or arrays. The\n   * `minLength` validator logic is also not invoked for values when their `length` property is 0\n   * (for example in case of an empty string or an empty array), to support optional controls. You\n   * can use the standard `required` validator if empty values should not be considered valid.\n   *\n   * @usageNotes\n   *\n   * ### Validate that the field has a minimum of 3 characters\n   *\n   * ```typescript\n   * const control = new FormControl('ng', Validators.minLength(3));\n   *\n   * console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}\n   * ```\n   *\n   * ```html\n   * <input minlength=\"5\">\n   * ```\n   *\n   * @returns A validator function that returns an error map with the\n   * `minlength` property if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static minLength(minLength: number): ValidatorFn {\n    return minLengthValidator(minLength);\n  }\n\n  /**\n   * @description\n   * Validator that requires the length of the control's value to be less than or equal\n   * to the provided maximum length. This validator is also provided by default if you use the\n   * the HTML5 `maxlength` attribute. Note that the `maxLength` validator is intended to be used\n   * only for types that have a numeric `length` property, such as strings or arrays.\n   *\n   * @usageNotes\n   *\n   * ### Validate that the field has maximum of 5 characters\n   *\n   * ```typescript\n   * const control = new FormControl('Angular', Validators.maxLength(5));\n   *\n   * console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}\n   * ```\n   *\n   * ```html\n   * <input maxlength=\"5\">\n   * ```\n   *\n   * @returns A validator function that returns an error map with the\n   * `maxlength` property if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static maxLength(maxLength: number): ValidatorFn {\n    return maxLengthValidator(maxLength);\n  }\n\n  /**\n   * @description\n   * Validator that requires the control's value to match a regex pattern. This validator is also\n   * provided by default if you use the HTML5 `pattern` attribute.\n   *\n   * @usageNotes\n   *\n   * ### Validate that the field only contains letters or spaces\n   *\n   * ```typescript\n   * const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));\n   *\n   * console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}\n   * ```\n   *\n   * ```html\n   * <input pattern=\"[a-zA-Z ]*\">\n   * ```\n   *\n   * ### Pattern matching with the global or sticky flag\n   *\n   * `RegExp` objects created with the `g` or `y` flags that are passed into `Validators.pattern`\n   * can produce different results on the same input when validations are run consecutively. This is\n   * due to how the behavior of `RegExp.prototype.test` is\n   * specified in [ECMA-262](https://tc39.es/ecma262/#sec-regexpbuiltinexec)\n   * (`RegExp` preserves the index of the last match when the global or sticky flag is used).\n   * Due to this behavior, it is recommended that when using\n   * `Validators.pattern` you **do not** pass in a `RegExp` object with either the global or sticky\n   * flag enabled.\n   *\n   * ```typescript\n   * // Not recommended (since the `g` flag is used)\n   * const controlOne = new FormControl('1', Validators.pattern(/foo/g));\n   *\n   * // Good\n   * const controlTwo = new FormControl('1', Validators.pattern(/foo/));\n   * ```\n   *\n   * @param pattern A regular expression to be used as is to test the values, or a string.\n   * If a string is passed, the `^` character is prepended and the `$` character is\n   * appended to the provided string (if not already present), and the resulting regular\n   * expression is used to test the values.\n   *\n   * @returns A validator function that returns an error map with the\n   * `pattern` property if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static pattern(pattern: string|RegExp): ValidatorFn {\n    return patternValidator(pattern);\n  }\n\n  /**\n   * @description\n   * Validator that performs no operation.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static nullValidator(control: AbstractControl): ValidationErrors|null {\n    return nullValidator(control);\n  }\n\n  /**\n   * @description\n   * Compose multiple validators into a single function that returns the union\n   * of the individual error maps for the provided control.\n   *\n   * @returns A validator function that returns an error map with the\n   * merged error maps of the validators if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static compose(validators: null): null;\n  static compose(validators: (ValidatorFn|null|undefined)[]): ValidatorFn|null;\n  static compose(validators: (ValidatorFn|null|undefined)[]|null): ValidatorFn|null {\n    return compose(validators);\n  }\n\n  /**\n   * @description\n   * Compose multiple async validators into a single function that returns the union\n   * of the individual error objects for the provided control.\n   *\n   * @returns A validator function that returns an error map with the\n   * merged error objects of the async validators if the validation check fails, otherwise `null`.\n   *\n   * @see {@link updateValueAndValidity()}\n   *\n   */\n  static composeAsync(validators: (AsyncValidatorFn|null)[]): AsyncValidatorFn|null {\n    return composeAsync(validators);\n  }\n}\n\n/**\n * Validator that requires the control's value to be greater than or equal to the provided number.\n * See `Validators.min` for additional information.\n */\nexport function minValidator(min: number): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors|null => {\n    if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {\n      return null;  // don't validate empty values to allow optional controls\n    }\n    const value = parseFloat(control.value);\n    // Controls with NaN values after parsing should be treated as not having a\n    // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min\n    return !isNaN(value) && value < min ? {'min': {'min': min, 'actual': control.value}} : null;\n  };\n}\n\n/**\n * Validator that requires the control's value to be less than or equal to the provided number.\n * See `Validators.max` for additional information.\n */\nexport function maxValidator(max: number): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors|null => {\n    if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {\n      return null;  // don't validate empty values to allow optional controls\n    }\n    const value = parseFloat(control.value);\n    // Controls with NaN values after parsing should be treated as not having a\n    // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max\n    return !isNaN(value) && value > max ? {'max': {'max': max, 'actual': control.value}} : null;\n  };\n}\n\n/**\n * Validator that requires the control have a non-empty value.\n * See `Validators.required` for additional information.\n */\nexport function requiredValidator(control: AbstractControl): ValidationErrors|null {\n  return isEmptyInputValue(control.value) ? {'required': true} : null;\n}\n\n/**\n * Validator that requires the control's value be true. This validator is commonly\n * used for required checkboxes.\n * See `Validators.requiredTrue` for additional information.\n */\nexport function requiredTrueValidator(control: AbstractControl): ValidationErrors|null {\n  return control.value === true ? null : {'required': true};\n}\n\n/**\n * Validator that requires the control's value pass an email validation test.\n * See `Validators.email` for additional information.\n */\nexport function emailValidator(control: AbstractControl): ValidationErrors|null {\n  if (isEmptyInputValue(control.value)) {\n    return null;  // don't validate empty values to allow optional controls\n  }\n  return EMAIL_REGEXP.test(control.value) ? null : {'email': true};\n}\n\n/**\n * Validator that requires the length of the control's value to be greater than or equal\n * to the provided minimum length. See `Validators.minLength` for additional information.\n */\nexport function minLengthValidator(minLength: number): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors|null => {\n    if (isEmptyInputValue(control.value) || !hasValidLength(control.value)) {\n      // don't validate empty values to allow optional controls\n      // don't validate values without `length` property\n      return null;\n    }\n\n    return control.value.length < minLength ?\n        {'minlength': {'requiredLength': minLength, 'actualLength': control.value.length}} :\n        null;\n  };\n}\n\n/**\n * Validator that requires the length of the control's value to be less than or equal\n * to the provided maximum length. See `Validators.maxLength` for additional information.\n */\nexport function maxLengthValidator(maxLength: number): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors|null => {\n    return hasValidLength(control.value) && control.value.length > maxLength ?\n        {'maxlength': {'requiredLength': maxLength, 'actualLength': control.value.length}} :\n        null;\n  };\n}\n\n/**\n * Validator that requires the control's value to match a regex pattern.\n * See `Validators.pattern` for additional information.\n */\nexport function patternValidator(pattern: string|RegExp): ValidatorFn {\n  if (!pattern) return nullValidator;\n  let regex: RegExp;\n  let regexStr: string;\n  if (typeof pattern === 'string') {\n    regexStr = '';\n\n    if (pattern.charAt(0) !== '^') regexStr += '^';\n\n    regexStr += pattern;\n\n    if (pattern.charAt(pattern.length - 1) !== '$') regexStr += '$';\n\n    regex = new RegExp(regexStr);\n  } else {\n    regexStr = pattern.toString();\n    regex = pattern;\n  }\n  return (control: AbstractControl): ValidationErrors|null => {\n    if (isEmptyInputValue(control.value)) {\n      return null;  // don't validate empty values to allow optional controls\n    }\n    const value: string = control.value;\n    return regex.test(value) ? null :\n                               {'pattern': {'requiredPattern': regexStr, 'actualValue': value}};\n  };\n}\n\n/**\n * Function that has `ValidatorFn` shape, but performs no operation.\n */\nexport function nullValidator(control: AbstractControl): ValidationErrors|null {\n  return null;\n}\n\nfunction isPresent(o: any): boolean {\n  return o != null;\n}\n\nexport function toObservable(value: any): Observable<any> {\n  const obs = isPromise(value) ? from(value) : value;\n  if ((typeof ngDevMode === 'undefined' || ngDevMode) && !(isSubscribable(obs))) {\n    let errorMessage = `Expected async validator to return Promise or Observable.`;\n    // A synchronous validator will return object or null.\n    if (typeof value === 'object') {\n      errorMessage +=\n          ' Are you using a synchronous validator where an async validator is expected?';\n    }\n    throw new RuntimeError(RuntimeErrorCode.WRONG_VALIDATOR_RETURN_TYPE, errorMessage);\n  }\n  return obs;\n}\n\nfunction mergeErrors(arrayOfErrors: (ValidationErrors|null)[]): ValidationErrors|null {\n  let res: {[key: string]: any} = {};\n  arrayOfErrors.forEach((errors: ValidationErrors|null) => {\n    res = errors != null ? {...res!, ...errors} : res!;\n  });\n\n  return Object.keys(res).length === 0 ? null : res;\n}\n\ntype GenericValidatorFn = (control: AbstractControl) => any;\n\nfunction executeValidators<V extends GenericValidatorFn>(\n    control: AbstractControl, validators: V[]): ReturnType<V>[] {\n  return validators.map(validator => validator(control));\n}\n\nfunction isValidatorFn<V>(validator: V|Validator|AsyncValidator): validator is V {\n  return !(validator as Validator).validate;\n}\n\n/**\n * Given the list of validators that may contain both functions as well as classes, return the list\n * of validator functions (convert validator classes into validator functions). This is needed to\n * have consistent structure in validators list before composing them.\n *\n * @param validators The set of validators that may contain validators both in plain function form\n *     as well as represented as a validator class.\n */\nexport function normalizeValidators<V>(validators: (V|Validator|AsyncValidator)[]): V[] {\n  return validators.map(validator => {\n    return isValidatorFn<V>(validator) ?\n        validator :\n        ((c: AbstractControl) => validator.validate(c)) as unknown as V;\n  });\n}\n\n/**\n * Merges synchronous validators into a single validator function.\n * See `Validators.compose` for additional information.\n */\nfunction compose(validators: (ValidatorFn|null|undefined)[]|null): ValidatorFn|null {\n  if (!validators) return null;\n  const presentValidators: ValidatorFn[] = validators.filter(isPresent) as any;\n  if (presentValidators.length == 0) return null;\n\n  return function(control: AbstractControl) {\n    return mergeErrors(executeValidators<ValidatorFn>(control, presentValidators));\n  };\n}\n\n/**\n * Accepts a list of validators of different possible shapes (`Validator` and `ValidatorFn`),\n * normalizes the list (converts everything to `ValidatorFn`) and merges them into a single\n * validator function.\n */\nexport function composeValidators(validators: Array<Validator|ValidatorFn>): ValidatorFn|null {\n  return validators != null ? compose(normalizeValidators<ValidatorFn>(validators)) : null;\n}\n\n/**\n * Merges asynchronous validators into a single validator function.\n * See `Validators.composeAsync` for additional information.\n */\nfunction composeAsync(validators: (AsyncValidatorFn|null)[]): AsyncValidatorFn|null {\n  if (!validators) return null;\n  const presentValidators: AsyncValidatorFn[] = validators.filter(isPresent) as any;\n  if (presentValidators.length == 0) return null;\n\n  return function(control: AbstractControl) {\n    const observables =\n        executeValidators<AsyncValidatorFn>(control, presentValidators).map(toObservable);\n    return forkJoin(observables).pipe(map(mergeErrors));\n  };\n}\n\n/**\n * Accepts a list of async validators of different possible shapes (`AsyncValidator` and\n * `AsyncValidatorFn`), normalizes the list (converts everything to `AsyncValidatorFn`) and merges\n * them into a single validator function.\n */\nexport function composeAsyncValidators(validators: Array<AsyncValidator|AsyncValidatorFn>):\n    AsyncValidatorFn|null {\n  return validators != null ? composeAsync(normalizeValidators<AsyncValidatorFn>(validators)) :\n                              null;\n}\n\n/**\n * Merges raw control validators with a given directive validator and returns the combined list of\n * validators as an array.\n */\nexport function mergeValidators<V>(controlValidators: V|V[]|null, dirValidator: V): V[] {\n  if (controlValidators === null) return [dirValidator];\n  return Array.isArray(controlValidators) ? [...controlValidators, dirValidator] :\n                                            [controlValidators, dirValidator];\n}\n\n/**\n * Retrieves the list of raw synchronous validators attached to a given control.\n */\nexport function getControlValidators(control: AbstractControl): ValidatorFn|ValidatorFn[]|null {\n  return (control as any)._rawValidators as ValidatorFn | ValidatorFn[] | null;\n}\n\n/**\n * Retrieves the list of raw asynchronous validators attached to a given control.\n */\nexport function getControlAsyncValidators(control: AbstractControl): AsyncValidatorFn|\n    AsyncValidatorFn[]|null {\n  return (control as any)._rawAsyncValidators as AsyncValidatorFn | AsyncValidatorFn[] | null;\n}\n\n/**\n * Accepts a singleton validator, an array, or null, and returns an array type with the provided\n * validators.\n *\n * @param validators A validator, validators, or null.\n * @returns A validators array.\n */\nexport function makeValidatorsArray<T extends ValidatorFn|AsyncValidatorFn>(validators: T|T[]|\n                                                                            null): T[] {\n  if (!validators) return [];\n  return Array.isArray(validators) ? validators : [validators];\n}\n\n/**\n * Determines whether a validator or validators array has a given validator.\n *\n * @param validators The validator or validators to compare against.\n * @param validator The validator to check.\n * @returns Whether the validator is present.\n */\nexport function hasValidator<T extends ValidatorFn|AsyncValidatorFn>(\n    validators: T|T[]|null, validator: T): boolean {\n  return Array.isArray(validators) ? validators.includes(validator) : validators === validator;\n}\n\n/**\n * Combines two arrays of validators into one. If duplicates are provided, only one will be added.\n *\n * @param validators The new validators.\n * @param currentValidators The base array of current validators.\n * @returns An array of validators.\n */\nexport function addValidators<T extends ValidatorFn|AsyncValidatorFn>(\n    validators: T|T[], currentValidators: T|T[]|null): T[] {\n  const current = makeValidatorsArray(currentValidators);\n  const validatorsToAdd = makeValidatorsArray(validators);\n  validatorsToAdd.forEach((v: T) => {\n    // Note: if there are duplicate entries in the new validators array,\n    // only the first one would be added to the current list of validators.\n    // Duplicate ones would be ignored since `hasValidator` would detect\n    // the presence of a validator function and we update the current list in place.\n    if (!hasValidator(current, v)) {\n      current.push(v);\n    }\n  });\n  return current;\n}\n\nexport function removeValidators<T extends ValidatorFn|AsyncValidatorFn>(\n    validators: T|T[], currentValidators: T|T[]|null): T[] {\n  return makeValidatorsArray(currentValidators).filter(v => !hasValidator(validators, v));\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Observable} from 'rxjs';\n\nimport {AbstractControl} from '../model/abstract_model';\nimport {composeAsyncValidators, composeValidators} from '../validators';\n\nimport {AsyncValidator, AsyncValidatorFn, ValidationErrors, Validator, ValidatorFn} from './validators';\n\n\n/**\n * @description\n * Base class for control directives.\n *\n * This class is only used internally in the `ReactiveFormsModule` and the `FormsModule`.\n *\n * @publicApi\n */\nexport abstract class AbstractControlDirective {\n  /**\n   * @description\n   * A reference to the underlying control.\n   *\n   * @returns the control that backs this directive. Most properties fall through to that instance.\n   */\n  abstract get control(): AbstractControl|null;\n\n  /**\n   * @description\n   * Reports the value of the control if it is present, otherwise null.\n   */\n  get value(): any {\n    return this.control ? this.control.value : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is valid. A control is considered valid if no\n   * validation errors exist with the current value.\n   * If the control is not present, null is returned.\n   */\n  get valid(): boolean|null {\n    return this.control ? this.control.valid : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is invalid, meaning that an error exists in the input value.\n   * If the control is not present, null is returned.\n   */\n  get invalid(): boolean|null {\n    return this.control ? this.control.invalid : null;\n  }\n\n  /**\n   * @description\n   * Reports whether a control is pending, meaning that async validation is occurring and\n   * errors are not yet available for the input value. If the control is not present, null is\n   * returned.\n   */\n  get pending(): boolean|null {\n    return this.control ? this.control.pending : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is disabled, meaning that the control is disabled\n   * in the UI and is exempt from validation checks and excluded from aggregate\n   * values of ancestor controls. If the control is not present, null is returned.\n   */\n  get disabled(): boolean|null {\n    return this.control ? this.control.disabled : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is enabled, meaning that the control is included in ancestor\n   * calculations of validity or value. If the control is not present, null is returned.\n   */\n  get enabled(): boolean|null {\n    return this.control ? this.control.enabled : null;\n  }\n\n  /**\n   * @description\n   * Reports the control's validation errors. If the control is not present, null is returned.\n   */\n  get errors(): ValidationErrors|null {\n    return this.control ? this.control.errors : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is pristine, meaning that the user has not yet changed\n   * the value in the UI. If the control is not present, null is returned.\n   */\n  get pristine(): boolean|null {\n    return this.control ? this.control.pristine : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is dirty, meaning that the user has changed\n   * the value in the UI. If the control is not present, null is returned.\n   */\n  get dirty(): boolean|null {\n    return this.control ? this.control.dirty : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is touched, meaning that the user has triggered\n   * a `blur` event on it. If the control is not present, null is returned.\n   */\n  get touched(): boolean|null {\n    return this.control ? this.control.touched : null;\n  }\n\n  /**\n   * @description\n   * Reports the validation status of the control. Possible values include:\n   * 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.\n   * If the control is not present, null is returned.\n   */\n  get status(): string|null {\n    return this.control ? this.control.status : null;\n  }\n\n  /**\n   * @description\n   * Reports whether the control is untouched, meaning that the user has not yet triggered\n   * a `blur` event on it. If the control is not present, null is returned.\n   */\n  get untouched(): boolean|null {\n    return this.control ? this.control.untouched : null;\n  }\n\n  /**\n   * @description\n   * Returns a multicasting observable that emits a validation status whenever it is\n   * calculated for the control. If the control is not present, null is returned.\n   */\n  get statusChanges(): Observable<any>|null {\n    return this.control ? this.control.statusChanges : null;\n  }\n\n  /**\n   * @description\n   * Returns a multicasting observable of value changes for the control that emits every time the\n   * value of the control changes in the UI or programmatically.\n   * If the control is not present, null is returned.\n   */\n  get valueChanges(): Observable<any>|null {\n    return this.control ? this.control.valueChanges : null;\n  }\n\n  /**\n   * @description\n   * Returns an array that represents the path from the top-level form to this control.\n   * Each index is the string name of the control on that level.\n   */\n  get path(): string[]|null {\n    return null;\n  }\n\n  /**\n   * Contains the result of merging synchronous validators into a single validator function\n   * (combined using `Validators.compose`).\n   */\n  private _composedValidatorFn: ValidatorFn|null|undefined;\n\n  /**\n   * Contains the result of merging asynchronous validators into a single validator function\n   * (combined using `Validators.composeAsync`).\n   */\n  private _composedAsyncValidatorFn: AsyncValidatorFn|null|undefined;\n\n  /**\n   * Set of synchronous validators as they were provided while calling `setValidators` function.\n   * @internal\n   */\n  _rawValidators: Array<Validator|ValidatorFn> = [];\n\n  /**\n   * Set of asynchronous validators as they were provided while calling `setAsyncValidators`\n   * function.\n   * @internal\n   */\n  _rawAsyncValidators: Array<AsyncValidator|AsyncValidatorFn> = [];\n\n  /**\n   * Sets synchronous validators for this directive.\n   * @internal\n   */\n  _setValidators(validators: Array<Validator|ValidatorFn>|undefined): void {\n    this._rawValidators = validators || [];\n    this._composedValidatorFn = composeValidators(this._rawValidators);\n  }\n\n  /**\n   * Sets asynchronous validators for this directive.\n   * @internal\n   */\n  _setAsyncValidators(validators: Array<AsyncValidator|AsyncValidatorFn>|undefined): void {\n    this._rawAsyncValidators = validators || [];\n    this._compose