UNPKG

286 kBJavaScriptView Raw
1/**
2 * @license Angular v9.0.3
3 * (c) 2010-2020 Google LLC. https://angular.io/
4 * License: MIT
5 */
6
7import { InjectionToken, forwardRef, Directive, Renderer2, ElementRef, Optional, Inject, Self, ɵisPromise, ɵisObservable, Injectable, Injector, Input, ɵlooseIdentical, Host, isDevMode, EventEmitter, SkipSelf, Output, NgModule, Version } from '@angular/core';
8import { ɵgetDOM } from '@angular/common';
9import { forkJoin, from } from 'rxjs';
10import { map } from 'rxjs/operators';
11
12/**
13 * @fileoverview added by tsickle
14 * Generated from: packages/forms/src/directives/control_value_accessor.ts
15 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
16 */
17/**
18 * \@description
19 * Defines an interface that acts as a bridge between the Angular forms API and a
20 * native element in the DOM.
21 *
22 * Implement this interface to create a custom form control directive
23 * that integrates with Angular forms.
24 *
25 * @see DefaultValueAccessor
26 *
27 * \@publicApi
28 * @record
29 */
30function ControlValueAccessor() { }
31if (false) {
32 /**
33 * \@description
34 * Writes a new value to the element.
35 *
36 * This method is called by the forms API to write to the view when programmatic
37 * changes from model to view are requested.
38 *
39 * \@usageNotes
40 * ### Write a value to the element
41 *
42 * The following example writes a value to the native DOM element.
43 *
44 * ```ts
45 * writeValue(value: any): void {
46 * this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
47 * }
48 * ```
49 *
50 * @param {?} obj The new value for the element
51 * @return {?}
52 */
53 ControlValueAccessor.prototype.writeValue = function (obj) { };
54 /**
55 * \@description
56 * Registers a callback function that is called when the control's value
57 * changes in the UI.
58 *
59 * This method is called by the forms API on initialization to update the form
60 * model when values propagate from the view to the model.
61 *
62 * When implementing the `registerOnChange` method in your own value accessor,
63 * save the given function so your class calls it at the appropriate time.
64 *
65 * \@usageNotes
66 * ### Store the change function
67 *
68 * The following example stores the provided function as an internal method.
69 *
70 * ```ts
71 * registerOnChange(fn: (_: any) => void): void {
72 * this._onChange = fn;
73 * }
74 * ```
75 *
76 * When the value changes in the UI, call the registered
77 * function to allow the forms API to update itself:
78 *
79 * ```ts
80 * host: {
81 * '(change)': '_onChange($event.target.value)'
82 * }
83 * ```
84 *
85 * @param {?} fn The callback function to register
86 * @return {?}
87 */
88 ControlValueAccessor.prototype.registerOnChange = function (fn) { };
89 /**
90 * \@description
91 * Registers a callback function is called by the forms API on initialization
92 * to update the form model on blur.
93 *
94 * When implementing `registerOnTouched` in your own value accessor, save the given
95 * function so your class calls it when the control should be considered
96 * blurred or "touched".
97 *
98 * \@usageNotes
99 * ### Store the callback function
100 *
101 * The following example stores the provided function as an internal method.
102 *
103 * ```ts
104 * registerOnTouched(fn: any): void {
105 * this._onTouched = fn;
106 * }
107 * ```
108 *
109 * On blur (or equivalent), your class should call the registered function to allow
110 * the forms API to update itself:
111 *
112 * ```ts
113 * host: {
114 * '(blur)': '_onTouched()'
115 * }
116 * ```
117 *
118 * @param {?} fn The callback function to register
119 * @return {?}
120 */
121 ControlValueAccessor.prototype.registerOnTouched = function (fn) { };
122 /**
123 * \@description
124 * Function that is called by the forms API when the control status changes to
125 * or from 'DISABLED'. Depending on the status, it enables or disables the
126 * appropriate DOM element.
127 *
128 * \@usageNotes
129 * The following is an example of writing the disabled property to a native DOM element:
130 *
131 * ```ts
132 * setDisabledState(isDisabled: boolean): void {
133 * this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
134 * }
135 * ```
136 *
137 * @param {?} isDisabled The disabled status to set on the element
138 * @return {?}
139 */
140 ControlValueAccessor.prototype.setDisabledState = function (isDisabled) { };
141}
142/**
143 * Used to provide a `ControlValueAccessor` for form controls.
144 *
145 * See `DefaultValueAccessor` for how to implement one.
146 *
147 * \@publicApi
148 * @type {?}
149 */
150const NG_VALUE_ACCESSOR = new InjectionToken('NgValueAccessor');
151
152/**
153 * @fileoverview added by tsickle
154 * Generated from: packages/forms/src/directives/checkbox_value_accessor.ts
155 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
156 */
157/** @type {?} */
158const CHECKBOX_VALUE_ACCESSOR = {
159 provide: NG_VALUE_ACCESSOR,
160 useExisting: forwardRef((/**
161 * @return {?}
162 */
163 () => CheckboxControlValueAccessor)),
164 multi: true,
165};
166/**
167 * \@description
168 * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input
169 * element.
170 *
171 * \@usageNotes
172 *
173 * ### Using a checkbox with a reactive form.
174 *
175 * The following example shows how to use a checkbox with a reactive form.
176 *
177 * ```ts
178 * const rememberLoginControl = new FormControl();
179 * ```
180 *
181 * ```
182 * <input type="checkbox" [formControl]="rememberLoginControl">
183 * ```
184 *
185 * \@ngModule ReactiveFormsModule
186 * \@ngModule FormsModule
187 * \@publicApi
188 */
189class CheckboxControlValueAccessor {
190 /**
191 * @param {?} _renderer
192 * @param {?} _elementRef
193 */
194 constructor(_renderer, _elementRef) {
195 this._renderer = _renderer;
196 this._elementRef = _elementRef;
197 /**
198 * \@description
199 * The registered callback function called when a change event occurs on the input element.
200 */
201 this.onChange = (/**
202 * @param {?} _
203 * @return {?}
204 */
205 (_) => { });
206 /**
207 * \@description
208 * The registered callback function called when a blur event occurs on the input element.
209 */
210 this.onTouched = (/**
211 * @return {?}
212 */
213 () => { });
214 }
215 /**
216 * Sets the "checked" property on the input element.
217 *
218 * @param {?} value The checked value
219 * @return {?}
220 */
221 writeValue(value) {
222 this._renderer.setProperty(this._elementRef.nativeElement, 'checked', value);
223 }
224 /**
225 * \@description
226 * Registers a function called when the control value changes.
227 *
228 * @param {?} fn The callback function
229 * @return {?}
230 */
231 registerOnChange(fn) { this.onChange = fn; }
232 /**
233 * \@description
234 * Registers a function called when the control is touched.
235 *
236 * @param {?} fn The callback function
237 * @return {?}
238 */
239 registerOnTouched(fn) { this.onTouched = fn; }
240 /**
241 * Sets the "disabled" property on the input element.
242 *
243 * @param {?} isDisabled The disabled value
244 * @return {?}
245 */
246 setDisabledState(isDisabled) {
247 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
248 }
249}
250CheckboxControlValueAccessor.decorators = [
251 { type: Directive, args: [{
252 selector: 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
253 host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
254 providers: [CHECKBOX_VALUE_ACCESSOR]
255 },] }
256];
257/** @nocollapse */
258CheckboxControlValueAccessor.ctorParameters = () => [
259 { type: Renderer2 },
260 { type: ElementRef }
261];
262if (false) {
263 /**
264 * \@description
265 * The registered callback function called when a change event occurs on the input element.
266 * @type {?}
267 */
268 CheckboxControlValueAccessor.prototype.onChange;
269 /**
270 * \@description
271 * The registered callback function called when a blur event occurs on the input element.
272 * @type {?}
273 */
274 CheckboxControlValueAccessor.prototype.onTouched;
275 /**
276 * @type {?}
277 * @private
278 */
279 CheckboxControlValueAccessor.prototype._renderer;
280 /**
281 * @type {?}
282 * @private
283 */
284 CheckboxControlValueAccessor.prototype._elementRef;
285}
286
287/**
288 * @fileoverview added by tsickle
289 * Generated from: packages/forms/src/directives/default_value_accessor.ts
290 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
291 */
292/** @type {?} */
293const DEFAULT_VALUE_ACCESSOR = {
294 provide: NG_VALUE_ACCESSOR,
295 useExisting: forwardRef((/**
296 * @return {?}
297 */
298 () => DefaultValueAccessor)),
299 multi: true
300};
301/**
302 * We must check whether the agent is Android because composition events
303 * behave differently between iOS and Android.
304 * @return {?}
305 */
306function _isAndroid() {
307 /** @type {?} */
308 const userAgent = ɵgetDOM() ? ɵgetDOM().getUserAgent() : '';
309 return /android (\d+)/.test(userAgent.toLowerCase());
310}
311/**
312 * \@description
313 * Provide this token to control if form directives buffer IME input until
314 * the "compositionend" event occurs.
315 * \@publicApi
316 * @type {?}
317 */
318const COMPOSITION_BUFFER_MODE = new InjectionToken('CompositionEventMode');
319/**
320 * \@description
321 * The default `ControlValueAccessor` for writing a value and listening to changes on input
322 * elements. The accessor is used by the `FormControlDirective`, `FormControlName`, and
323 * `NgModel` directives.
324 *
325 * \@usageNotes
326 *
327 * ### Using the default value accessor
328 *
329 * The following example shows how to use an input element that activates the default value accessor
330 * (in this case, a text field).
331 *
332 * ```ts
333 * const firstNameControl = new FormControl();
334 * ```
335 *
336 * ```
337 * <input type="text" [formControl]="firstNameControl">
338 * ```
339 *
340 * \@ngModule ReactiveFormsModule
341 * \@ngModule FormsModule
342 * \@publicApi
343 */
344class DefaultValueAccessor {
345 /**
346 * @param {?} _renderer
347 * @param {?} _elementRef
348 * @param {?} _compositionMode
349 */
350 constructor(_renderer, _elementRef, _compositionMode) {
351 this._renderer = _renderer;
352 this._elementRef = _elementRef;
353 this._compositionMode = _compositionMode;
354 /**
355 * \@description
356 * The registered callback function called when an input event occurs on the input element.
357 */
358 this.onChange = (/**
359 * @param {?} _
360 * @return {?}
361 */
362 (_) => { });
363 /**
364 * \@description
365 * The registered callback function called when a blur event occurs on the input element.
366 */
367 this.onTouched = (/**
368 * @return {?}
369 */
370 () => { });
371 /**
372 * Whether the user is creating a composition string (IME events).
373 */
374 this._composing = false;
375 if (this._compositionMode == null) {
376 this._compositionMode = !_isAndroid();
377 }
378 }
379 /**
380 * Sets the "value" property on the input element.
381 *
382 * @param {?} value The checked value
383 * @return {?}
384 */
385 writeValue(value) {
386 /** @type {?} */
387 const normalizedValue = value == null ? '' : value;
388 this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
389 }
390 /**
391 * \@description
392 * Registers a function called when the control value changes.
393 *
394 * @param {?} fn The callback function
395 * @return {?}
396 */
397 registerOnChange(fn) { this.onChange = fn; }
398 /**
399 * \@description
400 * Registers a function called when the control is touched.
401 *
402 * @param {?} fn The callback function
403 * @return {?}
404 */
405 registerOnTouched(fn) { this.onTouched = fn; }
406 /**
407 * Sets the "disabled" property on the input element.
408 *
409 * @param {?} isDisabled The disabled value
410 * @return {?}
411 */
412 setDisabledState(isDisabled) {
413 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
414 }
415 /**
416 * \@internal
417 * @param {?} value
418 * @return {?}
419 */
420 _handleInput(value) {
421 if (!this._compositionMode || (this._compositionMode && !this._composing)) {
422 this.onChange(value);
423 }
424 }
425 /**
426 * \@internal
427 * @return {?}
428 */
429 _compositionStart() { this._composing = true; }
430 /**
431 * \@internal
432 * @param {?} value
433 * @return {?}
434 */
435 _compositionEnd(value) {
436 this._composing = false;
437 this._compositionMode && this.onChange(value);
438 }
439}
440DefaultValueAccessor.decorators = [
441 { type: Directive, args: [{
442 selector: 'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
443 // TODO: vsavkin replace the above selector with the one below it once
444 // https://github.com/angular/angular/issues/3011 is implemented
445 // selector: '[ngModel],[formControl],[formControlName]',
446 host: {
447 '(input)': '$any(this)._handleInput($event.target.value)',
448 '(blur)': 'onTouched()',
449 '(compositionstart)': '$any(this)._compositionStart()',
450 '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
451 },
452 providers: [DEFAULT_VALUE_ACCESSOR]
453 },] }
454];
455/** @nocollapse */
456DefaultValueAccessor.ctorParameters = () => [
457 { type: Renderer2 },
458 { type: ElementRef },
459 { type: Boolean, decorators: [{ type: Optional }, { type: Inject, args: [COMPOSITION_BUFFER_MODE,] }] }
460];
461if (false) {
462 /**
463 * \@description
464 * The registered callback function called when an input event occurs on the input element.
465 * @type {?}
466 */
467 DefaultValueAccessor.prototype.onChange;
468 /**
469 * \@description
470 * The registered callback function called when a blur event occurs on the input element.
471 * @type {?}
472 */
473 DefaultValueAccessor.prototype.onTouched;
474 /**
475 * Whether the user is creating a composition string (IME events).
476 * @type {?}
477 * @private
478 */
479 DefaultValueAccessor.prototype._composing;
480 /**
481 * @type {?}
482 * @private
483 */
484 DefaultValueAccessor.prototype._renderer;
485 /**
486 * @type {?}
487 * @private
488 */
489 DefaultValueAccessor.prototype._elementRef;
490 /**
491 * @type {?}
492 * @private
493 */
494 DefaultValueAccessor.prototype._compositionMode;
495}
496
497/**
498 * @fileoverview added by tsickle
499 * Generated from: packages/forms/src/directives/abstract_control_directive.ts
500 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
501 */
502/**
503 * @license
504 * Copyright Google Inc. All Rights Reserved.
505 *
506 * Use of this source code is governed by an MIT-style license that can be
507 * found in the LICENSE file at https://angular.io/license
508 */
509/**
510 * \@description
511 * Base class for control directives.
512 *
513 * This class is only used internally in the `ReactiveFormsModule` and the `FormsModule`.
514 *
515 * \@publicApi
516 * @abstract
517 */
518class AbstractControlDirective {
519 /**
520 * \@description
521 * Reports the value of the control if it is present, otherwise null.
522 * @return {?}
523 */
524 get value() { return this.control ? this.control.value : null; }
525 /**
526 * \@description
527 * Reports whether the control is valid. A control is considered valid if no
528 * validation errors exist with the current value.
529 * If the control is not present, null is returned.
530 * @return {?}
531 */
532 get valid() { return this.control ? this.control.valid : null; }
533 /**
534 * \@description
535 * Reports whether the control is invalid, meaning that an error exists in the input value.
536 * If the control is not present, null is returned.
537 * @return {?}
538 */
539 get invalid() { return this.control ? this.control.invalid : null; }
540 /**
541 * \@description
542 * Reports whether a control is pending, meaning that that async validation is occurring and
543 * errors are not yet available for the input value. If the control is not present, null is
544 * returned.
545 * @return {?}
546 */
547 get pending() { return this.control ? this.control.pending : null; }
548 /**
549 * \@description
550 * Reports whether the control is disabled, meaning that the control is disabled
551 * in the UI and is exempt from validation checks and excluded from aggregate
552 * values of ancestor controls. If the control is not present, null is returned.
553 * @return {?}
554 */
555 get disabled() { return this.control ? this.control.disabled : null; }
556 /**
557 * \@description
558 * Reports whether the control is enabled, meaning that the control is included in ancestor
559 * calculations of validity or value. If the control is not present, null is returned.
560 * @return {?}
561 */
562 get enabled() { return this.control ? this.control.enabled : null; }
563 /**
564 * \@description
565 * Reports the control's validation errors. If the control is not present, null is returned.
566 * @return {?}
567 */
568 get errors() { return this.control ? this.control.errors : null; }
569 /**
570 * \@description
571 * Reports whether the control is pristine, meaning that the user has not yet changed
572 * the value in the UI. If the control is not present, null is returned.
573 * @return {?}
574 */
575 get pristine() { return this.control ? this.control.pristine : null; }
576 /**
577 * \@description
578 * Reports whether the control is dirty, meaning that the user has changed
579 * the value in the UI. If the control is not present, null is returned.
580 * @return {?}
581 */
582 get dirty() { return this.control ? this.control.dirty : null; }
583 /**
584 * \@description
585 * Reports whether the control is touched, meaning that the user has triggered
586 * a `blur` event on it. If the control is not present, null is returned.
587 * @return {?}
588 */
589 get touched() { return this.control ? this.control.touched : null; }
590 /**
591 * \@description
592 * Reports the validation status of the control. Possible values include:
593 * 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
594 * If the control is not present, null is returned.
595 * @return {?}
596 */
597 get status() { return this.control ? this.control.status : null; }
598 /**
599 * \@description
600 * Reports whether the control is untouched, meaning that the user has not yet triggered
601 * a `blur` event on it. If the control is not present, null is returned.
602 * @return {?}
603 */
604 get untouched() { return this.control ? this.control.untouched : null; }
605 /**
606 * \@description
607 * Returns a multicasting observable that emits a validation status whenever it is
608 * calculated for the control. If the control is not present, null is returned.
609 * @return {?}
610 */
611 get statusChanges() {
612 return this.control ? this.control.statusChanges : null;
613 }
614 /**
615 * \@description
616 * Returns a multicasting observable of value changes for the control that emits every time the
617 * value of the control changes in the UI or programmatically.
618 * If the control is not present, null is returned.
619 * @return {?}
620 */
621 get valueChanges() {
622 return this.control ? this.control.valueChanges : null;
623 }
624 /**
625 * \@description
626 * Returns an array that represents the path from the top-level form to this control.
627 * Each index is the string name of the control on that level.
628 * @return {?}
629 */
630 get path() { return null; }
631 /**
632 * \@description
633 * Resets the control with the provided value if the control is present.
634 * @param {?=} value
635 * @return {?}
636 */
637 reset(value = undefined) {
638 if (this.control)
639 this.control.reset(value);
640 }
641 /**
642 * \@description
643 * Reports whether the control with the given path has the error specified.
644 *
645 * \@usageNotes
646 * For example, for the following `FormGroup`:
647 *
648 * ```
649 * form = new FormGroup({
650 * address: new FormGroup({ street: new FormControl() })
651 * });
652 * ```
653 *
654 * The path to the 'street' control from the root form would be 'address' -> 'street'.
655 *
656 * It can be provided to this method in one of two formats:
657 *
658 * 1. An array of string control names, e.g. `['address', 'street']`
659 * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
660 *
661 * If no path is given, this method checks for the error on the current control.
662 *
663 * @param {?} errorCode The code of the error to check
664 * @param {?=} path A list of control names that designates how to move from the current control
665 * to the control that should be queried for errors.
666 *
667 * @return {?} whether the given error is present in the control at the given path.
668 *
669 * If the control is not present, false is returned.
670 */
671 hasError(errorCode, path) {
672 return this.control ? this.control.hasError(errorCode, path) : false;
673 }
674 /**
675 * \@description
676 * Reports error data for the control with the given path.
677 *
678 * \@usageNotes
679 * For example, for the following `FormGroup`:
680 *
681 * ```
682 * form = new FormGroup({
683 * address: new FormGroup({ street: new FormControl() })
684 * });
685 * ```
686 *
687 * The path to the 'street' control from the root form would be 'address' -> 'street'.
688 *
689 * It can be provided to this method in one of two formats:
690 *
691 * 1. An array of string control names, e.g. `['address', 'street']`
692 * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
693 *
694 * @param {?} errorCode The code of the error to check
695 * @param {?=} path A list of control names that designates how to move from the current control
696 * to the control that should be queried for errors.
697 *
698 * @return {?} error data for that particular error. If the control or error is not present,
699 * null is returned.
700 */
701 getError(errorCode, path) {
702 return this.control ? this.control.getError(errorCode, path) : null;
703 }
704}
705if (false) {
706 /**
707 * \@description
708 * A reference to the underlying control.
709 *
710 * @abstract
711 * @return {?} the control that backs this directive. Most properties fall through to that instance.
712 */
713 AbstractControlDirective.prototype.control = function () { };
714}
715
716/**
717 * @fileoverview added by tsickle
718 * Generated from: packages/forms/src/directives/control_container.ts
719 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
720 */
721/**
722 * \@description
723 * A base class for directives that contain multiple registered instances of `NgControl`.
724 * Only used by the forms module.
725 *
726 * \@publicApi
727 * @abstract
728 */
729class ControlContainer extends AbstractControlDirective {
730 /**
731 * \@description
732 * The top-level form directive for the control.
733 * @return {?}
734 */
735 get formDirective() { return null; }
736 /**
737 * \@description
738 * The path to this group.
739 * @return {?}
740 */
741 get path() { return null; }
742}
743if (false) {
744 /**
745 * \@description
746 * The name for the control
747 * @type {?}
748 */
749 ControlContainer.prototype.name;
750}
751
752/**
753 * @fileoverview added by tsickle
754 * Generated from: packages/forms/src/directives/ng_control.ts
755 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
756 */
757/**
758 * @return {?}
759 */
760function unimplemented() {
761 throw new Error('unimplemented');
762}
763/**
764 * \@description
765 * A base class that all control `FormControl`-based directives extend. It binds a `FormControl`
766 * object to a DOM element.
767 *
768 * \@publicApi
769 * @abstract
770 */
771class NgControl extends AbstractControlDirective {
772 constructor() {
773 super(...arguments);
774 /**
775 * \@description
776 * The parent form for the control.
777 *
778 * \@internal
779 */
780 this._parent = null;
781 /**
782 * \@description
783 * The name for the control
784 */
785 this.name = null;
786 /**
787 * \@description
788 * The value accessor for the control
789 */
790 this.valueAccessor = null;
791 /**
792 * \@description
793 * The uncomposed array of synchronous validators for the control
794 *
795 * \@internal
796 */
797 this._rawValidators = [];
798 /**
799 * \@description
800 * The uncomposed array of async validators for the control
801 *
802 * \@internal
803 */
804 this._rawAsyncValidators = [];
805 }
806 /**
807 * \@description
808 * The registered synchronous validator function for the control
809 *
810 * @throws An exception that this method is not implemented
811 * @return {?}
812 */
813 get validator() { return (/** @type {?} */ (unimplemented())); }
814 /**
815 * \@description
816 * The registered async validator function for the control
817 *
818 * @throws An exception that this method is not implemented
819 * @return {?}
820 */
821 get asyncValidator() { return (/** @type {?} */ (unimplemented())); }
822}
823if (false) {
824 /**
825 * \@description
826 * The parent form for the control.
827 *
828 * \@internal
829 * @type {?}
830 */
831 NgControl.prototype._parent;
832 /**
833 * \@description
834 * The name for the control
835 * @type {?}
836 */
837 NgControl.prototype.name;
838 /**
839 * \@description
840 * The value accessor for the control
841 * @type {?}
842 */
843 NgControl.prototype.valueAccessor;
844 /**
845 * \@description
846 * The uncomposed array of synchronous validators for the control
847 *
848 * \@internal
849 * @type {?}
850 */
851 NgControl.prototype._rawValidators;
852 /**
853 * \@description
854 * The uncomposed array of async validators for the control
855 *
856 * \@internal
857 * @type {?}
858 */
859 NgControl.prototype._rawAsyncValidators;
860 /**
861 * \@description
862 * The callback method to update the model from the view when requested
863 *
864 * @abstract
865 * @param {?} newValue The new value for the view
866 * @return {?}
867 */
868 NgControl.prototype.viewToModelUpdate = function (newValue) { };
869}
870
871/**
872 * @fileoverview added by tsickle
873 * Generated from: packages/forms/src/directives/ng_control_status.ts
874 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
875 */
876class AbstractControlStatus {
877 /**
878 * @param {?} cd
879 */
880 constructor(cd) { this._cd = cd; }
881 /**
882 * @return {?}
883 */
884 get ngClassUntouched() { return this._cd.control ? this._cd.control.untouched : false; }
885 /**
886 * @return {?}
887 */
888 get ngClassTouched() { return this._cd.control ? this._cd.control.touched : false; }
889 /**
890 * @return {?}
891 */
892 get ngClassPristine() { return this._cd.control ? this._cd.control.pristine : false; }
893 /**
894 * @return {?}
895 */
896 get ngClassDirty() { return this._cd.control ? this._cd.control.dirty : false; }
897 /**
898 * @return {?}
899 */
900 get ngClassValid() { return this._cd.control ? this._cd.control.valid : false; }
901 /**
902 * @return {?}
903 */
904 get ngClassInvalid() { return this._cd.control ? this._cd.control.invalid : false; }
905 /**
906 * @return {?}
907 */
908 get ngClassPending() { return this._cd.control ? this._cd.control.pending : false; }
909}
910if (false) {
911 /**
912 * @type {?}
913 * @private
914 */
915 AbstractControlStatus.prototype._cd;
916}
917/** @type {?} */
918const ngControlStatusHost = {
919 '[class.ng-untouched]': 'ngClassUntouched',
920 '[class.ng-touched]': 'ngClassTouched',
921 '[class.ng-pristine]': 'ngClassPristine',
922 '[class.ng-dirty]': 'ngClassDirty',
923 '[class.ng-valid]': 'ngClassValid',
924 '[class.ng-invalid]': 'ngClassInvalid',
925 '[class.ng-pending]': 'ngClassPending',
926};
927/**
928 * \@description
929 * Directive automatically applied to Angular form controls that sets CSS classes
930 * based on control status.
931 *
932 * \@usageNotes
933 *
934 * ### CSS classes applied
935 *
936 * The following classes are applied as the properties become true:
937 *
938 * * ng-valid
939 * * ng-invalid
940 * * ng-pending
941 * * ng-pristine
942 * * ng-dirty
943 * * ng-untouched
944 * * ng-touched
945 *
946 * \@ngModule ReactiveFormsModule
947 * \@ngModule FormsModule
948 * \@publicApi
949 */
950class NgControlStatus extends AbstractControlStatus {
951 /**
952 * @param {?} cd
953 */
954 constructor(cd) {
955 super(cd);
956 }
957}
958NgControlStatus.decorators = [
959 { type: Directive, args: [{ selector: '[formControlName],[ngModel],[formControl]', host: ngControlStatusHost },] }
960];
961/** @nocollapse */
962NgControlStatus.ctorParameters = () => [
963 { type: NgControl, decorators: [{ type: Self }] }
964];
965/**
966 * \@description
967 * Directive automatically applied to Angular form groups that sets CSS classes
968 * based on control status (valid/invalid/dirty/etc).
969 *
970 * @see `NgControlStatus`
971 *
972 * \@ngModule ReactiveFormsModule
973 * \@ngModule FormsModule
974 * \@publicApi
975 */
976class NgControlStatusGroup extends AbstractControlStatus {
977 /**
978 * @param {?} cd
979 */
980 constructor(cd) {
981 super(cd);
982 }
983}
984NgControlStatusGroup.decorators = [
985 { type: Directive, args: [{
986 selector: '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]',
987 host: ngControlStatusHost
988 },] }
989];
990/** @nocollapse */
991NgControlStatusGroup.ctorParameters = () => [
992 { type: ControlContainer, decorators: [{ type: Self }] }
993];
994
995/**
996 * @fileoverview added by tsickle
997 * Generated from: packages/forms/src/validators.ts
998 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
999 */
1000/**
1001 * @param {?} value
1002 * @return {?}
1003 */
1004function isEmptyInputValue(value) {
1005 // we don't check for string here so it also works with arrays
1006 return value == null || value.length === 0;
1007}
1008/**
1009 * \@description
1010 * An `InjectionToken` for registering additional synchronous validators used with `AbstractControl`s.
1011 *
1012 * @see `NG_ASYNC_VALIDATORS`
1013 *
1014 * \@usageNotes
1015 *
1016 * ### Providing a custom validator
1017 *
1018 * The following example registers a custom validator directive. Adding the validator to the
1019 * existing collection of validators requires the `multi: true` option.
1020 *
1021 * ```typescript
1022 * \@Directive({
1023 * selector: '[customValidator]',
1024 * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
1025 * })
1026 * class CustomValidatorDirective implements Validator {
1027 * validate(control: AbstractControl): ValidationErrors | null {
1028 * return { 'custom': true };
1029 * }
1030 * }
1031 * ```
1032 *
1033 * \@publicApi
1034 * @type {?}
1035 */
1036const NG_VALIDATORS = new InjectionToken('NgValidators');
1037/**
1038 * \@description
1039 * An `InjectionToken` for registering additional asynchronous validators used with `AbstractControl`s.
1040 *
1041 * @see `NG_VALIDATORS`
1042 *
1043 * \@publicApi
1044 * @type {?}
1045 */
1046const NG_ASYNC_VALIDATORS = new InjectionToken('NgAsyncValidators');
1047/**
1048 * A regular expression that matches valid e-mail addresses.
1049 *
1050 * At a high level, this regexp matches e-mail addresses of the format `local-part\@tld`, where:
1051 * - `local-part` consists of one or more of the allowed characters (alphanumeric and some
1052 * punctuation symbols).
1053 * - `local-part` cannot begin or end with a period (`.`).
1054 * - `local-part` cannot be longer than 64 characters.
1055 * - `tld` consists of one or more `labels` separated by periods (`.`). For example `localhost` or
1056 * `foo.com`.
1057 * - A `label` consists of one or more of the allowed characters (alphanumeric, dashes (`-`) and
1058 * periods (`.`)).
1059 * - A `label` cannot begin or end with a dash (`-`) or a period (`.`).
1060 * - A `label` cannot be longer than 63 characters.
1061 * - The whole address cannot be longer than 254 characters.
1062 *
1063 * ## Implementation background
1064 *
1065 * This regexp was ported over from AngularJS (see there for git history):
1066 * https://github.com/angular/angular.js/blob/c133ef836/src/ng/directive/input.js#L27
1067 * It is based on the
1068 * [WHATWG version](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with
1069 * some enhancements to incorporate more RFC rules (such as rules related to domain names and the
1070 * lengths of different parts of the address). The main differences from the WHATWG version are:
1071 * - Disallow `local-part` to begin or end with a period (`.`).
1072 * - Disallow `local-part` length to exceed 64 characters.
1073 * - Disallow total address length to exceed 254 characters.
1074 *
1075 * See [this commit](https://github.com/angular/angular.js/commit/f3f5cf72e) for more details.
1076 * @type {?}
1077 */
1078const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
1079/**
1080 * \@description
1081 * Provides a set of built-in validators that can be used by form controls.
1082 *
1083 * A validator is a function that processes a `FormControl` or collection of
1084 * controls and returns an error map or null. A null map means that validation has passed.
1085 *
1086 * @see [Form Validation](/guide/form-validation)
1087 *
1088 * \@publicApi
1089 */
1090class Validators {
1091 /**
1092 * \@description
1093 * Validator that requires the control's value to be greater than or equal to the provided number.
1094 * The validator exists only as a function and not as a directive.
1095 *
1096 * \@usageNotes
1097 *
1098 * ### Validate against a minimum of 3
1099 *
1100 * ```typescript
1101 * const control = new FormControl(2, Validators.min(3));
1102 *
1103 * console.log(control.errors); // {min: {min: 3, actual: 2}}
1104 * ```
1105 *
1106 * @see `updateValueAndValidity()`
1107 *
1108 * @param {?} min
1109 * @return {?} A validator function that returns an error map with the
1110 * `min` property if the validation check fails, otherwise `null`.
1111 *
1112 */
1113 static min(min) {
1114 return (/**
1115 * @param {?} control
1116 * @return {?}
1117 */
1118 (control) => {
1119 if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
1120 return null; // don't validate empty values to allow optional controls
1121 }
1122 /** @type {?} */
1123 const value = parseFloat(control.value);
1124 // Controls with NaN values after parsing should be treated as not having a
1125 // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
1126 return !isNaN(value) && value < min ? { 'min': { 'min': min, 'actual': control.value } } : null;
1127 });
1128 }
1129 /**
1130 * \@description
1131 * Validator that requires the control's value to be less than or equal to the provided number.
1132 * The validator exists only as a function and not as a directive.
1133 *
1134 * \@usageNotes
1135 *
1136 * ### Validate against a maximum of 15
1137 *
1138 * ```typescript
1139 * const control = new FormControl(16, Validators.max(15));
1140 *
1141 * console.log(control.errors); // {max: {max: 15, actual: 16}}
1142 * ```
1143 *
1144 * @see `updateValueAndValidity()`
1145 *
1146 * @param {?} max
1147 * @return {?} A validator function that returns an error map with the
1148 * `max` property if the validation check fails, otherwise `null`.
1149 *
1150 */
1151 static max(max) {
1152 return (/**
1153 * @param {?} control
1154 * @return {?}
1155 */
1156 (control) => {
1157 if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
1158 return null; // don't validate empty values to allow optional controls
1159 }
1160 /** @type {?} */
1161 const value = parseFloat(control.value);
1162 // Controls with NaN values after parsing should be treated as not having a
1163 // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
1164 return !isNaN(value) && value > max ? { 'max': { 'max': max, 'actual': control.value } } : null;
1165 });
1166 }
1167 /**
1168 * \@description
1169 * Validator that requires the control have a non-empty value.
1170 *
1171 * \@usageNotes
1172 *
1173 * ### Validate that the field is non-empty
1174 *
1175 * ```typescript
1176 * const control = new FormControl('', Validators.required);
1177 *
1178 * console.log(control.errors); // {required: true}
1179 * ```
1180 *
1181 * @see `updateValueAndValidity()`
1182 *
1183 * @param {?} control
1184 * @return {?} An error map with the `required` property
1185 * if the validation check fails, otherwise `null`.
1186 *
1187 */
1188 static required(control) {
1189 return isEmptyInputValue(control.value) ? { 'required': true } : null;
1190 }
1191 /**
1192 * \@description
1193 * Validator that requires the control's value be true. This validator is commonly
1194 * used for required checkboxes.
1195 *
1196 * \@usageNotes
1197 *
1198 * ### Validate that the field value is true
1199 *
1200 * ```typescript
1201 * const control = new FormControl('', Validators.requiredTrue);
1202 *
1203 * console.log(control.errors); // {required: true}
1204 * ```
1205 *
1206 * @see `updateValueAndValidity()`
1207 *
1208 * @param {?} control
1209 * @return {?} An error map that contains the `required` property
1210 * set to `true` if the validation check fails, otherwise `null`.
1211 *
1212 */
1213 static requiredTrue(control) {
1214 return control.value === true ? null : { 'required': true };
1215 }
1216 /**
1217 * \@description
1218 * Validator that requires the control's value pass an email validation test.
1219 *
1220 * Tests the value using a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
1221 * pattern suitable for common usecases. The pattern is based on the definition of a valid email
1222 * address in the [WHATWG HTML specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address)
1223 * with some enhancements to incorporate more RFC rules (such as rules related to domain names and
1224 * the lengths of different parts of the address).
1225 *
1226 * The differences from the WHATWG version include:
1227 * - Disallow `local-part` (the part before the `\@` symbol) to begin or end with a period (`.`).
1228 * - Disallow `local-part` to be longer than 64 characters.
1229 * - Disallow the whole address to be longer than 254 characters.
1230 *
1231 * If this pattern does not satisfy your business needs, you can use `Validators.pattern()` to
1232 * validate the value against a different pattern.
1233 *
1234 * \@usageNotes
1235 *
1236 * ### Validate that the field matches a valid email pattern
1237 *
1238 * ```typescript
1239 * const control = new FormControl('bad\@', Validators.email);
1240 *
1241 * console.log(control.errors); // {email: true}
1242 * ```
1243 *
1244 * @see `updateValueAndValidity()`
1245 *
1246 * @param {?} control
1247 * @return {?} An error map with the `email` property
1248 * if the validation check fails, otherwise `null`.
1249 *
1250 */
1251 static email(control) {
1252 if (isEmptyInputValue(control.value)) {
1253 return null; // don't validate empty values to allow optional controls
1254 }
1255 return EMAIL_REGEXP.test(control.value) ? null : { 'email': true };
1256 }
1257 /**
1258 * \@description
1259 * Validator that requires the length of the control's value to be greater than or equal
1260 * to the provided minimum length. This validator is also provided by default if you use the
1261 * the HTML5 `minlength` attribute.
1262 *
1263 * \@usageNotes
1264 *
1265 * ### Validate that the field has a minimum of 3 characters
1266 *
1267 * ```typescript
1268 * const control = new FormControl('ng', Validators.minLength(3));
1269 *
1270 * console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
1271 * ```
1272 *
1273 * ```html
1274 * <input minlength="5">
1275 * ```
1276 *
1277 * @see `updateValueAndValidity()`
1278 *
1279 * @param {?} minLength
1280 * @return {?} A validator function that returns an error map with the
1281 * `minlength` if the validation check fails, otherwise `null`.
1282 *
1283 */
1284 static minLength(minLength) {
1285 return (/**
1286 * @param {?} control
1287 * @return {?}
1288 */
1289 (control) => {
1290 if (isEmptyInputValue(control.value)) {
1291 return null; // don't validate empty values to allow optional controls
1292 }
1293 /** @type {?} */
1294 const length = control.value ? control.value.length : 0;
1295 return length < minLength ?
1296 { 'minlength': { 'requiredLength': minLength, 'actualLength': length } } :
1297 null;
1298 });
1299 }
1300 /**
1301 * \@description
1302 * Validator that requires the length of the control's value to be less than or equal
1303 * to the provided maximum length. This validator is also provided by default if you use the
1304 * the HTML5 `maxlength` attribute.
1305 *
1306 * \@usageNotes
1307 *
1308 * ### Validate that the field has maximum of 5 characters
1309 *
1310 * ```typescript
1311 * const control = new FormControl('Angular', Validators.maxLength(5));
1312 *
1313 * console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
1314 * ```
1315 *
1316 * ```html
1317 * <input maxlength="5">
1318 * ```
1319 *
1320 * @see `updateValueAndValidity()`
1321 *
1322 * @param {?} maxLength
1323 * @return {?} A validator function that returns an error map with the
1324 * `maxlength` property if the validation check fails, otherwise `null`.
1325 *
1326 */
1327 static maxLength(maxLength) {
1328 return (/**
1329 * @param {?} control
1330 * @return {?}
1331 */
1332 (control) => {
1333 /** @type {?} */
1334 const length = control.value ? control.value.length : 0;
1335 return length > maxLength ?
1336 { 'maxlength': { 'requiredLength': maxLength, 'actualLength': length } } :
1337 null;
1338 });
1339 }
1340 /**
1341 * \@description
1342 * Validator that requires the control's value to match a regex pattern. This validator is also
1343 * provided by default if you use the HTML5 `pattern` attribute.
1344 *
1345 * \@usageNotes
1346 *
1347 * ### Validate that the field only contains letters or spaces
1348 *
1349 * ```typescript
1350 * const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
1351 *
1352 * console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
1353 * ```
1354 *
1355 * ```html
1356 * <input pattern="[a-zA-Z ]*">
1357 * ```
1358 *
1359 * @see `updateValueAndValidity()`
1360 *
1361 * @param {?} pattern A regular expression to be used as is to test the values, or a string.
1362 * If a string is passed, the `^` character is prepended and the `$` character is
1363 * appended to the provided string (if not already present), and the resulting regular
1364 * expression is used to test the values.
1365 *
1366 * @return {?} A validator function that returns an error map with the
1367 * `pattern` property if the validation check fails, otherwise `null`.
1368 *
1369 */
1370 static pattern(pattern) {
1371 if (!pattern)
1372 return Validators.nullValidator;
1373 /** @type {?} */
1374 let regex;
1375 /** @type {?} */
1376 let regexStr;
1377 if (typeof pattern === 'string') {
1378 regexStr = '';
1379 if (pattern.charAt(0) !== '^')
1380 regexStr += '^';
1381 regexStr += pattern;
1382 if (pattern.charAt(pattern.length - 1) !== '$')
1383 regexStr += '$';
1384 regex = new RegExp(regexStr);
1385 }
1386 else {
1387 regexStr = pattern.toString();
1388 regex = pattern;
1389 }
1390 return (/**
1391 * @param {?} control
1392 * @return {?}
1393 */
1394 (control) => {
1395 if (isEmptyInputValue(control.value)) {
1396 return null; // don't validate empty values to allow optional controls
1397 }
1398 /** @type {?} */
1399 const value = control.value;
1400 return regex.test(value) ? null :
1401 { 'pattern': { 'requiredPattern': regexStr, 'actualValue': value } };
1402 });
1403 }
1404 /**
1405 * \@description
1406 * Validator that performs no operation.
1407 *
1408 * @see `updateValueAndValidity()`
1409 *
1410 * @param {?} control
1411 * @return {?}
1412 */
1413 static nullValidator(control) { return null; }
1414 /**
1415 * @param {?} validators
1416 * @return {?}
1417 */
1418 static compose(validators) {
1419 if (!validators)
1420 return null;
1421 /** @type {?} */
1422 const presentValidators = (/** @type {?} */ (validators.filter(isPresent)));
1423 if (presentValidators.length == 0)
1424 return null;
1425 return (/**
1426 * @param {?} control
1427 * @return {?}
1428 */
1429 function (control) {
1430 return _mergeErrors(_executeValidators(control, presentValidators));
1431 });
1432 }
1433 /**
1434 * \@description
1435 * Compose multiple async validators into a single function that returns the union
1436 * of the individual error objects for the provided control.
1437 *
1438 * @see `updateValueAndValidity()`
1439 *
1440 * @param {?} validators
1441 * @return {?} A validator function that returns an error map with the
1442 * merged error objects of the async validators if the validation check fails, otherwise `null`.
1443 *
1444 */
1445 static composeAsync(validators) {
1446 if (!validators)
1447 return null;
1448 /** @type {?} */
1449 const presentValidators = (/** @type {?} */ (validators.filter(isPresent)));
1450 if (presentValidators.length == 0)
1451 return null;
1452 return (/**
1453 * @param {?} control
1454 * @return {?}
1455 */
1456 function (control) {
1457 /** @type {?} */
1458 const observables = _executeAsyncValidators(control, presentValidators).map(toObservable);
1459 return forkJoin(observables).pipe(map(_mergeErrors));
1460 });
1461 }
1462}
1463/**
1464 * @param {?} o
1465 * @return {?}
1466 */
1467function isPresent(o) {
1468 return o != null;
1469}
1470/**
1471 * @param {?} r
1472 * @return {?}
1473 */
1474function toObservable(r) {
1475 /** @type {?} */
1476 const obs = ɵisPromise(r) ? from(r) : r;
1477 if (!(ɵisObservable(obs))) {
1478 throw new Error(`Expected validator to return Promise or Observable.`);
1479 }
1480 return obs;
1481}
1482/**
1483 * @param {?} control
1484 * @param {?} validators
1485 * @return {?}
1486 */
1487function _executeValidators(control, validators) {
1488 return validators.map((/**
1489 * @param {?} v
1490 * @return {?}
1491 */
1492 v => v(control)));
1493}
1494/**
1495 * @param {?} control
1496 * @param {?} validators
1497 * @return {?}
1498 */
1499function _executeAsyncValidators(control, validators) {
1500 return validators.map((/**
1501 * @param {?} v
1502 * @return {?}
1503 */
1504 v => v(control)));
1505}
1506/**
1507 * @param {?} arrayOfErrors
1508 * @return {?}
1509 */
1510function _mergeErrors(arrayOfErrors) {
1511 /** @type {?} */
1512 let res = {};
1513 // Not using Array.reduce here due to a Chrome 80 bug
1514 // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
1515 arrayOfErrors.forEach((/**
1516 * @param {?} errors
1517 * @return {?}
1518 */
1519 (errors) => {
1520 res = errors != null ? Object.assign(Object.assign({}, (/** @type {?} */ (res))), errors) : (/** @type {?} */ (res));
1521 }));
1522 return Object.keys(res).length === 0 ? null : res;
1523}
1524
1525/**
1526 * @fileoverview added by tsickle
1527 * Generated from: packages/forms/src/directives/normalize_validator.ts
1528 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1529 */
1530/**
1531 * @license
1532 * Copyright Google Inc. All Rights Reserved.
1533 *
1534 * Use of this source code is governed by an MIT-style license that can be
1535 * found in the LICENSE file at https://angular.io/license
1536 */
1537/**
1538 * @param {?} validator
1539 * @return {?}
1540 */
1541function normalizeValidator(validator) {
1542 if (((/** @type {?} */ (validator))).validate) {
1543 return (/**
1544 * @param {?} c
1545 * @return {?}
1546 */
1547 (c) => ((/** @type {?} */ (validator))).validate(c));
1548 }
1549 else {
1550 return (/** @type {?} */ (validator));
1551 }
1552}
1553/**
1554 * @param {?} validator
1555 * @return {?}
1556 */
1557function normalizeAsyncValidator(validator) {
1558 if (((/** @type {?} */ (validator))).validate) {
1559 return (/**
1560 * @param {?} c
1561 * @return {?}
1562 */
1563 (c) => ((/** @type {?} */ (validator))).validate(c));
1564 }
1565 else {
1566 return (/** @type {?} */ (validator));
1567 }
1568}
1569
1570/**
1571 * @fileoverview added by tsickle
1572 * Generated from: packages/forms/src/directives/number_value_accessor.ts
1573 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1574 */
1575/** @type {?} */
1576const NUMBER_VALUE_ACCESSOR = {
1577 provide: NG_VALUE_ACCESSOR,
1578 useExisting: forwardRef((/**
1579 * @return {?}
1580 */
1581 () => NumberValueAccessor)),
1582 multi: true
1583};
1584/**
1585 * \@description
1586 * The `ControlValueAccessor` for writing a number value and listening to number input changes.
1587 * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
1588 * directives.
1589 *
1590 * \@usageNotes
1591 *
1592 * ### Using a number input with a reactive form.
1593 *
1594 * The following example shows how to use a number input with a reactive form.
1595 *
1596 * ```ts
1597 * const totalCountControl = new FormControl();
1598 * ```
1599 *
1600 * ```
1601 * <input type="number" [formControl]="totalCountControl">
1602 * ```
1603 *
1604 * \@ngModule ReactiveFormsModule
1605 * \@ngModule FormsModule
1606 * \@publicApi
1607 */
1608class NumberValueAccessor {
1609 /**
1610 * @param {?} _renderer
1611 * @param {?} _elementRef
1612 */
1613 constructor(_renderer, _elementRef) {
1614 this._renderer = _renderer;
1615 this._elementRef = _elementRef;
1616 /**
1617 * \@description
1618 * The registered callback function called when a change or input event occurs on the input
1619 * element.
1620 */
1621 this.onChange = (/**
1622 * @param {?} _
1623 * @return {?}
1624 */
1625 (_) => { });
1626 /**
1627 * \@description
1628 * The registered callback function called when a blur event occurs on the input element.
1629 */
1630 this.onTouched = (/**
1631 * @return {?}
1632 */
1633 () => { });
1634 }
1635 /**
1636 * Sets the "value" property on the input element.
1637 *
1638 * @param {?} value The checked value
1639 * @return {?}
1640 */
1641 writeValue(value) {
1642 // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
1643 /** @type {?} */
1644 const normalizedValue = value == null ? '' : value;
1645 this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
1646 }
1647 /**
1648 * \@description
1649 * Registers a function called when the control value changes.
1650 *
1651 * @param {?} fn The callback function
1652 * @return {?}
1653 */
1654 registerOnChange(fn) {
1655 this.onChange = (/**
1656 * @param {?} value
1657 * @return {?}
1658 */
1659 (value) => { fn(value == '' ? null : parseFloat(value)); });
1660 }
1661 /**
1662 * \@description
1663 * Registers a function called when the control is touched.
1664 *
1665 * @param {?} fn The callback function
1666 * @return {?}
1667 */
1668 registerOnTouched(fn) { this.onTouched = fn; }
1669 /**
1670 * Sets the "disabled" property on the input element.
1671 *
1672 * @param {?} isDisabled The disabled value
1673 * @return {?}
1674 */
1675 setDisabledState(isDisabled) {
1676 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
1677 }
1678}
1679NumberValueAccessor.decorators = [
1680 { type: Directive, args: [{
1681 selector: 'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
1682 host: {
1683 '(change)': 'onChange($event.target.value)',
1684 '(input)': 'onChange($event.target.value)',
1685 '(blur)': 'onTouched()'
1686 },
1687 providers: [NUMBER_VALUE_ACCESSOR]
1688 },] }
1689];
1690/** @nocollapse */
1691NumberValueAccessor.ctorParameters = () => [
1692 { type: Renderer2 },
1693 { type: ElementRef }
1694];
1695if (false) {
1696 /**
1697 * \@description
1698 * The registered callback function called when a change or input event occurs on the input
1699 * element.
1700 * @type {?}
1701 */
1702 NumberValueAccessor.prototype.onChange;
1703 /**
1704 * \@description
1705 * The registered callback function called when a blur event occurs on the input element.
1706 * @type {?}
1707 */
1708 NumberValueAccessor.prototype.onTouched;
1709 /**
1710 * @type {?}
1711 * @private
1712 */
1713 NumberValueAccessor.prototype._renderer;
1714 /**
1715 * @type {?}
1716 * @private
1717 */
1718 NumberValueAccessor.prototype._elementRef;
1719}
1720
1721/**
1722 * @fileoverview added by tsickle
1723 * Generated from: packages/forms/src/directives/radio_control_value_accessor.ts
1724 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1725 */
1726/** @type {?} */
1727const RADIO_VALUE_ACCESSOR = {
1728 provide: NG_VALUE_ACCESSOR,
1729 useExisting: forwardRef((/**
1730 * @return {?}
1731 */
1732 () => RadioControlValueAccessor)),
1733 multi: true
1734};
1735/**
1736 * \@description
1737 * Class used by Angular to track radio buttons. For internal use only.
1738 */
1739class RadioControlRegistry {
1740 constructor() {
1741 this._accessors = [];
1742 }
1743 /**
1744 * \@description
1745 * Adds a control to the internal registry. For internal use only.
1746 * @param {?} control
1747 * @param {?} accessor
1748 * @return {?}
1749 */
1750 add(control, accessor) {
1751 this._accessors.push([control, accessor]);
1752 }
1753 /**
1754 * \@description
1755 * Removes a control from the internal registry. For internal use only.
1756 * @param {?} accessor
1757 * @return {?}
1758 */
1759 remove(accessor) {
1760 for (let i = this._accessors.length - 1; i >= 0; --i) {
1761 if (this._accessors[i][1] === accessor) {
1762 this._accessors.splice(i, 1);
1763 return;
1764 }
1765 }
1766 }
1767 /**
1768 * \@description
1769 * Selects a radio button. For internal use only.
1770 * @param {?} accessor
1771 * @return {?}
1772 */
1773 select(accessor) {
1774 this._accessors.forEach((/**
1775 * @param {?} c
1776 * @return {?}
1777 */
1778 (c) => {
1779 if (this._isSameGroup(c, accessor) && c[1] !== accessor) {
1780 c[1].fireUncheck(accessor.value);
1781 }
1782 }));
1783 }
1784 /**
1785 * @private
1786 * @param {?} controlPair
1787 * @param {?} accessor
1788 * @return {?}
1789 */
1790 _isSameGroup(controlPair, accessor) {
1791 if (!controlPair[0].control)
1792 return false;
1793 return controlPair[0]._parent === accessor._control._parent &&
1794 controlPair[1].name === accessor.name;
1795 }
1796}
1797RadioControlRegistry.decorators = [
1798 { type: Injectable }
1799];
1800if (false) {
1801 /**
1802 * @type {?}
1803 * @private
1804 */
1805 RadioControlRegistry.prototype._accessors;
1806}
1807/**
1808 * \@description
1809 * The `ControlValueAccessor` for writing radio control values and listening to radio control
1810 * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
1811 * `NgModel` directives.
1812 *
1813 * \@usageNotes
1814 *
1815 * ### Using radio buttons with reactive form directives
1816 *
1817 * The follow example shows how to use radio buttons in a reactive form. When using radio buttons in
1818 * a reactive form, radio buttons in the same group should have the same `formControlName`.
1819 * Providing a `name` attribute is optional.
1820 *
1821 * {\@example forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts region='Reactive'}
1822 *
1823 * \@ngModule ReactiveFormsModule
1824 * \@ngModule FormsModule
1825 * \@publicApi
1826 */
1827class RadioControlValueAccessor {
1828 /**
1829 * @param {?} _renderer
1830 * @param {?} _elementRef
1831 * @param {?} _registry
1832 * @param {?} _injector
1833 */
1834 constructor(_renderer, _elementRef, _registry, _injector) {
1835 this._renderer = _renderer;
1836 this._elementRef = _elementRef;
1837 this._registry = _registry;
1838 this._injector = _injector;
1839 /**
1840 * \@description
1841 * The registered callback function called when a change event occurs on the input element.
1842 */
1843 this.onChange = (/**
1844 * @return {?}
1845 */
1846 () => { });
1847 /**
1848 * \@description
1849 * The registered callback function called when a blur event occurs on the input element.
1850 */
1851 this.onTouched = (/**
1852 * @return {?}
1853 */
1854 () => { });
1855 }
1856 /**
1857 * \@description
1858 * A lifecycle method called when the directive is initialized. For internal use only.
1859 * @return {?}
1860 */
1861 ngOnInit() {
1862 this._control = this._injector.get(NgControl);
1863 this._checkName();
1864 this._registry.add(this._control, this);
1865 }
1866 /**
1867 * \@description
1868 * Lifecycle method called before the directive's instance is destroyed. For internal use only.
1869 * @return {?}
1870 */
1871 ngOnDestroy() { this._registry.remove(this); }
1872 /**
1873 * \@description
1874 * Sets the "checked" property value on the radio input element.
1875 *
1876 * @param {?} value The checked value
1877 * @return {?}
1878 */
1879 writeValue(value) {
1880 this._state = value === this.value;
1881 this._renderer.setProperty(this._elementRef.nativeElement, 'checked', this._state);
1882 }
1883 /**
1884 * \@description
1885 * Registers a function called when the control value changes.
1886 *
1887 * @param {?} fn The callback function
1888 * @return {?}
1889 */
1890 registerOnChange(fn) {
1891 this._fn = fn;
1892 this.onChange = (/**
1893 * @return {?}
1894 */
1895 () => {
1896 fn(this.value);
1897 this._registry.select(this);
1898 });
1899 }
1900 /**
1901 * Sets the "value" on the radio input element and unchecks it.
1902 *
1903 * @param {?} value
1904 * @return {?}
1905 */
1906 fireUncheck(value) { this.writeValue(value); }
1907 /**
1908 * \@description
1909 * Registers a function called when the control is touched.
1910 *
1911 * @param {?} fn The callback function
1912 * @return {?}
1913 */
1914 registerOnTouched(fn) { this.onTouched = fn; }
1915 /**
1916 * Sets the "disabled" property on the input element.
1917 *
1918 * @param {?} isDisabled The disabled value
1919 * @return {?}
1920 */
1921 setDisabledState(isDisabled) {
1922 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
1923 }
1924 /**
1925 * @private
1926 * @return {?}
1927 */
1928 _checkName() {
1929 if (this.name && this.formControlName && this.name !== this.formControlName) {
1930 this._throwNameError();
1931 }
1932 if (!this.name && this.formControlName)
1933 this.name = this.formControlName;
1934 }
1935 /**
1936 * @private
1937 * @return {?}
1938 */
1939 _throwNameError() {
1940 throw new Error(`
1941 If you define both a name and a formControlName attribute on your radio button, their values
1942 must match. Ex: <input type="radio" formControlName="food" name="food">
1943 `);
1944 }
1945}
1946RadioControlValueAccessor.decorators = [
1947 { type: Directive, args: [{
1948 selector: 'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
1949 host: { '(change)': 'onChange()', '(blur)': 'onTouched()' },
1950 providers: [RADIO_VALUE_ACCESSOR]
1951 },] }
1952];
1953/** @nocollapse */
1954RadioControlValueAccessor.ctorParameters = () => [
1955 { type: Renderer2 },
1956 { type: ElementRef },
1957 { type: RadioControlRegistry },
1958 { type: Injector }
1959];
1960RadioControlValueAccessor.propDecorators = {
1961 name: [{ type: Input }],
1962 formControlName: [{ type: Input }],
1963 value: [{ type: Input }]
1964};
1965if (false) {
1966 /**
1967 * \@internal
1968 * @type {?}
1969 */
1970 RadioControlValueAccessor.prototype._state;
1971 /**
1972 * \@internal
1973 * @type {?}
1974 */
1975 RadioControlValueAccessor.prototype._control;
1976 /**
1977 * \@internal
1978 * @type {?}
1979 */
1980 RadioControlValueAccessor.prototype._fn;
1981 /**
1982 * \@description
1983 * The registered callback function called when a change event occurs on the input element.
1984 * @type {?}
1985 */
1986 RadioControlValueAccessor.prototype.onChange;
1987 /**
1988 * \@description
1989 * The registered callback function called when a blur event occurs on the input element.
1990 * @type {?}
1991 */
1992 RadioControlValueAccessor.prototype.onTouched;
1993 /**
1994 * \@description
1995 * Tracks the name of the radio input element.
1996 * @type {?}
1997 */
1998 RadioControlValueAccessor.prototype.name;
1999 /**
2000 * \@description
2001 * Tracks the name of the `FormControl` bound to the directive. The name corresponds
2002 * to a key in the parent `FormGroup` or `FormArray`.
2003 * @type {?}
2004 */
2005 RadioControlValueAccessor.prototype.formControlName;
2006 /**
2007 * \@description
2008 * Tracks the value of the radio input element
2009 * @type {?}
2010 */
2011 RadioControlValueAccessor.prototype.value;
2012 /**
2013 * @type {?}
2014 * @private
2015 */
2016 RadioControlValueAccessor.prototype._renderer;
2017 /**
2018 * @type {?}
2019 * @private
2020 */
2021 RadioControlValueAccessor.prototype._elementRef;
2022 /**
2023 * @type {?}
2024 * @private
2025 */
2026 RadioControlValueAccessor.prototype._registry;
2027 /**
2028 * @type {?}
2029 * @private
2030 */
2031 RadioControlValueAccessor.prototype._injector;
2032}
2033
2034/**
2035 * @fileoverview added by tsickle
2036 * Generated from: packages/forms/src/directives/range_value_accessor.ts
2037 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2038 */
2039/** @type {?} */
2040const RANGE_VALUE_ACCESSOR = {
2041 provide: NG_VALUE_ACCESSOR,
2042 useExisting: forwardRef((/**
2043 * @return {?}
2044 */
2045 () => RangeValueAccessor)),
2046 multi: true
2047};
2048/**
2049 * \@description
2050 * The `ControlValueAccessor` for writing a range value and listening to range input changes.
2051 * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
2052 * directives.
2053 *
2054 * \@usageNotes
2055 *
2056 * ### Using a range input with a reactive form
2057 *
2058 * The following example shows how to use a range input with a reactive form.
2059 *
2060 * ```ts
2061 * const ageControl = new FormControl();
2062 * ```
2063 *
2064 * ```
2065 * <input type="range" [formControl]="ageControl">
2066 * ```
2067 *
2068 * \@ngModule ReactiveFormsModule
2069 * \@ngModule FormsModule
2070 * \@publicApi
2071 */
2072class RangeValueAccessor {
2073 /**
2074 * @param {?} _renderer
2075 * @param {?} _elementRef
2076 */
2077 constructor(_renderer, _elementRef) {
2078 this._renderer = _renderer;
2079 this._elementRef = _elementRef;
2080 /**
2081 * \@description
2082 * The registered callback function called when a change or input event occurs on the input
2083 * element.
2084 */
2085 this.onChange = (/**
2086 * @param {?} _
2087 * @return {?}
2088 */
2089 (_) => { });
2090 /**
2091 * \@description
2092 * The registered callback function called when a blur event occurs on the input element.
2093 */
2094 this.onTouched = (/**
2095 * @return {?}
2096 */
2097 () => { });
2098 }
2099 /**
2100 * Sets the "value" property on the input element.
2101 *
2102 * @param {?} value The checked value
2103 * @return {?}
2104 */
2105 writeValue(value) {
2106 this._renderer.setProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
2107 }
2108 /**
2109 * \@description
2110 * Registers a function called when the control value changes.
2111 *
2112 * @param {?} fn The callback function
2113 * @return {?}
2114 */
2115 registerOnChange(fn) {
2116 this.onChange = (/**
2117 * @param {?} value
2118 * @return {?}
2119 */
2120 (value) => { fn(value == '' ? null : parseFloat(value)); });
2121 }
2122 /**
2123 * \@description
2124 * Registers a function called when the control is touched.
2125 *
2126 * @param {?} fn The callback function
2127 * @return {?}
2128 */
2129 registerOnTouched(fn) { this.onTouched = fn; }
2130 /**
2131 * Sets the "disabled" property on the range input element.
2132 *
2133 * @param {?} isDisabled The disabled value
2134 * @return {?}
2135 */
2136 setDisabledState(isDisabled) {
2137 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
2138 }
2139}
2140RangeValueAccessor.decorators = [
2141 { type: Directive, args: [{
2142 selector: 'input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]',
2143 host: {
2144 '(change)': 'onChange($event.target.value)',
2145 '(input)': 'onChange($event.target.value)',
2146 '(blur)': 'onTouched()'
2147 },
2148 providers: [RANGE_VALUE_ACCESSOR]
2149 },] }
2150];
2151/** @nocollapse */
2152RangeValueAccessor.ctorParameters = () => [
2153 { type: Renderer2 },
2154 { type: ElementRef }
2155];
2156if (false) {
2157 /**
2158 * \@description
2159 * The registered callback function called when a change or input event occurs on the input
2160 * element.
2161 * @type {?}
2162 */
2163 RangeValueAccessor.prototype.onChange;
2164 /**
2165 * \@description
2166 * The registered callback function called when a blur event occurs on the input element.
2167 * @type {?}
2168 */
2169 RangeValueAccessor.prototype.onTouched;
2170 /**
2171 * @type {?}
2172 * @private
2173 */
2174 RangeValueAccessor.prototype._renderer;
2175 /**
2176 * @type {?}
2177 * @private
2178 */
2179 RangeValueAccessor.prototype._elementRef;
2180}
2181
2182/**
2183 * @fileoverview added by tsickle
2184 * Generated from: packages/forms/src/directives/error_examples.ts
2185 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2186 */
2187/**
2188 * @license
2189 * Copyright Google Inc. All Rights Reserved.
2190 *
2191 * Use of this source code is governed by an MIT-style license that can be
2192 * found in the LICENSE file at https://angular.io/license
2193 */
2194/** @type {?} */
2195const FormErrorExamples = {
2196 formControlName: `
2197 <div [formGroup]="myGroup">
2198 <input formControlName="firstName">
2199 </div>
2200
2201 In your class:
2202
2203 this.myGroup = new FormGroup({
2204 firstName: new FormControl()
2205 });`,
2206 formGroupName: `
2207 <div [formGroup]="myGroup">
2208 <div formGroupName="person">
2209 <input formControlName="firstName">
2210 </div>
2211 </div>
2212
2213 In your class:
2214
2215 this.myGroup = new FormGroup({
2216 person: new FormGroup({ firstName: new FormControl() })
2217 });`,
2218 formArrayName: `
2219 <div [formGroup]="myGroup">
2220 <div formArrayName="cities">
2221 <div *ngFor="let city of cityArray.controls; index as i">
2222 <input [formControlName]="i">
2223 </div>
2224 </div>
2225 </div>
2226
2227 In your class:
2228
2229 this.cityArray = new FormArray([new FormControl('SF')]);
2230 this.myGroup = new FormGroup({
2231 cities: this.cityArray
2232 });`,
2233 ngModelGroup: `
2234 <form>
2235 <div ngModelGroup="person">
2236 <input [(ngModel)]="person.name" name="firstName">
2237 </div>
2238 </form>`,
2239 ngModelWithFormGroup: `
2240 <div [formGroup]="myGroup">
2241 <input formControlName="firstName">
2242 <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
2243 </div>
2244 `
2245};
2246
2247/**
2248 * @fileoverview added by tsickle
2249 * Generated from: packages/forms/src/directives/reactive_errors.ts
2250 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2251 */
2252class ReactiveErrors {
2253 /**
2254 * @return {?}
2255 */
2256 static controlParentException() {
2257 throw new Error(`formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
2258 directive and pass it an existing FormGroup instance (you can create one in your class).
2259
2260 Example:
2261
2262 ${FormErrorExamples.formControlName}`);
2263 }
2264 /**
2265 * @return {?}
2266 */
2267 static ngModelGroupException() {
2268 throw new Error(`formControlName cannot be used with an ngModelGroup parent. It is only compatible with parents
2269 that also have a "form" prefix: formGroupName, formArrayName, or formGroup.
2270
2271 Option 1: Update the parent to be formGroupName (reactive form strategy)
2272
2273 ${FormErrorExamples.formGroupName}
2274
2275 Option 2: Use ngModel instead of formControlName (template-driven strategy)
2276
2277 ${FormErrorExamples.ngModelGroup}`);
2278 }
2279 /**
2280 * @return {?}
2281 */
2282 static missingFormException() {
2283 throw new Error(`formGroup expects a FormGroup instance. Please pass one in.
2284
2285 Example:
2286
2287 ${FormErrorExamples.formControlName}`);
2288 }
2289 /**
2290 * @return {?}
2291 */
2292 static groupParentException() {
2293 throw new Error(`formGroupName must be used with a parent formGroup directive. You'll want to add a formGroup
2294 directive and pass it an existing FormGroup instance (you can create one in your class).
2295
2296 Example:
2297
2298 ${FormErrorExamples.formGroupName}`);
2299 }
2300 /**
2301 * @return {?}
2302 */
2303 static arrayParentException() {
2304 throw new Error(`formArrayName must be used with a parent formGroup directive. You'll want to add a formGroup
2305 directive and pass it an existing FormGroup instance (you can create one in your class).
2306
2307 Example:
2308
2309 ${FormErrorExamples.formArrayName}`);
2310 }
2311 /**
2312 * @return {?}
2313 */
2314 static disabledAttrWarning() {
2315 console.warn(`
2316 It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
2317 when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
2318 you. We recommend using this approach to avoid 'changed after checked' errors.
2319
2320 Example:
2321 form = new FormGroup({
2322 first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
2323 last: new FormControl('Drew', Validators.required)
2324 });
2325 `);
2326 }
2327 /**
2328 * @param {?} directiveName
2329 * @return {?}
2330 */
2331 static ngModelWarning(directiveName) {
2332 console.warn(`
2333 It looks like you're using ngModel on the same form field as ${directiveName}.
2334 Support for using the ngModel input property and ngModelChange event with
2335 reactive form directives has been deprecated in Angular v6 and will be removed
2336 in Angular v7.
2337
2338 For more information on this, see our API docs here:
2339 https://angular.io/api/forms/${directiveName === 'formControl' ? 'FormControlDirective'
2340 : 'FormControlName'}#use-with-ngmodel
2341 `);
2342 }
2343}
2344
2345/**
2346 * @fileoverview added by tsickle
2347 * Generated from: packages/forms/src/directives/select_control_value_accessor.ts
2348 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2349 */
2350/** @type {?} */
2351const SELECT_VALUE_ACCESSOR = {
2352 provide: NG_VALUE_ACCESSOR,
2353 useExisting: forwardRef((/**
2354 * @return {?}
2355 */
2356 () => SelectControlValueAccessor)),
2357 multi: true
2358};
2359/**
2360 * @param {?} id
2361 * @param {?} value
2362 * @return {?}
2363 */
2364function _buildValueString(id, value) {
2365 if (id == null)
2366 return `${value}`;
2367 if (value && typeof value === 'object')
2368 value = 'Object';
2369 return `${id}: ${value}`.slice(0, 50);
2370}
2371/**
2372 * @param {?} valueString
2373 * @return {?}
2374 */
2375function _extractId(valueString) {
2376 return valueString.split(':')[0];
2377}
2378/**
2379 * \@description
2380 * The `ControlValueAccessor` for writing select control values and listening to select control
2381 * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
2382 * `NgModel` directives.
2383 *
2384 * \@usageNotes
2385 *
2386 * ### Using select controls in a reactive form
2387 *
2388 * The following examples show how to use a select control in a reactive form.
2389 *
2390 * {\@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
2391 *
2392 * ### Using select controls in a template-driven form
2393 *
2394 * To use a select in a template-driven form, simply add an `ngModel` and a `name`
2395 * attribute to the main `<select>` tag.
2396 *
2397 * {\@example forms/ts/selectControl/select_control_example.ts region='Component'}
2398 *
2399 * ### Customizing option selection
2400 *
2401 * Angular uses object identity to select option. It's possible for the identities of items
2402 * to change while the data does not. This can happen, for example, if the items are produced
2403 * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
2404 * second response will produce objects with different identities.
2405 *
2406 * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
2407 * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
2408 * If `compareWith` is given, Angular selects option by the return value of the function.
2409 *
2410 * ```ts
2411 * const selectedCountriesControl = new FormControl();
2412 * ```
2413 *
2414 * ```
2415 * <select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
2416 * <option *ngFor="let country of countries" [ngValue]="country">
2417 * {{country.name}}
2418 * </option>
2419 * </select>
2420 *
2421 * compareFn(c1: Country, c2: Country): boolean {
2422 * return c1 && c2 ? c1.id === c2.id : c1 === c2;
2423 * }
2424 * ```
2425 *
2426 * **Note:** We listen to the 'change' event because 'input' events aren't fired
2427 * for selects in Firefox and IE:
2428 * https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
2429 * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
2430 *
2431 * \@ngModule ReactiveFormsModule
2432 * \@ngModule FormsModule
2433 * \@publicApi
2434 */
2435class SelectControlValueAccessor {
2436 /**
2437 * @param {?} _renderer
2438 * @param {?} _elementRef
2439 */
2440 constructor(_renderer, _elementRef) {
2441 this._renderer = _renderer;
2442 this._elementRef = _elementRef;
2443 /**
2444 * \@internal
2445 */
2446 this._optionMap = new Map();
2447 /**
2448 * \@internal
2449 */
2450 this._idCounter = 0;
2451 /**
2452 * \@description
2453 * The registered callback function called when a change event occurs on the input element.
2454 */
2455 this.onChange = (/**
2456 * @param {?} _
2457 * @return {?}
2458 */
2459 (_) => { });
2460 /**
2461 * \@description
2462 * The registered callback function called when a blur event occurs on the input element.
2463 */
2464 this.onTouched = (/**
2465 * @return {?}
2466 */
2467 () => { });
2468 this._compareWith = ɵlooseIdentical;
2469 }
2470 /**
2471 * \@description
2472 * Tracks the option comparison algorithm for tracking identities when
2473 * checking for changes.
2474 * @param {?} fn
2475 * @return {?}
2476 */
2477 set compareWith(fn) {
2478 if (typeof fn !== 'function') {
2479 throw new Error(`compareWith must be a function, but received ${JSON.stringify(fn)}`);
2480 }
2481 this._compareWith = fn;
2482 }
2483 /**
2484 * Sets the "value" property on the input element. The "selectedIndex"
2485 * property is also set if an ID is provided on the option element.
2486 *
2487 * @param {?} value The checked value
2488 * @return {?}
2489 */
2490 writeValue(value) {
2491 this.value = value;
2492 /** @type {?} */
2493 const id = this._getOptionId(value);
2494 if (id == null) {
2495 this._renderer.setProperty(this._elementRef.nativeElement, 'selectedIndex', -1);
2496 }
2497 /** @type {?} */
2498 const valueString = _buildValueString(id, value);
2499 this._renderer.setProperty(this._elementRef.nativeElement, 'value', valueString);
2500 }
2501 /**
2502 * \@description
2503 * Registers a function called when the control value changes.
2504 *
2505 * @param {?} fn The callback function
2506 * @return {?}
2507 */
2508 registerOnChange(fn) {
2509 this.onChange = (/**
2510 * @param {?} valueString
2511 * @return {?}
2512 */
2513 (valueString) => {
2514 this.value = this._getOptionValue(valueString);
2515 fn(this.value);
2516 });
2517 }
2518 /**
2519 * \@description
2520 * Registers a function called when the control is touched.
2521 *
2522 * @param {?} fn The callback function
2523 * @return {?}
2524 */
2525 registerOnTouched(fn) { this.onTouched = fn; }
2526 /**
2527 * Sets the "disabled" property on the select input element.
2528 *
2529 * @param {?} isDisabled The disabled value
2530 * @return {?}
2531 */
2532 setDisabledState(isDisabled) {
2533 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
2534 }
2535 /**
2536 * \@internal
2537 * @return {?}
2538 */
2539 _registerOption() { return (this._idCounter++).toString(); }
2540 /**
2541 * \@internal
2542 * @param {?} value
2543 * @return {?}
2544 */
2545 _getOptionId(value) {
2546 for (const id of Array.from(this._optionMap.keys())) {
2547 if (this._compareWith(this._optionMap.get(id), value))
2548 return id;
2549 }
2550 return null;
2551 }
2552 /**
2553 * \@internal
2554 * @param {?} valueString
2555 * @return {?}
2556 */
2557 _getOptionValue(valueString) {
2558 /** @type {?} */
2559 const id = _extractId(valueString);
2560 return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
2561 }
2562}
2563SelectControlValueAccessor.decorators = [
2564 { type: Directive, args: [{
2565 selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
2566 host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
2567 providers: [SELECT_VALUE_ACCESSOR]
2568 },] }
2569];
2570/** @nocollapse */
2571SelectControlValueAccessor.ctorParameters = () => [
2572 { type: Renderer2 },
2573 { type: ElementRef }
2574];
2575SelectControlValueAccessor.propDecorators = {
2576 compareWith: [{ type: Input }]
2577};
2578if (false) {
2579 /** @type {?} */
2580 SelectControlValueAccessor.prototype.value;
2581 /**
2582 * \@internal
2583 * @type {?}
2584 */
2585 SelectControlValueAccessor.prototype._optionMap;
2586 /**
2587 * \@internal
2588 * @type {?}
2589 */
2590 SelectControlValueAccessor.prototype._idCounter;
2591 /**
2592 * \@description
2593 * The registered callback function called when a change event occurs on the input element.
2594 * @type {?}
2595 */
2596 SelectControlValueAccessor.prototype.onChange;
2597 /**
2598 * \@description
2599 * The registered callback function called when a blur event occurs on the input element.
2600 * @type {?}
2601 */
2602 SelectControlValueAccessor.prototype.onTouched;
2603 /**
2604 * @type {?}
2605 * @private
2606 */
2607 SelectControlValueAccessor.prototype._compareWith;
2608 /**
2609 * @type {?}
2610 * @private
2611 */
2612 SelectControlValueAccessor.prototype._renderer;
2613 /**
2614 * @type {?}
2615 * @private
2616 */
2617 SelectControlValueAccessor.prototype._elementRef;
2618}
2619/**
2620 * \@description
2621 * Marks `<option>` as dynamic, so Angular can be notified when options change.
2622 *
2623 * @see `SelectControlValueAccessor`
2624 *
2625 * \@ngModule ReactiveFormsModule
2626 * \@ngModule FormsModule
2627 * \@publicApi
2628 */
2629class NgSelectOption {
2630 /**
2631 * @param {?} _element
2632 * @param {?} _renderer
2633 * @param {?} _select
2634 */
2635 constructor(_element, _renderer, _select) {
2636 this._element = _element;
2637 this._renderer = _renderer;
2638 this._select = _select;
2639 if (this._select)
2640 this.id = this._select._registerOption();
2641 }
2642 /**
2643 * \@description
2644 * Tracks the value bound to the option element. Unlike the value binding,
2645 * ngValue supports binding to objects.
2646 * @param {?} value
2647 * @return {?}
2648 */
2649 set ngValue(value) {
2650 if (this._select == null)
2651 return;
2652 this._select._optionMap.set(this.id, value);
2653 this._setElementValue(_buildValueString(this.id, value));
2654 this._select.writeValue(this._select.value);
2655 }
2656 /**
2657 * \@description
2658 * Tracks simple string values bound to the option element.
2659 * For objects, use the `ngValue` input binding.
2660 * @param {?} value
2661 * @return {?}
2662 */
2663 set value(value) {
2664 this._setElementValue(value);
2665 if (this._select)
2666 this._select.writeValue(this._select.value);
2667 }
2668 /**
2669 * \@internal
2670 * @param {?} value
2671 * @return {?}
2672 */
2673 _setElementValue(value) {
2674 this._renderer.setProperty(this._element.nativeElement, 'value', value);
2675 }
2676 /**
2677 * \@description
2678 * Lifecycle method called before the directive's instance is destroyed. For internal use only.
2679 * @return {?}
2680 */
2681 ngOnDestroy() {
2682 if (this._select) {
2683 this._select._optionMap.delete(this.id);
2684 this._select.writeValue(this._select.value);
2685 }
2686 }
2687}
2688NgSelectOption.decorators = [
2689 { type: Directive, args: [{ selector: 'option' },] }
2690];
2691/** @nocollapse */
2692NgSelectOption.ctorParameters = () => [
2693 { type: ElementRef },
2694 { type: Renderer2 },
2695 { type: SelectControlValueAccessor, decorators: [{ type: Optional }, { type: Host }] }
2696];
2697NgSelectOption.propDecorators = {
2698 ngValue: [{ type: Input, args: ['ngValue',] }],
2699 value: [{ type: Input, args: ['value',] }]
2700};
2701if (false) {
2702 /**
2703 * \@description
2704 * ID of the option element
2705 * @type {?}
2706 */
2707 NgSelectOption.prototype.id;
2708 /**
2709 * @type {?}
2710 * @private
2711 */
2712 NgSelectOption.prototype._element;
2713 /**
2714 * @type {?}
2715 * @private
2716 */
2717 NgSelectOption.prototype._renderer;
2718 /**
2719 * @type {?}
2720 * @private
2721 */
2722 NgSelectOption.prototype._select;
2723}
2724
2725/**
2726 * @fileoverview added by tsickle
2727 * Generated from: packages/forms/src/directives/select_multiple_control_value_accessor.ts
2728 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2729 */
2730/** @type {?} */
2731const SELECT_MULTIPLE_VALUE_ACCESSOR = {
2732 provide: NG_VALUE_ACCESSOR,
2733 useExisting: forwardRef((/**
2734 * @return {?}
2735 */
2736 () => SelectMultipleControlValueAccessor)),
2737 multi: true
2738};
2739/**
2740 * @param {?} id
2741 * @param {?} value
2742 * @return {?}
2743 */
2744function _buildValueString$1(id, value) {
2745 if (id == null)
2746 return `${value}`;
2747 if (typeof value === 'string')
2748 value = `'${value}'`;
2749 if (value && typeof value === 'object')
2750 value = 'Object';
2751 return `${id}: ${value}`.slice(0, 50);
2752}
2753/**
2754 * @param {?} valueString
2755 * @return {?}
2756 */
2757function _extractId$1(valueString) {
2758 return valueString.split(':')[0];
2759}
2760/**
2761 * Mock interface for HTML Options
2762 * @record
2763 */
2764function HTMLOption() { }
2765if (false) {
2766 /** @type {?} */
2767 HTMLOption.prototype.value;
2768 /** @type {?} */
2769 HTMLOption.prototype.selected;
2770}
2771/**
2772 * Mock interface for HTMLCollection
2773 * @abstract
2774 */
2775class HTMLCollection {
2776}
2777if (false) {
2778 /** @type {?} */
2779 HTMLCollection.prototype.length;
2780 /**
2781 * @abstract
2782 * @param {?} _
2783 * @return {?}
2784 */
2785 HTMLCollection.prototype.item = function (_) { };
2786}
2787/**
2788 * \@description
2789 * The `ControlValueAccessor` for writing multi-select control values and listening to multi-select control
2790 * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
2791 * directives.
2792 *
2793 * @see `SelectControlValueAccessor`
2794 *
2795 * \@usageNotes
2796 *
2797 * ### Using a multi-select control
2798 *
2799 * The follow example shows you how to use a multi-select control with a reactive form.
2800 *
2801 * ```ts
2802 * const countryControl = new FormControl();
2803 * ```
2804 *
2805 * ```
2806 * <select multiple name="countries" [formControl]="countryControl">
2807 * <option *ngFor="let country of countries" [ngValue]="country">
2808 * {{ country.name }}
2809 * </option>
2810 * </select>
2811 * ```
2812 *
2813 * ### Customizing option selection
2814 *
2815 * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
2816 * See the `SelectControlValueAccessor` for usage.
2817 *
2818 * \@ngModule ReactiveFormsModule
2819 * \@ngModule FormsModule
2820 * \@publicApi
2821 */
2822class SelectMultipleControlValueAccessor {
2823 /**
2824 * @param {?} _renderer
2825 * @param {?} _elementRef
2826 */
2827 constructor(_renderer, _elementRef) {
2828 this._renderer = _renderer;
2829 this._elementRef = _elementRef;
2830 /**
2831 * \@internal
2832 */
2833 this._optionMap = new Map();
2834 /**
2835 * \@internal
2836 */
2837 this._idCounter = 0;
2838 /**
2839 * \@description
2840 * The registered callback function called when a change event occurs on the input element.
2841 */
2842 this.onChange = (/**
2843 * @param {?} _
2844 * @return {?}
2845 */
2846 (_) => { });
2847 /**
2848 * \@description
2849 * The registered callback function called when a blur event occurs on the input element.
2850 */
2851 this.onTouched = (/**
2852 * @return {?}
2853 */
2854 () => { });
2855 this._compareWith = ɵlooseIdentical;
2856 }
2857 /**
2858 * \@description
2859 * Tracks the option comparison algorithm for tracking identities when
2860 * checking for changes.
2861 * @param {?} fn
2862 * @return {?}
2863 */
2864 set compareWith(fn) {
2865 if (typeof fn !== 'function') {
2866 throw new Error(`compareWith must be a function, but received ${JSON.stringify(fn)}`);
2867 }
2868 this._compareWith = fn;
2869 }
2870 /**
2871 * \@description
2872 * Sets the "value" property on one or of more
2873 * of the select's options.
2874 *
2875 * @param {?} value The value
2876 * @return {?}
2877 */
2878 writeValue(value) {
2879 this.value = value;
2880 /** @type {?} */
2881 let optionSelectedStateSetter;
2882 if (Array.isArray(value)) {
2883 // convert values to ids
2884 /** @type {?} */
2885 const ids = value.map((/**
2886 * @param {?} v
2887 * @return {?}
2888 */
2889 (v) => this._getOptionId(v)));
2890 optionSelectedStateSetter = (/**
2891 * @param {?} opt
2892 * @param {?} o
2893 * @return {?}
2894 */
2895 (opt, o) => { opt._setSelected(ids.indexOf(o.toString()) > -1); });
2896 }
2897 else {
2898 optionSelectedStateSetter = (/**
2899 * @param {?} opt
2900 * @param {?} o
2901 * @return {?}
2902 */
2903 (opt, o) => { opt._setSelected(false); });
2904 }
2905 this._optionMap.forEach(optionSelectedStateSetter);
2906 }
2907 /**
2908 * \@description
2909 * Registers a function called when the control value changes
2910 * and writes an array of the selected options.
2911 *
2912 * @param {?} fn The callback function
2913 * @return {?}
2914 */
2915 registerOnChange(fn) {
2916 this.onChange = (/**
2917 * @param {?} _
2918 * @return {?}
2919 */
2920 (_) => {
2921 /** @type {?} */
2922 const selected = [];
2923 if (_.hasOwnProperty('selectedOptions')) {
2924 /** @type {?} */
2925 const options = _.selectedOptions;
2926 for (let i = 0; i < options.length; i++) {
2927 /** @type {?} */
2928 const opt = options.item(i);
2929 /** @type {?} */
2930 const val = this._getOptionValue(opt.value);
2931 selected.push(val);
2932 }
2933 }
2934 // Degrade on IE
2935 else {
2936 /** @type {?} */
2937 const options = (/** @type {?} */ (_.options));
2938 for (let i = 0; i < options.length; i++) {
2939 /** @type {?} */
2940 const opt = options.item(i);
2941 if (opt.selected) {
2942 /** @type {?} */
2943 const val = this._getOptionValue(opt.value);
2944 selected.push(val);
2945 }
2946 }
2947 }
2948 this.value = selected;
2949 fn(selected);
2950 });
2951 }
2952 /**
2953 * \@description
2954 * Registers a function called when the control is touched.
2955 *
2956 * @param {?} fn The callback function
2957 * @return {?}
2958 */
2959 registerOnTouched(fn) { this.onTouched = fn; }
2960 /**
2961 * Sets the "disabled" property on the select input element.
2962 *
2963 * @param {?} isDisabled The disabled value
2964 * @return {?}
2965 */
2966 setDisabledState(isDisabled) {
2967 this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
2968 }
2969 /**
2970 * \@internal
2971 * @param {?} value
2972 * @return {?}
2973 */
2974 _registerOption(value) {
2975 /** @type {?} */
2976 const id = (this._idCounter++).toString();
2977 this._optionMap.set(id, value);
2978 return id;
2979 }
2980 /**
2981 * \@internal
2982 * @param {?} value
2983 * @return {?}
2984 */
2985 _getOptionId(value) {
2986 for (const id of Array.from(this._optionMap.keys())) {
2987 if (this._compareWith((/** @type {?} */ (this._optionMap.get(id)))._value, value))
2988 return id;
2989 }
2990 return null;
2991 }
2992 /**
2993 * \@internal
2994 * @param {?} valueString
2995 * @return {?}
2996 */
2997 _getOptionValue(valueString) {
2998 /** @type {?} */
2999 const id = _extractId$1(valueString);
3000 return this._optionMap.has(id) ? (/** @type {?} */ (this._optionMap.get(id)))._value : valueString;
3001 }
3002}
3003SelectMultipleControlValueAccessor.decorators = [
3004 { type: Directive, args: [{
3005 selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
3006 host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' },
3007 providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
3008 },] }
3009];
3010/** @nocollapse */
3011SelectMultipleControlValueAccessor.ctorParameters = () => [
3012 { type: Renderer2 },
3013 { type: ElementRef }
3014];
3015SelectMultipleControlValueAccessor.propDecorators = {
3016 compareWith: [{ type: Input }]
3017};
3018if (false) {
3019 /**
3020 * \@description
3021 * The current value
3022 * @type {?}
3023 */
3024 SelectMultipleControlValueAccessor.prototype.value;
3025 /**
3026 * \@internal
3027 * @type {?}
3028 */
3029 SelectMultipleControlValueAccessor.prototype._optionMap;
3030 /**
3031 * \@internal
3032 * @type {?}
3033 */
3034 SelectMultipleControlValueAccessor.prototype._idCounter;
3035 /**
3036 * \@description
3037 * The registered callback function called when a change event occurs on the input element.
3038 * @type {?}
3039 */
3040 SelectMultipleControlValueAccessor.prototype.onChange;
3041 /**
3042 * \@description
3043 * The registered callback function called when a blur event occurs on the input element.
3044 * @type {?}
3045 */
3046 SelectMultipleControlValueAccessor.prototype.onTouched;
3047 /**
3048 * @type {?}
3049 * @private
3050 */
3051 SelectMultipleControlValueAccessor.prototype._compareWith;
3052 /**
3053 * @type {?}
3054 * @private
3055 */
3056 SelectMultipleControlValueAccessor.prototype._renderer;
3057 /**
3058 * @type {?}
3059 * @private
3060 */
3061 SelectMultipleControlValueAccessor.prototype._elementRef;
3062}
3063/**
3064 * \@description
3065 * Marks `<option>` as dynamic, so Angular can be notified when options change.
3066 *
3067 * @see `SelectMultipleControlValueAccessor`
3068 *
3069 * \@ngModule ReactiveFormsModule
3070 * \@ngModule FormsModule
3071 * \@publicApi
3072 */
3073class ɵNgSelectMultipleOption {
3074 /**
3075 * @param {?} _element
3076 * @param {?} _renderer
3077 * @param {?} _select
3078 */
3079 constructor(_element, _renderer, _select) {
3080 this._element = _element;
3081 this._renderer = _renderer;
3082 this._select = _select;
3083 if (this._select) {
3084 this.id = this._select._registerOption(this);
3085 }
3086 }
3087 /**
3088 * \@description
3089 * Tracks the value bound to the option element. Unlike the value binding,
3090 * ngValue supports binding to objects.
3091 * @param {?} value
3092 * @return {?}
3093 */
3094 set ngValue(value) {
3095 if (this._select == null)
3096 return;
3097 this._value = value;
3098 this._setElementValue(_buildValueString$1(this.id, value));
3099 this._select.writeValue(this._select.value);
3100 }
3101 /**
3102 * \@description
3103 * Tracks simple string values bound to the option element.
3104 * For objects, use the `ngValue` input binding.
3105 * @param {?} value
3106 * @return {?}
3107 */
3108 set value(value) {
3109 if (this._select) {
3110 this._value = value;
3111 this._setElementValue(_buildValueString$1(this.id, value));
3112 this._select.writeValue(this._select.value);
3113 }
3114 else {
3115 this._setElementValue(value);
3116 }
3117 }
3118 /**
3119 * \@internal
3120 * @param {?} value
3121 * @return {?}
3122 */
3123 _setElementValue(value) {
3124 this._renderer.setProperty(this._element.nativeElement, 'value', value);
3125 }
3126 /**
3127 * \@internal
3128 * @param {?} selected
3129 * @return {?}
3130 */
3131 _setSelected(selected) {
3132 this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
3133 }
3134 /**
3135 * \@description
3136 * Lifecycle method called before the directive's instance is destroyed. For internal use only.
3137 * @return {?}
3138 */
3139 ngOnDestroy() {
3140 if (this._select) {
3141 this._select._optionMap.delete(this.id);
3142 this._select.writeValue(this._select.value);
3143 }
3144 }
3145}
3146ɵNgSelectMultipleOption.decorators = [
3147 { type: Directive, args: [{ selector: 'option' },] }
3148];
3149/** @nocollapse */
3150ɵNgSelectMultipleOption.ctorParameters = () => [
3151 { type: ElementRef },
3152 { type: Renderer2 },
3153 { type: SelectMultipleControlValueAccessor, decorators: [{ type: Optional }, { type: Host }] }
3154];
3155ɵNgSelectMultipleOption.propDecorators = {
3156 ngValue: [{ type: Input, args: ['ngValue',] }],
3157 value: [{ type: Input, args: ['value',] }]
3158};
3159if (false) {
3160 /** @type {?} */
3161 ɵNgSelectMultipleOption.prototype.id;
3162 /**
3163 * \@internal
3164 * @type {?}
3165 */
3166 ɵNgSelectMultipleOption.prototype._value;
3167 /**
3168 * @type {?}
3169 * @private
3170 */
3171 ɵNgSelectMultipleOption.prototype._element;
3172 /**
3173 * @type {?}
3174 * @private
3175 */
3176 ɵNgSelectMultipleOption.prototype._renderer;
3177 /**
3178 * @type {?}
3179 * @private
3180 */
3181 ɵNgSelectMultipleOption.prototype._select;
3182}
3183
3184/**
3185 * @fileoverview added by tsickle
3186 * Generated from: packages/forms/src/directives/shared.ts
3187 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
3188 */
3189/**
3190 * @param {?} name
3191 * @param {?} parent
3192 * @return {?}
3193 */
3194function controlPath(name, parent) {
3195 return [...(/** @type {?} */ (parent.path)), (/** @type {?} */ (name))];
3196}
3197/**
3198 * @param {?} control
3199 * @param {?} dir
3200 * @return {?}
3201 */
3202function setUpControl(control, dir) {
3203 if (!control)
3204 _throwError(dir, 'Cannot find control with');
3205 if (!dir.valueAccessor)
3206 _throwError(dir, 'No value accessor for form control with');
3207 control.validator = Validators.compose([(/** @type {?} */ (control.validator)), dir.validator]);
3208 control.asyncValidator = Validators.composeAsync([(/** @type {?} */ (control.asyncValidator)), dir.asyncValidator]);
3209 (/** @type {?} */ (dir.valueAccessor)).writeValue(control.value);
3210 setUpViewChangePipeline(control, dir);
3211 setUpModelChangePipeline(control, dir);
3212 setUpBlurPipeline(control, dir);
3213 if ((/** @type {?} */ (dir.valueAccessor)).setDisabledState) {
3214 control.registerOnDisabledChange((/**
3215 * @param {?} isDisabled
3216 * @return {?}
3217 */
3218 (isDisabled) => { (/** @type {?} */ ((/** @type {?} */ (dir.valueAccessor)).setDisabledState))(isDisabled); }));
3219 }
3220 // re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
3221 dir._rawValidators.forEach((/**
3222 * @param {?} validator
3223 * @return {?}
3224 */
3225 (validator) => {
3226 if (((/** @type {?} */ (validator))).registerOnValidatorChange)
3227 (/** @type {?} */ (((/** @type {?} */ (validator))).registerOnValidatorChange))((/**
3228 * @return {?}
3229 */
3230 () => control.updateValueAndValidity()));
3231 }));
3232 dir._rawAsyncValidators.forEach((/**
3233 * @param {?} validator
3234 * @return {?}
3235 */
3236 (validator) => {
3237 if (((/** @type {?} */ (validator))).registerOnValidatorChange)
3238 (/** @type {?} */ (((/** @type {?} */ (validator))).registerOnValidatorChange))((/**
3239 * @return {?}
3240 */
3241 () => control.updateValueAndValidity()));
3242 }));
3243}
3244/**
3245 * @param {?} control
3246 * @param {?} dir
3247 * @return {?}
3248 */
3249function cleanUpControl(control, dir) {
3250 (/** @type {?} */ (dir.valueAccessor)).registerOnChange((/**
3251 * @return {?}
3252 */
3253 () => _noControlError(dir)));
3254 (/** @type {?} */ (dir.valueAccessor)).registerOnTouched((/**
3255 * @return {?}
3256 */
3257 () => _noControlError(dir)));
3258 dir._rawValidators.forEach((/**
3259 * @param {?} validator
3260 * @return {?}
3261 */
3262 (validator) => {
3263 if (validator.registerOnValidatorChange) {
3264 validator.registerOnValidatorChange(null);
3265 }
3266 }));
3267 dir._rawAsyncValidators.forEach((/**
3268 * @param {?} validator
3269 * @return {?}
3270 */
3271 (validator) => {
3272 if (validator.registerOnValidatorChange) {
3273 validator.registerOnValidatorChange(null);
3274 }
3275 }));
3276 if (control)
3277 control._clearChangeFns();
3278}
3279/**
3280 * @param {?} control
3281 * @param {?} dir
3282 * @return {?}
3283 */
3284function setUpViewChangePipeline(control, dir) {
3285 (/** @type {?} */ (dir.valueAccessor)).registerOnChange((/**
3286 * @param {?} newValue
3287 * @return {?}
3288 */
3289 (newValue) => {
3290 control._pendingValue = newValue;
3291 control._pendingChange = true;
3292 control._pendingDirty = true;
3293 if (control.updateOn === 'change')
3294 updateControl(control, dir);
3295 }));
3296}
3297/**
3298 * @param {?} control
3299 * @param {?} dir
3300 * @return {?}
3301 */
3302function setUpBlurPipeline(control, dir) {
3303 (/** @type {?} */ (dir.valueAccessor)).registerOnTouched((/**
3304 * @return {?}
3305 */
3306 () => {
3307 control._pendingTouched = true;
3308 if (control.updateOn === 'blur' && control._pendingChange)
3309 updateControl(control, dir);
3310 if (control.updateOn !== 'submit')
3311 control.markAsTouched();
3312 }));
3313}
3314/**
3315 * @param {?} control
3316 * @param {?} dir
3317 * @return {?}
3318 */
3319function updateControl(control, dir) {
3320 if (control._pendingDirty)
3321 control.markAsDirty();
3322 control.setValue(control._pendingValue, { emitModelToViewChange: false });
3323 dir.viewToModelUpdate(control._pendingValue);
3324 control._pendingChange = false;
3325}
3326/**
3327 * @param {?} control
3328 * @param {?} dir
3329 * @return {?}
3330 */
3331function setUpModelChangePipeline(control, dir) {
3332 control.registerOnChange((/**
3333 * @param {?} newValue
3334 * @param {?} emitModelEvent
3335 * @return {?}
3336 */
3337 (newValue, emitModelEvent) => {
3338 // control -> view
3339 (/** @type {?} */ (dir.valueAccessor)).writeValue(newValue);
3340 // control -> ngModel
3341 if (emitModelEvent)
3342 dir.viewToModelUpdate(newValue);
3343 }));
3344}
3345/**
3346 * @param {?} control
3347 * @param {?} dir
3348 * @return {?}
3349 */
3350function setUpFormContainer(control, dir) {
3351 if (control == null)
3352 _throwError(dir, 'Cannot find control with');
3353 control.validator = Validators.compose([control.validator, dir.validator]);
3354 control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
3355}
3356/**
3357 * @param {?} dir
3358 * @return {?}
3359 */
3360function _noControlError(dir) {
3361 return _throwError(dir, 'There is no FormControl instance attached to form control element with');
3362}
3363/**
3364 * @param {?} dir
3365 * @param {?} message
3366 * @return {?}
3367 */
3368function _throwError(dir, message) {
3369 /** @type {?} */
3370 let messageEnd;
3371 if ((/** @type {?} */ (dir.path)).length > 1) {
3372 messageEnd = `path: '${(/** @type {?} */ (dir.path)).join(' -> ')}'`;
3373 }
3374 else if ((/** @type {?} */ (dir.path))[0]) {
3375 messageEnd = `name: '${dir.path}'`;
3376 }
3377 else {
3378 messageEnd = 'unspecified name attribute';
3379 }
3380 throw new Error(`${message} ${messageEnd}`);
3381}
3382/**
3383 * @param {?} validators
3384 * @return {?}
3385 */
3386function composeValidators(validators) {
3387 return validators != null ? Validators.compose(validators.map(normalizeValidator)) : null;
3388}
3389/**
3390 * @param {?} validators
3391 * @return {?}
3392 */
3393function composeAsyncValidators(validators) {
3394 return validators != null ? Validators.composeAsync(validators.map(normalizeAsyncValidator)) :
3395 null;
3396}
3397/**
3398 * @param {?} changes
3399 * @param {?} viewModel
3400 * @return {?}
3401 */
3402function isPropertyUpdated(changes, viewModel) {
3403 if (!changes.hasOwnProperty('model'))
3404 return false;
3405 /** @type {?} */
3406 const change = changes['model'];
3407 if (change.isFirstChange())
3408 return true;
3409 return !ɵlooseIdentical(viewModel, change.currentValue);
3410}
3411/** @type {?} */
3412const BUILTIN_ACCESSORS = [
3413 CheckboxControlValueAccessor,
3414 RangeValueAccessor,
3415 NumberValueAccessor,
3416 SelectControlValueAccessor,
3417 SelectMultipleControlValueAccessor,
3418 RadioControlValueAccessor,
3419];
3420/**
3421 * @param {?} valueAccessor
3422 * @return {?}
3423 */
3424function isBuiltInAccessor(valueAccessor) {
3425 return BUILTIN_ACCESSORS.some((/**
3426 * @param {?} a
3427 * @return {?}
3428 */
3429 a => valueAccessor.constructor === a));
3430}
3431/**
3432 * @param {?} form
3433 * @param {?} directives
3434 * @return {?}
3435 */
3436function syncPendingControls(form, directives) {
3437 form._syncPendingControls();
3438 directives.forEach((/**
3439 * @param {?} dir
3440 * @return {?}
3441 */
3442 dir => {
3443 /** @type {?} */
3444 const control = (/** @type {?} */ (dir.control));
3445 if (control.updateOn === 'submit' && control._pendingChange) {
3446 dir.viewToModelUpdate(control._pendingValue);
3447 control._pendingChange = false;
3448 }
3449 }));
3450}
3451// TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
3452/**
3453 * @param {?} dir
3454 * @param {?} valueAccessors
3455 * @return {?}
3456 */
3457function selectValueAccessor(dir, valueAccessors) {
3458 if (!valueAccessors)
3459 return null;
3460 if (!Array.isArray(valueAccessors))
3461 _throwError(dir, 'Value accessor was not provided as an array for form control with');
3462 /** @type {?} */
3463 let defaultAccessor = undefined;
3464 /** @type {?} */
3465 let builtinAccessor = undefined;
3466 /** @type {?} */
3467 let customAccessor = undefined;
3468 valueAccessors.forEach((/**
3469 * @param {?} v
3470 * @return {?}
3471 */
3472 (v) => {
3473 if (v.constructor === DefaultValueAccessor) {
3474 defaultAccessor = v;
3475 }
3476 else if (isBuiltInAccessor(v)) {
3477 if (builtinAccessor)
3478 _throwError(dir, 'More than one built-in value accessor matches form control with');
3479 builtinAccessor = v;
3480 }
3481 else {
3482 if (customAccessor)
3483 _throwError(dir, 'More than one custom value accessor matches form control with');
3484 customAccessor = v;
3485 }
3486 }));
3487 if (customAccessor)
3488 return customAccessor;
3489 if (builtinAccessor)
3490 return builtinAccessor;
3491 if (defaultAccessor)
3492 return defaultAccessor;
3493 _throwError(dir, 'No valid value accessor for form control with');
3494 return null;
3495}
3496/**
3497 * @template T
3498 * @param {?} list
3499 * @param {?} el
3500 * @return {?}
3501 */
3502function removeDir(list, el) {
3503 /** @type {?} */
3504 const index = list.indexOf(el);
3505 if (index > -1)
3506 list.splice(index, 1);
3507}
3508// TODO(kara): remove after deprecation period
3509/**
3510 * @param {?} name
3511 * @param {?} type
3512 * @param {?} instance
3513 * @param {?} warningConfig
3514 * @return {?}
3515 */
3516function _ngModelWarning(name, type, instance, warningConfig) {
3517 if (!isDevMode() || warningConfig === 'never')
3518 return;
3519 if (((warningConfig === null || warningConfig === 'once') && !type._ngModelWarningSentOnce) ||
3520 (warningConfig === 'always' && !instance._ngModelWarningSent)) {
3521 ReactiveErrors.ngModelWarning(name);
3522 type._ngModelWarningSentOnce = true;
3523 instance._ngModelWarningSent = true;
3524 }
3525}
3526
3527/**
3528 * @fileoverview added by tsickle
3529 * Generated from: packages/forms/src/model.ts
3530 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
3531 */
3532/**
3533 * Reports that a FormControl is valid, meaning that no errors exist in the input value.
3534 *
3535 * @see `status`
3536 * @type {?}
3537 */
3538const VALID = 'VALID';
3539/**
3540 * Reports that a FormControl is invalid, meaning that an error exists in the input value.
3541 *
3542 * @see `status`
3543 * @type {?}
3544 */
3545const INVALID = 'INVALID';
3546/**
3547 * Reports that a FormControl is pending, meaning that that async validation is occurring and
3548 * errors are not yet available for the input value.
3549 *
3550 * @see `markAsPending`
3551 * @see `status`
3552 * @type {?}
3553 */
3554const PENDING = 'PENDING';
3555/**
3556 * Reports that a FormControl is disabled, meaning that the control is exempt from ancestor
3557 * calculations of validity or value.
3558 *
3559 * @see `markAsDisabled`
3560 * @see `status`
3561 * @type {?}
3562 */
3563const DISABLED = 'DISABLED';
3564/**
3565 * @param {?} control
3566 * @param {?} path
3567 * @param {?} delimiter
3568 * @return {?}
3569 */
3570function _find(control, path, delimiter) {
3571 if (path == null)
3572 return null;
3573 if (!Array.isArray(path)) {
3574 path = path.split(delimiter);
3575 }
3576 if (Array.isArray(path) && path.length === 0)
3577 return null;
3578 // Not using Array.reduce here due to a Chrome 80 bug
3579 // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
3580 /** @type {?} */
3581 let controlToFind = control;
3582 path.forEach((/**
3583 * @param {?} name
3584 * @return {?}
3585 */
3586 (name) => {
3587 if (controlToFind instanceof FormGroup) {
3588 controlToFind = controlToFind.controls.hasOwnProperty((/** @type {?} */ (name))) ?
3589 controlToFind.controls[name] :
3590 null;
3591 }
3592 else if (controlToFind instanceof FormArray) {
3593 controlToFind = controlToFind.at((/** @type {?} */ (name))) || null;
3594 }
3595 else {
3596 controlToFind = null;
3597 }
3598 }));
3599 return controlToFind;
3600}
3601/**
3602 * @param {?=} validatorOrOpts
3603 * @return {?}
3604 */
3605function coerceToValidator(validatorOrOpts) {
3606 /** @type {?} */
3607 const validator = (/** @type {?} */ ((isOptionsObj(validatorOrOpts) ? ((/** @type {?} */ (validatorOrOpts))).validators :
3608 validatorOrOpts)));
3609 return Array.isArray(validator) ? composeValidators(validator) : validator || null;
3610}
3611/**
3612 * @param {?=} asyncValidator
3613 * @param {?=} validatorOrOpts
3614 * @return {?}
3615 */
3616function coerceToAsyncValidator(asyncValidator, validatorOrOpts) {
3617 /** @type {?} */
3618 const origAsyncValidator = (/** @type {?} */ ((isOptionsObj(validatorOrOpts) ? ((/** @type {?} */ (validatorOrOpts))).asyncValidators :
3619 asyncValidator)));
3620 return Array.isArray(origAsyncValidator) ? composeAsyncValidators(origAsyncValidator) :
3621 origAsyncValidator || null;
3622}
3623/**
3624 * Interface for options provided to an `AbstractControl`.
3625 *
3626 * \@publicApi
3627 * @record
3628 */
3629function AbstractControlOptions() { }
3630if (false) {
3631 /**
3632 * \@description
3633 * The list of validators applied to a control.
3634 * @type {?|undefined}
3635 */
3636 AbstractControlOptions.prototype.validators;
3637 /**
3638 * \@description
3639 * The list of async validators applied to control.
3640 * @type {?|undefined}
3641 */
3642 AbstractControlOptions.prototype.asyncValidators;
3643 /**
3644 * \@description
3645 * The event name for control to update upon.
3646 * @type {?|undefined}
3647 */
3648 AbstractControlOptions.prototype.updateOn;
3649}
3650/**
3651 * @param {?=} validatorOrOpts
3652 * @return {?}
3653 */
3654function isOptionsObj(validatorOrOpts) {
3655 return validatorOrOpts != null && !Array.isArray(validatorOrOpts) &&
3656 typeof validatorOrOpts === 'object';
3657}
3658/**
3659 * This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
3660 *
3661 * It provides some of the shared behavior that all controls and groups of controls have, like
3662 * running validators, calculating status, and resetting state. It also defines the properties
3663 * that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
3664 * instantiated directly.
3665 *
3666 * @see [Forms Guide](/guide/forms)
3667 * @see [Reactive Forms Guide](/guide/reactive-forms)
3668 * @see [Dynamic Forms Guide](/guide/dynamic-form)
3669 *
3670 * \@publicApi
3671 * @abstract
3672 */
3673class AbstractControl {
3674 /**
3675 * Initialize the AbstractControl instance.
3676 *
3677 * @param {?} validator The function that determines the synchronous validity of this control.
3678 * @param {?} asyncValidator The function that determines the asynchronous validity of this
3679 * control.
3680 */
3681 constructor(validator, asyncValidator) {
3682 this.validator = validator;
3683 this.asyncValidator = asyncValidator;
3684 /**
3685 * \@internal
3686 */
3687 this._onCollectionChange = (/**
3688 * @return {?}
3689 */
3690 () => { });
3691 /**
3692 * A control is `pristine` if the user has not yet changed
3693 * the value in the UI.
3694 *
3695 * @return True if the user has not yet changed the value in the UI; compare `dirty`.
3696 * Programmatic changes to a control's value do not mark it dirty.
3697 */
3698 this.pristine = true;
3699 /**
3700 * True if the control is marked as `touched`.
3701 *
3702 * A control is marked `touched` once the user has triggered
3703 * a `blur` event on it.
3704 */
3705 this.touched = false;
3706 /**
3707 * \@internal
3708 */
3709 this._onDisabledChange = [];
3710 }
3711 /**
3712 * The parent control.
3713 * @return {?}
3714 */
3715 get parent() { return this._parent; }
3716 /**
3717 * A control is `valid` when its `status` is `VALID`.
3718 *
3719 * @see {\@link AbstractControl.status}
3720 *
3721 * @return {?} True if the control has passed all of its validation tests,
3722 * false otherwise.
3723 */
3724 get valid() { return this.status === VALID; }
3725 /**
3726 * A control is `invalid` when its `status` is `INVALID`.
3727 *
3728 * @see {\@link AbstractControl.status}
3729 *
3730 * @return {?} True if this control has failed one or more of its validation checks,
3731 * false otherwise.
3732 */
3733 get invalid() { return this.status === INVALID; }
3734 /**
3735 * A control is `pending` when its `status` is `PENDING`.
3736 *
3737 * @see {\@link AbstractControl.status}
3738 *
3739 * @return {?} True if this control is in the process of conducting a validation check,
3740 * false otherwise.
3741 */
3742 get pending() { return this.status == PENDING; }
3743 /**
3744 * A control is `disabled` when its `status` is `DISABLED`.
3745 *
3746 * Disabled controls are exempt from validation checks and
3747 * are not included in the aggregate value of their ancestor
3748 * controls.
3749 *
3750 * @see {\@link AbstractControl.status}
3751 *
3752 * @return {?} True if the control is disabled, false otherwise.
3753 */
3754 get disabled() { return this.status === DISABLED; }
3755 /**
3756 * A control is `enabled` as long as its `status` is not `DISABLED`.
3757 *
3758 * @see {\@link AbstractControl.status}
3759 *
3760 * @return {?} True if the control has any status other than 'DISABLED',
3761 * false if the status is 'DISABLED'.
3762 *
3763 */
3764 get enabled() { return this.status !== DISABLED; }
3765 /**
3766 * A control is `dirty` if the user has changed the value
3767 * in the UI.
3768 *
3769 * @return {?} True if the user has changed the value of this control in the UI; compare `pristine`.
3770 * Programmatic changes to a control's value do not mark it dirty.
3771 */
3772 get dirty() { return !this.pristine; }
3773 /**
3774 * True if the control has not been marked as touched
3775 *
3776 * A control is `untouched` if the user has not yet triggered
3777 * a `blur` event on it.
3778 * @return {?}
3779 */
3780 get untouched() { return !this.touched; }
3781 /**
3782 * Reports the update strategy of the `AbstractControl` (meaning
3783 * the event on which the control updates itself).
3784 * Possible values: `'change'` | `'blur'` | `'submit'`
3785 * Default value: `'change'`
3786 * @return {?}
3787 */
3788 get updateOn() {
3789 return this._updateOn ? this._updateOn : (this.parent ? this.parent.updateOn : 'change');
3790 }
3791 /**
3792 * Sets the synchronous validators that are active on this control. Calling
3793 * this overwrites any existing sync validators.
3794 *
3795 * When you add or remove a validator at run time, you must call
3796 * `updateValueAndValidity()` for the new validation to take effect.
3797 *
3798 * @param {?} newValidator
3799 * @return {?}
3800 */
3801 setValidators(newValidator) {
3802 this.validator = coerceToValidator(newValidator);
3803 }
3804 /**
3805 * Sets the async validators that are active on this control. Calling this
3806 * overwrites any existing async validators.
3807 *
3808 * When you add or remove a validator at run time, you must call
3809 * `updateValueAndValidity()` for the new validation to take effect.
3810 *
3811 * @param {?} newValidator
3812 * @return {?}
3813 */
3814 setAsyncValidators(newValidator) {
3815 this.asyncValidator = coerceToAsyncValidator(newValidator);
3816 }
3817 /**
3818 * Empties out the sync validator list.
3819 *
3820 * When you add or remove a validator at run time, you must call
3821 * `updateValueAndValidity()` for the new validation to take effect.
3822 *
3823 * @return {?}
3824 */
3825 clearValidators() { this.validator = null; }
3826 /**
3827 * Empties out the async validator list.
3828 *
3829 * When you add or remove a validator at run time, you must call
3830 * `updateValueAndValidity()` for the new validation to take effect.
3831 *
3832 * @return {?}
3833 */
3834 clearAsyncValidators() { this.asyncValidator = null; }
3835 /**
3836 * Marks the control as `touched`. A control is touched by focus and
3837 * blur events that do not change the value.
3838 *
3839 * @see `markAsUntouched()` / `markAsDirty()` / `markAsPristine()`
3840 *
3841 * @param {?=} opts Configuration options that determine how the control propagates changes
3842 * and emits events after marking is applied.
3843 * * `onlySelf`: When true, mark only this control. When false or not supplied,
3844 * marks all direct ancestors. Default is false.
3845 * @return {?}
3846 */
3847 markAsTouched(opts = {}) {
3848 ((/** @type {?} */ (this))).touched = true;
3849 if (this._parent && !opts.onlySelf) {
3850 this._parent.markAsTouched(opts);
3851 }
3852 }
3853 /**
3854 * Marks the control and all its descendant controls as `touched`.
3855 * @see `markAsTouched()`
3856 * @return {?}
3857 */
3858 markAllAsTouched() {
3859 this.markAsTouched({ onlySelf: true });
3860 this._forEachChild((/**
3861 * @param {?} control
3862 * @return {?}
3863 */
3864 (control) => control.markAllAsTouched()));
3865 }
3866 /**
3867 * Marks the control as `untouched`.
3868 *
3869 * If the control has any children, also marks all children as `untouched`
3870 * and recalculates the `touched` status of all parent controls.
3871 *
3872 * @see `markAsTouched()` / `markAsDirty()` / `markAsPristine()`
3873 *
3874 * @param {?=} opts Configuration options that determine how the control propagates changes
3875 * and emits events after the marking is applied.
3876 * * `onlySelf`: When true, mark only this control. When false or not supplied,
3877 * marks all direct ancestors. Default is false.
3878 * @return {?}
3879 */
3880 markAsUntouched(opts = {}) {
3881 ((/** @type {?} */ (this))).touched = false;
3882 this._pendingTouched = false;
3883 this._forEachChild((/**
3884 * @param {?} control
3885 * @return {?}
3886 */
3887 (control) => { control.markAsUntouched({ onlySelf: true }); }));
3888 if (this._parent && !opts.onlySelf) {
3889 this._parent._updateTouched(opts);
3890 }
3891 }
3892 /**
3893 * Marks the control as `dirty`. A control becomes dirty when
3894 * the control's value is changed through the UI; compare `markAsTouched`.
3895 *
3896 * @see `markAsTouched()` / `markAsUntouched()` / `markAsPristine()`
3897 *
3898 * @param {?=} opts Configuration options that determine how the control propagates changes
3899 * and emits events after marking is applied.
3900 * * `onlySelf`: When true, mark only this control. When false or not supplied,
3901 * marks all direct ancestors. Default is false.
3902 * @return {?}
3903 */
3904 markAsDirty(opts = {}) {
3905 ((/** @type {?} */ (this))).pristine = false;
3906 if (this._parent && !opts.onlySelf) {
3907 this._parent.markAsDirty(opts);
3908 }
3909 }
3910 /**
3911 * Marks the control as `pristine`.
3912 *
3913 * If the control has any children, marks all children as `pristine`,
3914 * and recalculates the `pristine` status of all parent
3915 * controls.
3916 *
3917 * @see `markAsTouched()` / `markAsUntouched()` / `markAsDirty()`
3918 *
3919 * @param {?=} opts Configuration options that determine how the control emits events after
3920 * marking is applied.
3921 * * `onlySelf`: When true, mark only this control. When false or not supplied,
3922 * marks all direct ancestors. Default is false..
3923 * @return {?}
3924 */
3925 markAsPristine(opts = {}) {
3926 ((/** @type {?} */ (this))).pristine = true;
3927 this._pendingDirty = false;
3928 this._forEachChild((/**
3929 * @param {?} control
3930 * @return {?}
3931 */
3932 (control) => { control.markAsPristine({ onlySelf: true }); }));
3933 if (this._parent && !opts.onlySelf) {
3934 this._parent._updatePristine(opts);
3935 }
3936 }
3937 /**
3938 * Marks the control as `pending`.
3939 *
3940 * A control is pending while the control performs async validation.
3941 *
3942 * @see {\@link AbstractControl.status}
3943 *
3944 * @param {?=} opts Configuration options that determine how the control propagates changes and
3945 * emits events after marking is applied.
3946 * * `onlySelf`: When true, mark only this control. When false or not supplied,
3947 * marks all direct ancestors. Default is false..
3948 * * `emitEvent`: When true or not supplied (the default), the `statusChanges`
3949 * observable emits an event with the latest status the control is marked pending.
3950 * When false, no events are emitted.
3951 *
3952 * @return {?}
3953 */
3954 markAsPending(opts = {}) {
3955 ((/** @type {?} */ (this))).status = PENDING;
3956 if (opts.emitEvent !== false) {
3957 ((/** @type {?} */ (this.statusChanges))).emit(this.status);
3958 }
3959 if (this._parent && !opts.onlySelf) {
3960 this._parent.markAsPending(opts);
3961 }
3962 }
3963 /**
3964 * Disables the control. This means the control is exempt from validation checks and
3965 * excluded from the aggregate value of any parent. Its status is `DISABLED`.
3966 *
3967 * If the control has children, all children are also disabled.
3968 *
3969 * @see {\@link AbstractControl.status}
3970 *
3971 * @param {?=} opts Configuration options that determine how the control propagates
3972 * changes and emits events after the control is disabled.
3973 * * `onlySelf`: When true, mark only this control. When false or not supplied,
3974 * marks all direct ancestors. Default is false..
3975 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
3976 * `valueChanges`
3977 * observables emit events with the latest status and value when the control is disabled.
3978 * When false, no events are emitted.
3979 * @return {?}
3980 */
3981 disable(opts = {}) {
3982 // If parent has been marked artificially dirty we don't want to re-calculate the
3983 // parent's dirtiness based on the children.
3984 /** @type {?} */
3985 const skipPristineCheck = this._parentMarkedDirty(opts.onlySelf);
3986 ((/** @type {?} */ (this))).status = DISABLED;
3987 ((/** @type {?} */ (this))).errors = null;
3988 this._forEachChild((/**
3989 * @param {?} control
3990 * @return {?}
3991 */
3992 (control) => { control.disable(Object.assign(Object.assign({}, opts), { onlySelf: true })); }));
3993 this._updateValue();
3994 if (opts.emitEvent !== false) {
3995 ((/** @type {?} */ (this.valueChanges))).emit(this.value);
3996 ((/** @type {?} */ (this.statusChanges))).emit(this.status);
3997 }
3998 this._updateAncestors(Object.assign(Object.assign({}, opts), { skipPristineCheck }));
3999 this._onDisabledChange.forEach((/**
4000 * @param {?} changeFn
4001 * @return {?}
4002 */
4003 (changeFn) => changeFn(true)));
4004 }
4005 /**
4006 * Enables the control. This means the control is included in validation checks and
4007 * the aggregate value of its parent. Its status recalculates based on its value and
4008 * its validators.
4009 *
4010 * By default, if the control has children, all children are enabled.
4011 *
4012 * @see {\@link AbstractControl.status}
4013 *
4014 * @param {?=} opts Configure options that control how the control propagates changes and
4015 * emits events when marked as untouched
4016 * * `onlySelf`: When true, mark only this control. When false or not supplied,
4017 * marks all direct ancestors. Default is false..
4018 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
4019 * `valueChanges`
4020 * observables emit events with the latest status and value when the control is enabled.
4021 * When false, no events are emitted.
4022 * @return {?}
4023 */
4024 enable(opts = {}) {
4025 // If parent has been marked artificially dirty we don't want to re-calculate the
4026 // parent's dirtiness based on the children.
4027 /** @type {?} */
4028 const skipPristineCheck = this._parentMarkedDirty(opts.onlySelf);
4029 ((/** @type {?} */ (this))).status = VALID;
4030 this._forEachChild((/**
4031 * @param {?} control
4032 * @return {?}
4033 */
4034 (control) => { control.enable(Object.assign(Object.assign({}, opts), { onlySelf: true })); }));
4035 this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
4036 this._updateAncestors(Object.assign(Object.assign({}, opts), { skipPristineCheck }));
4037 this._onDisabledChange.forEach((/**
4038 * @param {?} changeFn
4039 * @return {?}
4040 */
4041 (changeFn) => changeFn(false)));
4042 }
4043 /**
4044 * @private
4045 * @param {?} opts
4046 * @return {?}
4047 */
4048 _updateAncestors(opts) {
4049 if (this._parent && !opts.onlySelf) {
4050 this._parent.updateValueAndValidity(opts);
4051 if (!opts.skipPristineCheck) {
4052 this._parent._updatePristine();
4053 }
4054 this._parent._updateTouched();
4055 }
4056 }
4057 /**
4058 * @param {?} parent Sets the parent of the control
4059 * @return {?}
4060 */
4061 setParent(parent) { this._parent = parent; }
4062 /**
4063 * Recalculates the value and validation status of the control.
4064 *
4065 * By default, it also updates the value and validity of its ancestors.
4066 *
4067 * @param {?=} opts Configuration options determine how the control propagates changes and emits events
4068 * after updates and validity checks are applied.
4069 * * `onlySelf`: When true, only update this control. When false or not supplied,
4070 * update all direct ancestors. Default is false..
4071 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
4072 * `valueChanges`
4073 * observables emit events with the latest status and value when the control is updated.
4074 * When false, no events are emitted.
4075 * @return {?}
4076 */
4077 updateValueAndValidity(opts = {}) {
4078 this._setInitialStatus();
4079 this._updateValue();
4080 if (this.enabled) {
4081 this._cancelExistingSubscription();
4082 ((/** @type {?} */ (this))).errors = this._runValidator();
4083 ((/** @type {?} */ (this))).status = this._calculateStatus();
4084 if (this.status === VALID || this.status === PENDING) {
4085 this._runAsyncValidator(opts.emitEvent);
4086 }
4087 }
4088 if (opts.emitEvent !== false) {
4089 ((/** @type {?} */ (this.valueChanges))).emit(this.value);
4090 ((/** @type {?} */ (this.statusChanges))).emit(this.status);
4091 }
4092 if (this._parent && !opts.onlySelf) {
4093 this._parent.updateValueAndValidity(opts);
4094 }
4095 }
4096 /**
4097 * \@internal
4098 * @param {?=} opts
4099 * @return {?}
4100 */
4101 _updateTreeValidity(opts = { emitEvent: true }) {
4102 this._forEachChild((/**
4103 * @param {?} ctrl
4104 * @return {?}
4105 */
4106 (ctrl) => ctrl._updateTreeValidity(opts)));
4107 this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
4108 }
4109 /**
4110 * @private
4111 * @return {?}
4112 */
4113 _setInitialStatus() {
4114 ((/** @type {?} */ (this))).status = this._allControlsDisabled() ? DISABLED : VALID;
4115 }
4116 /**
4117 * @private
4118 * @return {?}
4119 */
4120 _runValidator() {
4121 return this.validator ? this.validator(this) : null;
4122 }
4123 /**
4124 * @private
4125 * @param {?=} emitEvent
4126 * @return {?}
4127 */
4128 _runAsyncValidator(emitEvent) {
4129 if (this.asyncValidator) {
4130 ((/** @type {?} */ (this))).status = PENDING;
4131 /** @type {?} */
4132 const obs = toObservable(this.asyncValidator(this));
4133 this._asyncValidationSubscription =
4134 obs.subscribe((/**
4135 * @param {?} errors
4136 * @return {?}
4137 */
4138 (errors) => this.setErrors(errors, { emitEvent })));
4139 }
4140 }
4141 /**
4142 * @private
4143 * @return {?}
4144 */
4145 _cancelExistingSubscription() {
4146 if (this._asyncValidationSubscription) {
4147 this._asyncValidationSubscription.unsubscribe();
4148 }
4149 }
4150 /**
4151 * Sets errors on a form control when running validations manually, rather than automatically.
4152 *
4153 * Calling `setErrors` also updates the validity of the parent control.
4154 *
4155 * \@usageNotes
4156 * ### Manually set the errors for a control
4157 *
4158 * ```
4159 * const login = new FormControl('someLogin');
4160 * login.setErrors({
4161 * notUnique: true
4162 * });
4163 *
4164 * expect(login.valid).toEqual(false);
4165 * expect(login.errors).toEqual({ notUnique: true });
4166 *
4167 * login.setValue('someOtherLogin');
4168 *
4169 * expect(login.valid).toEqual(true);
4170 * ```
4171 * @param {?} errors
4172 * @param {?=} opts
4173 * @return {?}
4174 */
4175 setErrors(errors, opts = {}) {
4176 ((/** @type {?} */ (this))).errors = errors;
4177 this._updateControlsErrors(opts.emitEvent !== false);
4178 }
4179 /**
4180 * Retrieves a child control given the control's name or path.
4181 *
4182 * \@usageNotes
4183 * ### Retrieve a nested control
4184 *
4185 * For example, to get a `name` control nested within a `person` sub-group:
4186 *
4187 * * `this.form.get('person.name');`
4188 *
4189 * -OR-
4190 *
4191 * * `this.form.get(['person', 'name']);`
4192 * @param {?} path A dot-delimited string or array of string/number values that define the path to the
4193 * control.
4194 *
4195 * @return {?}
4196 */
4197 get(path) { return _find(this, path, '.'); }
4198 /**
4199 * \@description
4200 * Reports error data for the control with the given path.
4201 *
4202 * \@usageNotes
4203 * For example, for the following `FormGroup`:
4204 *
4205 * ```
4206 * form = new FormGroup({
4207 * address: new FormGroup({ street: new FormControl() })
4208 * });
4209 * ```
4210 *
4211 * The path to the 'street' control from the root form would be 'address' -> 'street'.
4212 *
4213 * It can be provided to this method in one of two formats:
4214 *
4215 * 1. An array of string control names, e.g. `['address', 'street']`
4216 * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
4217 *
4218 * @param {?} errorCode The code of the error to check
4219 * @param {?=} path A list of control names that designates how to move from the current control
4220 * to the control that should be queried for errors.
4221 *
4222 * @return {?} error data for that particular error. If the control or error is not present,
4223 * null is returned.
4224 */
4225 getError(errorCode, path) {
4226 /** @type {?} */
4227 const control = path ? this.get(path) : this;
4228 return control && control.errors ? control.errors[errorCode] : null;
4229 }
4230 /**
4231 * \@description
4232 * Reports whether the control with the given path has the error specified.
4233 *
4234 * \@usageNotes
4235 * For example, for the following `FormGroup`:
4236 *
4237 * ```
4238 * form = new FormGroup({
4239 * address: new FormGroup({ street: new FormControl() })
4240 * });
4241 * ```
4242 *
4243 * The path to the 'street' control from the root form would be 'address' -> 'street'.
4244 *
4245 * It can be provided to this method in one of two formats:
4246 *
4247 * 1. An array of string control names, e.g. `['address', 'street']`
4248 * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
4249 *
4250 * If no path is given, this method checks for the error on the current control.
4251 *
4252 * @param {?} errorCode The code of the error to check
4253 * @param {?=} path A list of control names that designates how to move from the current control
4254 * to the control that should be queried for errors.
4255 *
4256 * @return {?} whether the given error is present in the control at the given path.
4257 *
4258 * If the control is not present, false is returned.
4259 */
4260 hasError(errorCode, path) {
4261 return !!this.getError(errorCode, path);
4262 }
4263 /**
4264 * Retrieves the top-level ancestor of this control.
4265 * @return {?}
4266 */
4267 get root() {
4268 /** @type {?} */
4269 let x = this;
4270 while (x._parent) {
4271 x = x._parent;
4272 }
4273 return x;
4274 }
4275 /**
4276 * \@internal
4277 * @param {?} emitEvent
4278 * @return {?}
4279 */
4280 _updateControlsErrors(emitEvent) {
4281 ((/** @type {?} */ (this))).status = this._calculateStatus();
4282 if (emitEvent) {
4283 ((/** @type {?} */ (this.statusChanges))).emit(this.status);
4284 }
4285 if (this._parent) {
4286 this._parent._updateControlsErrors(emitEvent);
4287 }
4288 }
4289 /**
4290 * \@internal
4291 * @return {?}
4292 */
4293 _initObservables() {
4294 ((/** @type {?} */ (this))).valueChanges = new EventEmitter();
4295 ((/** @type {?} */ (this))).statusChanges = new EventEmitter();
4296 }
4297 /**
4298 * @private
4299 * @return {?}
4300 */
4301 _calculateStatus() {
4302 if (this._allControlsDisabled())
4303 return DISABLED;
4304 if (this.errors)
4305 return INVALID;
4306 if (this._anyControlsHaveStatus(PENDING))
4307 return PENDING;
4308 if (this._anyControlsHaveStatus(INVALID))
4309 return INVALID;
4310 return VALID;
4311 }
4312 /**
4313 * \@internal
4314 * @param {?} status
4315 * @return {?}
4316 */
4317 _anyControlsHaveStatus(status) {
4318 return this._anyControls((/**
4319 * @param {?} control
4320 * @return {?}
4321 */
4322 (control) => control.status === status));
4323 }
4324 /**
4325 * \@internal
4326 * @return {?}
4327 */
4328 _anyControlsDirty() {
4329 return this._anyControls((/**
4330 * @param {?} control
4331 * @return {?}
4332 */
4333 (control) => control.dirty));
4334 }
4335 /**
4336 * \@internal
4337 * @return {?}
4338 */
4339 _anyControlsTouched() {
4340 return this._anyControls((/**
4341 * @param {?} control
4342 * @return {?}
4343 */
4344 (control) => control.touched));
4345 }
4346 /**
4347 * \@internal
4348 * @param {?=} opts
4349 * @return {?}
4350 */
4351 _updatePristine(opts = {}) {
4352 ((/** @type {?} */ (this))).pristine = !this._anyControlsDirty();
4353 if (this._parent && !opts.onlySelf) {
4354 this._parent._updatePristine(opts);
4355 }
4356 }
4357 /**
4358 * \@internal
4359 * @param {?=} opts
4360 * @return {?}
4361 */
4362 _updateTouched(opts = {}) {
4363 ((/** @type {?} */ (this))).touched = this._anyControlsTouched();
4364 if (this._parent && !opts.onlySelf) {
4365 this._parent._updateTouched(opts);
4366 }
4367 }
4368 /**
4369 * \@internal
4370 * @param {?} formState
4371 * @return {?}
4372 */
4373 _isBoxedValue(formState) {
4374 return typeof formState === 'object' && formState !== null &&
4375 Object.keys(formState).length === 2 && 'value' in formState && 'disabled' in formState;
4376 }
4377 /**
4378 * \@internal
4379 * @param {?} fn
4380 * @return {?}
4381 */
4382 _registerOnCollectionChange(fn) { this._onCollectionChange = fn; }
4383 /**
4384 * \@internal
4385 * @param {?=} opts
4386 * @return {?}
4387 */
4388 _setUpdateStrategy(opts) {
4389 if (isOptionsObj(opts) && ((/** @type {?} */ (opts))).updateOn != null) {
4390 this._updateOn = (/** @type {?} */ (((/** @type {?} */ (opts))).updateOn));
4391 }
4392 }
4393 /**
4394 * Check to see if parent has been marked artificially dirty.
4395 *
4396 * \@internal
4397 * @private
4398 * @param {?=} onlySelf
4399 * @return {?}
4400 */
4401 _parentMarkedDirty(onlySelf) {
4402 /** @type {?} */
4403 const parentDirty = this._parent && this._parent.dirty;
4404 return !onlySelf && parentDirty && !this._parent._anyControlsDirty();
4405 }
4406}
4407if (false) {
4408 /**
4409 * \@internal
4410 * @type {?}
4411 */
4412 AbstractControl.prototype._pendingDirty;
4413 /**
4414 * \@internal
4415 * @type {?}
4416 */
4417 AbstractControl.prototype._pendingTouched;
4418 /**
4419 * \@internal
4420 * @type {?}
4421 */
4422 AbstractControl.prototype._onCollectionChange;
4423 /**
4424 * \@internal
4425 * @type {?}
4426 */
4427 AbstractControl.prototype._updateOn;
4428 /**
4429 * @type {?}
4430 * @private
4431 */
4432 AbstractControl.prototype._parent;
4433 /**
4434 * @type {?}
4435 * @private
4436 */
4437 AbstractControl.prototype._asyncValidationSubscription;
4438 /**
4439 * The current value of the control.
4440 *
4441 * * For a `FormControl`, the current value.
4442 * * For an enabled `FormGroup`, the values of enabled controls as an object
4443 * with a key-value pair for each member of the group.
4444 * * For a disabled `FormGroup`, the values of all controls as an object
4445 * with a key-value pair for each member of the group.
4446 * * For a `FormArray`, the values of enabled controls as an array.
4447 *
4448 * @type {?}
4449 */
4450 AbstractControl.prototype.value;
4451 /**
4452 * The validation status of the control. There are four possible
4453 * validation status values:
4454 *
4455 * * **VALID**: This control has passed all validation checks.
4456 * * **INVALID**: This control has failed at least one validation check.
4457 * * **PENDING**: This control is in the midst of conducting a validation check.
4458 * * **DISABLED**: This control is exempt from validation checks.
4459 *
4460 * These status values are mutually exclusive, so a control cannot be
4461 * both valid AND invalid or invalid AND disabled.
4462 * @type {?}
4463 */
4464 AbstractControl.prototype.status;
4465 /**
4466 * An object containing any errors generated by failing validation,
4467 * or null if there are no errors.
4468 * @type {?}
4469 */
4470 AbstractControl.prototype.errors;
4471 /**
4472 * A control is `pristine` if the user has not yet changed
4473 * the value in the UI.
4474 *
4475 * \@return True if the user has not yet changed the value in the UI; compare `dirty`.
4476 * Programmatic changes to a control's value do not mark it dirty.
4477 * @type {?}
4478 */
4479 AbstractControl.prototype.pristine;
4480 /**
4481 * True if the control is marked as `touched`.
4482 *
4483 * A control is marked `touched` once the user has triggered
4484 * a `blur` event on it.
4485 * @type {?}
4486 */
4487 AbstractControl.prototype.touched;
4488 /**
4489 * A multicasting observable that emits an event every time the value of the control changes, in
4490 * the UI or programmatically. It also emits an event each time you call enable() or disable()
4491 * without passing along {emitEvent: false} as a function argument.
4492 * @type {?}
4493 */
4494 AbstractControl.prototype.valueChanges;
4495 /**
4496 * A multicasting observable that emits an event every time the validation `status` of the control
4497 * recalculates.
4498 *
4499 * @see {\@link AbstractControl.status}
4500 *
4501 * @type {?}
4502 */
4503 AbstractControl.prototype.statusChanges;
4504 /**
4505 * \@internal
4506 * @type {?}
4507 */
4508 AbstractControl.prototype._onDisabledChange;
4509 /** @type {?} */
4510 AbstractControl.prototype.validator;
4511 /** @type {?} */
4512 AbstractControl.prototype.asyncValidator;
4513 /**
4514 * Sets the value of the control. Abstract method (implemented in sub-classes).
4515 * @abstract
4516 * @param {?} value
4517 * @param {?=} options
4518 * @return {?}
4519 */
4520 AbstractControl.prototype.setValue = function (value, options) { };
4521 /**
4522 * Patches the value of the control. Abstract method (implemented in sub-classes).
4523 * @abstract
4524 * @param {?} value
4525 * @param {?=} options
4526 * @return {?}
4527 */
4528 AbstractControl.prototype.patchValue = function (value, options) { };
4529 /**
4530 * Resets the control. Abstract method (implemented in sub-classes).
4531 * @abstract
4532 * @param {?=} value
4533 * @param {?=} options
4534 * @return {?}
4535 */
4536 AbstractControl.prototype.reset = function (value, options) { };
4537 /**
4538 * \@internal
4539 * @abstract
4540 * @return {?}
4541 */
4542 AbstractControl.prototype._updateValue = function () { };
4543 /**
4544 * \@internal
4545 * @abstract
4546 * @param {?} cb
4547 * @return {?}
4548 */
4549 AbstractControl.prototype._forEachChild = function (cb) { };
4550 /**
4551 * \@internal
4552 * @abstract
4553 * @param {?} condition
4554 * @return {?}
4555 */
4556 AbstractControl.prototype._anyControls = function (condition) { };
4557 /**
4558 * \@internal
4559 * @abstract
4560 * @return {?}
4561 */
4562 AbstractControl.prototype._allControlsDisabled = function () { };
4563 /**
4564 * \@internal
4565 * @abstract
4566 * @return {?}
4567 */
4568 AbstractControl.prototype._syncPendingControls = function () { };
4569}
4570/**
4571 * Tracks the value and validation status of an individual form control.
4572 *
4573 * This is one of the three fundamental building blocks of Angular forms, along with
4574 * `FormGroup` and `FormArray`. It extends the `AbstractControl` class that
4575 * implements most of the base functionality for accessing the value, validation status,
4576 * user interactions and events.
4577 *
4578 * @see `AbstractControl`
4579 * @see [Reactive Forms Guide](guide/reactive-forms)
4580 * @see [Usage Notes](#usage-notes)
4581 *
4582 * \@usageNotes
4583 *
4584 * ### Initializing Form Controls
4585 *
4586 * Instantiate a `FormControl`, with an initial value.
4587 *
4588 * ```ts
4589 * const control = new FormControl('some value');
4590 * console.log(control.value); // 'some value'
4591 * ```
4592 *
4593 * The following example initializes the control with a form state object. The `value`
4594 * and `disabled` keys are required in this case.
4595 *
4596 * ```ts
4597 * const control = new FormControl({ value: 'n/a', disabled: true });
4598 * console.log(control.value); // 'n/a'
4599 * console.log(control.status); // 'DISABLED'
4600 * ```
4601 *
4602 * The following example initializes the control with a sync validator.
4603 *
4604 * ```ts
4605 * const control = new FormControl('', Validators.required);
4606 * console.log(control.value); // ''
4607 * console.log(control.status); // 'INVALID'
4608 * ```
4609 *
4610 * The following example initializes the control using an options object.
4611 *
4612 * ```ts
4613 * const control = new FormControl('', {
4614 * validators: Validators.required,
4615 * asyncValidators: myAsyncValidator
4616 * });
4617 * ```
4618 *
4619 * ### Configure the control to update on a blur event
4620 *
4621 * Set the `updateOn` option to `'blur'` to update on the blur `event`.
4622 *
4623 * ```ts
4624 * const control = new FormControl('', { updateOn: 'blur' });
4625 * ```
4626 *
4627 * ### Configure the control to update on a submit event
4628 *
4629 * Set the `updateOn` option to `'submit'` to update on a submit `event`.
4630 *
4631 * ```ts
4632 * const control = new FormControl('', { updateOn: 'submit' });
4633 * ```
4634 *
4635 * ### Reset the control back to an initial value
4636 *
4637 * You reset to a specific form state by passing through a standalone
4638 * value or a form state object that contains both a value and a disabled state
4639 * (these are the only two properties that cannot be calculated).
4640 *
4641 * ```ts
4642 * const control = new FormControl('Nancy');
4643 *
4644 * console.log(control.value); // 'Nancy'
4645 *
4646 * control.reset('Drew');
4647 *
4648 * console.log(control.value); // 'Drew'
4649 * ```
4650 *
4651 * ### Reset the control back to an initial value and disabled
4652 *
4653 * ```
4654 * const control = new FormControl('Nancy');
4655 *
4656 * console.log(control.value); // 'Nancy'
4657 * console.log(control.status); // 'VALID'
4658 *
4659 * control.reset({ value: 'Drew', disabled: true });
4660 *
4661 * console.log(control.value); // 'Drew'
4662 * console.log(control.status); // 'DISABLED'
4663 * ```
4664 *
4665 * \@publicApi
4666 */
4667class FormControl extends AbstractControl {
4668 /**
4669 * Creates a new `FormControl` instance.
4670 *
4671 * @param {?=} formState Initializes the control with an initial value,
4672 * or an object that defines the initial value and disabled state.
4673 *
4674 * @param {?=} validatorOrOpts A synchronous validator function, or an array of
4675 * such functions, or an `AbstractControlOptions` object that contains validation functions
4676 * and a validation trigger.
4677 *
4678 * @param {?=} asyncValidator A single async validator or array of async validator functions
4679 *
4680 */
4681 constructor(formState = null, validatorOrOpts, asyncValidator) {
4682 super(coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts));
4683 /**
4684 * \@internal
4685 */
4686 this._onChange = [];
4687 this._applyFormState(formState);
4688 this._setUpdateStrategy(validatorOrOpts);
4689 this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
4690 this._initObservables();
4691 }
4692 /**
4693 * Sets a new value for the form control.
4694 *
4695 * @param {?} value The new value for the control.
4696 * @param {?=} options Configuration options that determine how the control propagates changes
4697 * and emits events when the value changes.
4698 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
4699 * updateValueAndValidity} method.
4700 *
4701 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
4702 * false.
4703 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
4704 * `valueChanges`
4705 * observables emit events with the latest status and value when the control value is updated.
4706 * When false, no events are emitted.
4707 * * `emitModelToViewChange`: When true or not supplied (the default), each change triggers an
4708 * `onChange` event to
4709 * update the view.
4710 * * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
4711 * `ngModelChange`
4712 * event to update the model.
4713 *
4714 * @return {?}
4715 */
4716 setValue(value, options = {}) {
4717 ((/** @type {?} */ (this))).value = this._pendingValue = value;
4718 if (this._onChange.length && options.emitModelToViewChange !== false) {
4719 this._onChange.forEach((/**
4720 * @param {?} changeFn
4721 * @return {?}
4722 */
4723 (changeFn) => changeFn(this.value, options.emitViewToModelChange !== false)));
4724 }
4725 this.updateValueAndValidity(options);
4726 }
4727 /**
4728 * Patches the value of a control.
4729 *
4730 * This function is functionally the same as {\@link FormControl#setValue setValue} at this level.
4731 * It exists for symmetry with {\@link FormGroup#patchValue patchValue} on `FormGroups` and
4732 * `FormArrays`, where it does behave differently.
4733 *
4734 * @see `setValue` for options
4735 * @param {?} value
4736 * @param {?=} options
4737 * @return {?}
4738 */
4739 patchValue(value, options = {}) {
4740 this.setValue(value, options);
4741 }
4742 /**
4743 * Resets the form control, marking it `pristine` and `untouched`, and setting
4744 * the value to null.
4745 *
4746 * @param {?=} formState Resets the control with an initial value,
4747 * or an object that defines the initial value and disabled state.
4748 *
4749 * @param {?=} options Configuration options that determine how the control propagates changes
4750 * and emits events after the value changes.
4751 *
4752 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
4753 * false.
4754 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
4755 * `valueChanges`
4756 * observables emit events with the latest status and value when the control is reset.
4757 * When false, no events are emitted.
4758 *
4759 * @return {?}
4760 */
4761 reset(formState = null, options = {}) {
4762 this._applyFormState(formState);
4763 this.markAsPristine(options);
4764 this.markAsUntouched(options);
4765 this.setValue(this.value, options);
4766 this._pendingChange = false;
4767 }
4768 /**
4769 * \@internal
4770 * @return {?}
4771 */
4772 _updateValue() { }
4773 /**
4774 * \@internal
4775 * @param {?} condition
4776 * @return {?}
4777 */
4778 _anyControls(condition) { return false; }
4779 /**
4780 * \@internal
4781 * @return {?}
4782 */
4783 _allControlsDisabled() { return this.disabled; }
4784 /**
4785 * Register a listener for change events.
4786 *
4787 * @param {?} fn The method that is called when the value changes
4788 * @return {?}
4789 */
4790 registerOnChange(fn) { this._onChange.push(fn); }
4791 /**
4792 * \@internal
4793 * @return {?}
4794 */
4795 _clearChangeFns() {
4796 this._onChange = [];
4797 this._onDisabledChange = [];
4798 this._onCollectionChange = (/**
4799 * @return {?}
4800 */
4801 () => { });
4802 }
4803 /**
4804 * Register a listener for disabled events.
4805 *
4806 * @param {?} fn The method that is called when the disabled status changes.
4807 * @return {?}
4808 */
4809 registerOnDisabledChange(fn) {
4810 this._onDisabledChange.push(fn);
4811 }
4812 /**
4813 * \@internal
4814 * @param {?} cb
4815 * @return {?}
4816 */
4817 _forEachChild(cb) { }
4818 /**
4819 * \@internal
4820 * @return {?}
4821 */
4822 _syncPendingControls() {
4823 if (this.updateOn === 'submit') {
4824 if (this._pendingDirty)
4825 this.markAsDirty();
4826 if (this._pendingTouched)
4827 this.markAsTouched();
4828 if (this._pendingChange) {
4829 this.setValue(this._pendingValue, { onlySelf: true, emitModelToViewChange: false });
4830 return true;
4831 }
4832 }
4833 return false;
4834 }
4835 /**
4836 * @private
4837 * @param {?} formState
4838 * @return {?}
4839 */
4840 _applyFormState(formState) {
4841 if (this._isBoxedValue(formState)) {
4842 ((/** @type {?} */ (this))).value = this._pendingValue = formState.value;
4843 formState.disabled ? this.disable({ onlySelf: true, emitEvent: false }) :
4844 this.enable({ onlySelf: true, emitEvent: false });
4845 }
4846 else {
4847 ((/** @type {?} */ (this))).value = this._pendingValue = formState;
4848 }
4849 }
4850}
4851if (false) {
4852 /**
4853 * \@internal
4854 * @type {?}
4855 */
4856 FormControl.prototype._onChange;
4857 /**
4858 * \@internal
4859 * @type {?}
4860 */
4861 FormControl.prototype._pendingValue;
4862 /**
4863 * \@internal
4864 * @type {?}
4865 */
4866 FormControl.prototype._pendingChange;
4867}
4868/**
4869 * Tracks the value and validity state of a group of `FormControl` instances.
4870 *
4871 * A `FormGroup` aggregates the values of each child `FormControl` into one object,
4872 * with each control name as the key. It calculates its status by reducing the status values
4873 * of its children. For example, if one of the controls in a group is invalid, the entire
4874 * group becomes invalid.
4875 *
4876 * `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
4877 * along with `FormControl` and `FormArray`.
4878 *
4879 * When instantiating a `FormGroup`, pass in a collection of child controls as the first
4880 * argument. The key for each child registers the name for the control.
4881 *
4882 * \@usageNotes
4883 *
4884 * ### Create a form group with 2 controls
4885 *
4886 * ```
4887 * const form = new FormGroup({
4888 * first: new FormControl('Nancy', Validators.minLength(2)),
4889 * last: new FormControl('Drew'),
4890 * });
4891 *
4892 * console.log(form.value); // {first: 'Nancy', last; 'Drew'}
4893 * console.log(form.status); // 'VALID'
4894 * ```
4895 *
4896 * ### Create a form group with a group-level validator
4897 *
4898 * You include group-level validators as the second arg, or group-level async
4899 * validators as the third arg. These come in handy when you want to perform validation
4900 * that considers the value of more than one child control.
4901 *
4902 * ```
4903 * const form = new FormGroup({
4904 * password: new FormControl('', Validators.minLength(2)),
4905 * passwordConfirm: new FormControl('', Validators.minLength(2)),
4906 * }, passwordMatchValidator);
4907 *
4908 *
4909 * function passwordMatchValidator(g: FormGroup) {
4910 * return g.get('password').value === g.get('passwordConfirm').value
4911 * ? null : {'mismatch': true};
4912 * }
4913 * ```
4914 *
4915 * Like `FormControl` instances, you choose to pass in
4916 * validators and async validators as part of an options object.
4917 *
4918 * ```
4919 * const form = new FormGroup({
4920 * password: new FormControl('')
4921 * passwordConfirm: new FormControl('')
4922 * }, { validators: passwordMatchValidator, asyncValidators: otherValidator });
4923 * ```
4924 *
4925 * ### Set the updateOn property for all controls in a form group
4926 *
4927 * The options object is used to set a default value for each child
4928 * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
4929 * group level, all child controls default to 'blur', unless the child
4930 * has explicitly specified a different `updateOn` value.
4931 *
4932 * ```ts
4933 * const c = new FormGroup({
4934 * one: new FormControl()
4935 * }, { updateOn: 'blur' });
4936 * ```
4937 *
4938 * \@publicApi
4939 */
4940class FormGroup extends AbstractControl {
4941 /**
4942 * Creates a new `FormGroup` instance.
4943 *
4944 * @param {?} controls A collection of child controls. The key for each child is the name
4945 * under which it is registered.
4946 *
4947 * @param {?=} validatorOrOpts A synchronous validator function, or an array of
4948 * such functions, or an `AbstractControlOptions` object that contains validation functions
4949 * and a validation trigger.
4950 *
4951 * @param {?=} asyncValidator A single async validator or array of async validator functions
4952 *
4953 */
4954 constructor(controls, validatorOrOpts, asyncValidator) {
4955 super(coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts));
4956 this.controls = controls;
4957 this._initObservables();
4958 this._setUpdateStrategy(validatorOrOpts);
4959 this._setUpControls();
4960 this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
4961 }
4962 /**
4963 * Registers a control with the group's list of controls.
4964 *
4965 * This method does not update the value or validity of the control.
4966 * Use {\@link FormGroup#addControl addControl} instead.
4967 *
4968 * @param {?} name The control name to register in the collection
4969 * @param {?} control Provides the control for the given name
4970 * @return {?}
4971 */
4972 registerControl(name, control) {
4973 if (this.controls[name])
4974 return this.controls[name];
4975 this.controls[name] = control;
4976 control.setParent(this);
4977 control._registerOnCollectionChange(this._onCollectionChange);
4978 return control;
4979 }
4980 /**
4981 * Add a control to this group.
4982 *
4983 * This method also updates the value and validity of the control.
4984 *
4985 * @param {?} name The control name to add to the collection
4986 * @param {?} control Provides the control for the given name
4987 * @return {?}
4988 */
4989 addControl(name, control) {
4990 this.registerControl(name, control);
4991 this.updateValueAndValidity();
4992 this._onCollectionChange();
4993 }
4994 /**
4995 * Remove a control from this group.
4996 *
4997 * @param {?} name The control name to remove from the collection
4998 * @return {?}
4999 */
5000 removeControl(name) {
5001 if (this.controls[name])
5002 this.controls[name]._registerOnCollectionChange((/**
5003 * @return {?}
5004 */
5005 () => { }));
5006 delete (this.controls[name]);
5007 this.updateValueAndValidity();
5008 this._onCollectionChange();
5009 }
5010 /**
5011 * Replace an existing control.
5012 *
5013 * @param {?} name The control name to replace in the collection
5014 * @param {?} control Provides the control for the given name
5015 * @return {?}
5016 */
5017 setControl(name, control) {
5018 if (this.controls[name])
5019 this.controls[name]._registerOnCollectionChange((/**
5020 * @return {?}
5021 */
5022 () => { }));
5023 delete (this.controls[name]);
5024 if (control)
5025 this.registerControl(name, control);
5026 this.updateValueAndValidity();
5027 this._onCollectionChange();
5028 }
5029 /**
5030 * Check whether there is an enabled control with the given name in the group.
5031 *
5032 * Reports false for disabled controls. If you'd like to check for existence in the group
5033 * only, use {\@link AbstractControl#get get} instead.
5034 *
5035 * @param {?} controlName The control name to check for existence in the collection
5036 *
5037 * @return {?} false for disabled controls, true otherwise.
5038 */
5039 contains(controlName) {
5040 return this.controls.hasOwnProperty(controlName) && this.controls[controlName].enabled;
5041 }
5042 /**
5043 * Sets the value of the `FormGroup`. It accepts an object that matches
5044 * the structure of the group, with control names as keys.
5045 *
5046 * \@usageNotes
5047 * ### Set the complete value for the form group
5048 *
5049 * ```
5050 * const form = new FormGroup({
5051 * first: new FormControl(),
5052 * last: new FormControl()
5053 * });
5054 *
5055 * console.log(form.value); // {first: null, last: null}
5056 *
5057 * form.setValue({first: 'Nancy', last: 'Drew'});
5058 * console.log(form.value); // {first: 'Nancy', last: 'Drew'}
5059 * ```
5060 *
5061 * @throws When strict checks fail, such as setting the value of a control
5062 * that doesn't exist or if you exclude a value of a control that does exist.
5063 *
5064 * @param {?} value The new value for the control that matches the structure of the group.
5065 * @param {?=} options Configuration options that determine how the control propagates changes
5066 * and emits events after the value changes.
5067 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
5068 * updateValueAndValidity} method.
5069 *
5070 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
5071 * false.
5072 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
5073 * `valueChanges`
5074 * observables emit events with the latest status and value when the control value is updated.
5075 * When false, no events are emitted.
5076 * @return {?}
5077 */
5078 setValue(value, options = {}) {
5079 this._checkAllValuesPresent(value);
5080 Object.keys(value).forEach((/**
5081 * @param {?} name
5082 * @return {?}
5083 */
5084 name => {
5085 this._throwIfControlMissing(name);
5086 this.controls[name].setValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
5087 }));
5088 this.updateValueAndValidity(options);
5089 }
5090 /**
5091 * Patches the value of the `FormGroup`. It accepts an object with control
5092 * names as keys, and does its best to match the values to the correct controls
5093 * in the group.
5094 *
5095 * It accepts both super-sets and sub-sets of the group without throwing an error.
5096 *
5097 * \@usageNotes
5098 * ### Patch the value for a form group
5099 *
5100 * ```
5101 * const form = new FormGroup({
5102 * first: new FormControl(),
5103 * last: new FormControl()
5104 * });
5105 * console.log(form.value); // {first: null, last: null}
5106 *
5107 * form.patchValue({first: 'Nancy'});
5108 * console.log(form.value); // {first: 'Nancy', last: null}
5109 * ```
5110 *
5111 * @param {?} value The object that matches the structure of the group.
5112 * @param {?=} options Configuration options that determine how the control propagates changes and
5113 * emits events after the value is patched.
5114 * * `onlySelf`: When true, each change only affects this control and not its parent. Default is
5115 * true.
5116 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
5117 * `valueChanges`
5118 * observables emit events with the latest status and value when the control value is updated.
5119 * When false, no events are emitted.
5120 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
5121 * updateValueAndValidity} method.
5122 * @return {?}
5123 */
5124 patchValue(value, options = {}) {
5125 Object.keys(value).forEach((/**
5126 * @param {?} name
5127 * @return {?}
5128 */
5129 name => {
5130 if (this.controls[name]) {
5131 this.controls[name].patchValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
5132 }
5133 }));
5134 this.updateValueAndValidity(options);
5135 }
5136 /**
5137 * Resets the `FormGroup`, marks all descendants are marked `pristine` and `untouched`, and
5138 * the value of all descendants to null.
5139 *
5140 * You reset to a specific form state by passing in a map of states
5141 * that matches the structure of your form, with control names as keys. The state
5142 * is a standalone value or a form state object with both a value and a disabled
5143 * status.
5144 *
5145 * \@usageNotes
5146 *
5147 * ### Reset the form group values
5148 *
5149 * ```ts
5150 * const form = new FormGroup({
5151 * first: new FormControl('first name'),
5152 * last: new FormControl('last name')
5153 * });
5154 *
5155 * console.log(form.value); // {first: 'first name', last: 'last name'}
5156 *
5157 * form.reset({ first: 'name', last: 'last name' });
5158 *
5159 * console.log(form.value); // {first: 'name', last: 'last name'}
5160 * ```
5161 *
5162 * ### Reset the form group values and disabled status
5163 *
5164 * ```
5165 * const form = new FormGroup({
5166 * first: new FormControl('first name'),
5167 * last: new FormControl('last name')
5168 * });
5169 *
5170 * form.reset({
5171 * first: {value: 'name', disabled: true},
5172 * last: 'last'
5173 * });
5174 *
5175 * console.log(this.form.value); // {first: 'name', last: 'last name'}
5176 * console.log(this.form.get('first').status); // 'DISABLED'
5177 * ```
5178 * @param {?=} value Resets the control with an initial value,
5179 * or an object that defines the initial value and disabled state.
5180 *
5181 * @param {?=} options Configuration options that determine how the control propagates changes
5182 * and emits events when the group is reset.
5183 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
5184 * false.
5185 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
5186 * `valueChanges`
5187 * observables emit events with the latest status and value when the control is reset.
5188 * When false, no events are emitted.
5189 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
5190 * updateValueAndValidity} method.
5191 *
5192 * @return {?}
5193 */
5194 reset(value = {}, options = {}) {
5195 this._forEachChild((/**
5196 * @param {?} control
5197 * @param {?} name
5198 * @return {?}
5199 */
5200 (control, name) => {
5201 control.reset(value[name], { onlySelf: true, emitEvent: options.emitEvent });
5202 }));
5203 this._updatePristine(options);
5204 this._updateTouched(options);
5205 this.updateValueAndValidity(options);
5206 }
5207 /**
5208 * The aggregate value of the `FormGroup`, including any disabled controls.
5209 *
5210 * Retrieves all values regardless of disabled status.
5211 * The `value` property is the best way to get the value of the group, because
5212 * it excludes disabled controls in the `FormGroup`.
5213 * @return {?}
5214 */
5215 getRawValue() {
5216 return this._reduceChildren({}, (/**
5217 * @param {?} acc
5218 * @param {?} control
5219 * @param {?} name
5220 * @return {?}
5221 */
5222 (acc, control, name) => {
5223 acc[name] = control instanceof FormControl ? control.value : ((/** @type {?} */ (control))).getRawValue();
5224 return acc;
5225 }));
5226 }
5227 /**
5228 * \@internal
5229 * @return {?}
5230 */
5231 _syncPendingControls() {
5232 /** @type {?} */
5233 let subtreeUpdated = this._reduceChildren(false, (/**
5234 * @param {?} updated
5235 * @param {?} child
5236 * @return {?}
5237 */
5238 (updated, child) => {
5239 return child._syncPendingControls() ? true : updated;
5240 }));
5241 if (subtreeUpdated)
5242 this.updateValueAndValidity({ onlySelf: true });
5243 return subtreeUpdated;
5244 }
5245 /**
5246 * \@internal
5247 * @param {?} name
5248 * @return {?}
5249 */
5250 _throwIfControlMissing(name) {
5251 if (!Object.keys(this.controls).length) {
5252 throw new Error(`
5253 There are no form controls registered with this group yet. If you're using ngModel,
5254 you may want to check next tick (e.g. use setTimeout).
5255 `);
5256 }
5257 if (!this.controls[name]) {
5258 throw new Error(`Cannot find form control with name: ${name}.`);
5259 }
5260 }
5261 /**
5262 * \@internal
5263 * @param {?} cb
5264 * @return {?}
5265 */
5266 _forEachChild(cb) {
5267 Object.keys(this.controls).forEach((/**
5268 * @param {?} k
5269 * @return {?}
5270 */
5271 k => cb(this.controls[k], k)));
5272 }
5273 /**
5274 * \@internal
5275 * @return {?}
5276 */
5277 _setUpControls() {
5278 this._forEachChild((/**
5279 * @param {?} control
5280 * @return {?}
5281 */
5282 (control) => {
5283 control.setParent(this);
5284 control._registerOnCollectionChange(this._onCollectionChange);
5285 }));
5286 }
5287 /**
5288 * \@internal
5289 * @return {?}
5290 */
5291 _updateValue() { ((/** @type {?} */ (this))).value = this._reduceValue(); }
5292 /**
5293 * \@internal
5294 * @param {?} condition
5295 * @return {?}
5296 */
5297 _anyControls(condition) {
5298 /** @type {?} */
5299 let res = false;
5300 this._forEachChild((/**
5301 * @param {?} control
5302 * @param {?} name
5303 * @return {?}
5304 */
5305 (control, name) => {
5306 res = res || (this.contains(name) && condition(control));
5307 }));
5308 return res;
5309 }
5310 /**
5311 * \@internal
5312 * @return {?}
5313 */
5314 _reduceValue() {
5315 return this._reduceChildren({}, (/**
5316 * @param {?} acc
5317 * @param {?} control
5318 * @param {?} name
5319 * @return {?}
5320 */
5321 (acc, control, name) => {
5322 if (control.enabled || this.disabled) {
5323 acc[name] = control.value;
5324 }
5325 return acc;
5326 }));
5327 }
5328 /**
5329 * \@internal
5330 * @param {?} initValue
5331 * @param {?} fn
5332 * @return {?}
5333 */
5334 _reduceChildren(initValue, fn) {
5335 /** @type {?} */
5336 let res = initValue;
5337 this._forEachChild((/**
5338 * @param {?} control
5339 * @param {?} name
5340 * @return {?}
5341 */
5342 (control, name) => { res = fn(res, control, name); }));
5343 return res;
5344 }
5345 /**
5346 * \@internal
5347 * @return {?}
5348 */
5349 _allControlsDisabled() {
5350 for (const controlName of Object.keys(this.controls)) {
5351 if (this.controls[controlName].enabled) {
5352 return false;
5353 }
5354 }
5355 return Object.keys(this.controls).length > 0 || this.disabled;
5356 }
5357 /**
5358 * \@internal
5359 * @param {?} value
5360 * @return {?}
5361 */
5362 _checkAllValuesPresent(value) {
5363 this._forEachChild((/**
5364 * @param {?} control
5365 * @param {?} name
5366 * @return {?}
5367 */
5368 (control, name) => {
5369 if (value[name] === undefined) {
5370 throw new Error(`Must supply a value for form control with name: '${name}'.`);
5371 }
5372 }));
5373 }
5374}
5375if (false) {
5376 /** @type {?} */
5377 FormGroup.prototype.controls;
5378}
5379/**
5380 * Tracks the value and validity state of an array of `FormControl`,
5381 * `FormGroup` or `FormArray` instances.
5382 *
5383 * A `FormArray` aggregates the values of each child `FormControl` into an array.
5384 * It calculates its status by reducing the status values of its children. For example, if one of
5385 * the controls in a `FormArray` is invalid, the entire array becomes invalid.
5386 *
5387 * `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
5388 * along with `FormControl` and `FormGroup`.
5389 *
5390 * \@usageNotes
5391 *
5392 * ### Create an array of form controls
5393 *
5394 * ```
5395 * const arr = new FormArray([
5396 * new FormControl('Nancy', Validators.minLength(2)),
5397 * new FormControl('Drew'),
5398 * ]);
5399 *
5400 * console.log(arr.value); // ['Nancy', 'Drew']
5401 * console.log(arr.status); // 'VALID'
5402 * ```
5403 *
5404 * ### Create a form array with array-level validators
5405 *
5406 * You include array-level validators and async validators. These come in handy
5407 * when you want to perform validation that considers the value of more than one child
5408 * control.
5409 *
5410 * The two types of validators are passed in separately as the second and third arg
5411 * respectively, or together as part of an options object.
5412 *
5413 * ```
5414 * const arr = new FormArray([
5415 * new FormControl('Nancy'),
5416 * new FormControl('Drew')
5417 * ], {validators: myValidator, asyncValidators: myAsyncValidator});
5418 * ```
5419 *
5420 * ### Set the updateOn property for all controls in a form array
5421 *
5422 * The options object is used to set a default value for each child
5423 * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
5424 * array level, all child controls default to 'blur', unless the child
5425 * has explicitly specified a different `updateOn` value.
5426 *
5427 * ```ts
5428 * const arr = new FormArray([
5429 * new FormControl()
5430 * ], {updateOn: 'blur'});
5431 * ```
5432 *
5433 * ### Adding or removing controls from a form array
5434 *
5435 * To change the controls in the array, use the `push`, `insert`, `removeAt` or `clear` methods
5436 * in `FormArray` itself. These methods ensure the controls are properly tracked in the
5437 * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
5438 * the `FormArray` directly, as that result in strange and unexpected behavior such
5439 * as broken change detection.
5440 *
5441 * \@publicApi
5442 */
5443class FormArray extends AbstractControl {
5444 /**
5445 * Creates a new `FormArray` instance.
5446 *
5447 * @param {?} controls An array of child controls. Each child control is given an index
5448 * where it is registered.
5449 *
5450 * @param {?=} validatorOrOpts A synchronous validator function, or an array of
5451 * such functions, or an `AbstractControlOptions` object that contains validation functions
5452 * and a validation trigger.
5453 *
5454 * @param {?=} asyncValidator A single async validator or array of async validator functions
5455 *
5456 */
5457 constructor(controls, validatorOrOpts, asyncValidator) {
5458 super(coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts));
5459 this.controls = controls;
5460 this._initObservables();
5461 this._setUpdateStrategy(validatorOrOpts);
5462 this._setUpControls();
5463 this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
5464 }
5465 /**
5466 * Get the `AbstractControl` at the given `index` in the array.
5467 *
5468 * @param {?} index Index in the array to retrieve the control
5469 * @return {?}
5470 */
5471 at(index) { return this.controls[index]; }
5472 /**
5473 * Insert a new `AbstractControl` at the end of the array.
5474 *
5475 * @param {?} control Form control to be inserted
5476 * @return {?}
5477 */
5478 push(control) {
5479 this.controls.push(control);
5480 this._registerControl(control);
5481 this.updateValueAndValidity();
5482 this._onCollectionChange();
5483 }
5484 /**
5485 * Insert a new `AbstractControl` at the given `index` in the array.
5486 *
5487 * @param {?} index Index in the array to insert the control
5488 * @param {?} control Form control to be inserted
5489 * @return {?}
5490 */
5491 insert(index, control) {
5492 this.controls.splice(index, 0, control);
5493 this._registerControl(control);
5494 this.updateValueAndValidity();
5495 }
5496 /**
5497 * Remove the control at the given `index` in the array.
5498 *
5499 * @param {?} index Index in the array to remove the control
5500 * @return {?}
5501 */
5502 removeAt(index) {
5503 if (this.controls[index])
5504 this.controls[index]._registerOnCollectionChange((/**
5505 * @return {?}
5506 */
5507 () => { }));
5508 this.controls.splice(index, 1);
5509 this.updateValueAndValidity();
5510 }
5511 /**
5512 * Replace an existing control.
5513 *
5514 * @param {?} index Index in the array to replace the control
5515 * @param {?} control The `AbstractControl` control to replace the existing control
5516 * @return {?}
5517 */
5518 setControl(index, control) {
5519 if (this.controls[index])
5520 this.controls[index]._registerOnCollectionChange((/**
5521 * @return {?}
5522 */
5523 () => { }));
5524 this.controls.splice(index, 1);
5525 if (control) {
5526 this.controls.splice(index, 0, control);
5527 this._registerControl(control);
5528 }
5529 this.updateValueAndValidity();
5530 this._onCollectionChange();
5531 }
5532 /**
5533 * Length of the control array.
5534 * @return {?}
5535 */
5536 get length() { return this.controls.length; }
5537 /**
5538 * Sets the value of the `FormArray`. It accepts an array that matches
5539 * the structure of the control.
5540 *
5541 * This method performs strict checks, and throws an error if you try
5542 * to set the value of a control that doesn't exist or if you exclude the
5543 * value of a control.
5544 *
5545 * \@usageNotes
5546 * ### Set the values for the controls in the form array
5547 *
5548 * ```
5549 * const arr = new FormArray([
5550 * new FormControl(),
5551 * new FormControl()
5552 * ]);
5553 * console.log(arr.value); // [null, null]
5554 *
5555 * arr.setValue(['Nancy', 'Drew']);
5556 * console.log(arr.value); // ['Nancy', 'Drew']
5557 * ```
5558 *
5559 * @param {?} value Array of values for the controls
5560 * @param {?=} options Configure options that determine how the control propagates changes and
5561 * emits events after the value changes
5562 *
5563 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
5564 * is false.
5565 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
5566 * `valueChanges`
5567 * observables emit events with the latest status and value when the control value is updated.
5568 * When false, no events are emitted.
5569 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
5570 * updateValueAndValidity} method.
5571 * @return {?}
5572 */
5573 setValue(value, options = {}) {
5574 this._checkAllValuesPresent(value);
5575 value.forEach((/**
5576 * @param {?} newValue
5577 * @param {?} index
5578 * @return {?}
5579 */
5580 (newValue, index) => {
5581 this._throwIfControlMissing(index);
5582 this.at(index).setValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
5583 }));
5584 this.updateValueAndValidity(options);
5585 }
5586 /**
5587 * Patches the value of the `FormArray`. It accepts an array that matches the
5588 * structure of the control, and does its best to match the values to the correct
5589 * controls in the group.
5590 *
5591 * It accepts both super-sets and sub-sets of the array without throwing an error.
5592 *
5593 * \@usageNotes
5594 * ### Patch the values for controls in a form array
5595 *
5596 * ```
5597 * const arr = new FormArray([
5598 * new FormControl(),
5599 * new FormControl()
5600 * ]);
5601 * console.log(arr.value); // [null, null]
5602 *
5603 * arr.patchValue(['Nancy']);
5604 * console.log(arr.value); // ['Nancy', null]
5605 * ```
5606 *
5607 * @param {?} value Array of latest values for the controls
5608 * @param {?=} options Configure options that determine how the control propagates changes and
5609 * emits events after the value changes
5610 *
5611 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
5612 * is false.
5613 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
5614 * `valueChanges`
5615 * observables emit events with the latest status and value when the control value is updated.
5616 * When false, no events are emitted.
5617 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
5618 * updateValueAndValidity} method.
5619 * @return {?}
5620 */
5621 patchValue(value, options = {}) {
5622 value.forEach((/**
5623 * @param {?} newValue
5624 * @param {?} index
5625 * @return {?}
5626 */
5627 (newValue, index) => {
5628 if (this.at(index)) {
5629 this.at(index).patchValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
5630 }
5631 }));
5632 this.updateValueAndValidity(options);
5633 }
5634 /**
5635 * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
5636 * value of all descendants to null or null maps.
5637 *
5638 * You reset to a specific form state by passing in an array of states
5639 * that matches the structure of the control. The state is a standalone value
5640 * or a form state object with both a value and a disabled status.
5641 *
5642 * \@usageNotes
5643 * ### Reset the values in a form array
5644 *
5645 * ```ts
5646 * const arr = new FormArray([
5647 * new FormControl(),
5648 * new FormControl()
5649 * ]);
5650 * arr.reset(['name', 'last name']);
5651 *
5652 * console.log(this.arr.value); // ['name', 'last name']
5653 * ```
5654 *
5655 * ### Reset the values in a form array and the disabled status for the first control
5656 *
5657 * ```
5658 * this.arr.reset([
5659 * {value: 'name', disabled: true},
5660 * 'last'
5661 * ]);
5662 *
5663 * console.log(this.arr.value); // ['name', 'last name']
5664 * console.log(this.arr.get(0).status); // 'DISABLED'
5665 * ```
5666 *
5667 * @param {?=} value Array of values for the controls
5668 * @param {?=} options Configure options that determine how the control propagates changes and
5669 * emits events after the value changes
5670 *
5671 * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
5672 * is false.
5673 * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
5674 * `valueChanges`
5675 * observables emit events with the latest status and value when the control is reset.
5676 * When false, no events are emitted.
5677 * The configuration options are passed to the {\@link AbstractControl#updateValueAndValidity
5678 * updateValueAndValidity} method.
5679 * @return {?}
5680 */
5681 reset(value = [], options = {}) {
5682 this._forEachChild((/**
5683 * @param {?} control
5684 * @param {?} index
5685 * @return {?}
5686 */
5687 (control, index) => {
5688 control.reset(value[index], { onlySelf: true, emitEvent: options.emitEvent });
5689 }));
5690 this._updatePristine(options);
5691 this._updateTouched(options);
5692 this.updateValueAndValidity(options);
5693 }
5694 /**
5695 * The aggregate value of the array, including any disabled controls.
5696 *
5697 * Reports all values regardless of disabled status.
5698 * For enabled controls only, the `value` property is the best way to get the value of the array.
5699 * @return {?}
5700 */
5701 getRawValue() {
5702 return this.controls.map((/**
5703 * @param {?} control
5704 * @return {?}
5705 */
5706 (control) => {
5707 return control instanceof FormControl ? control.value : ((/** @type {?} */ (control))).getRawValue();
5708 }));
5709 }
5710 /**
5711 * Remove all controls in the `FormArray`.
5712 *
5713 * \@usageNotes
5714 * ### Remove all elements from a FormArray
5715 *
5716 * ```ts
5717 * const arr = new FormArray([
5718 * new FormControl(),
5719 * new FormControl()
5720 * ]);
5721 * console.log(arr.length); // 2
5722 *
5723 * arr.clear();
5724 * console.log(arr.length); // 0
5725 * ```
5726 *
5727 * It's a simpler and more efficient alternative to removing all elements one by one:
5728 *
5729 * ```ts
5730 * const arr = new FormArray([
5731 * new FormControl(),
5732 * new FormControl()
5733 * ]);
5734 *
5735 * while (arr.length) {
5736 * arr.removeAt(0);
5737 * }
5738 * ```
5739 * @return {?}
5740 */
5741 clear() {
5742 if (this.controls.length < 1)
5743 return;
5744 this._forEachChild((/**
5745 * @param {?} control
5746 * @return {?}
5747 */
5748 (control) => control._registerOnCollectionChange((/**
5749 * @return {?}
5750 */
5751 () => { }))));
5752 this.controls.splice(0);
5753 this.updateValueAndValidity();
5754 }
5755 /**
5756 * \@internal
5757 * @return {?}
5758 */
5759 _syncPendingControls() {
5760 /** @type {?} */
5761 let subtreeUpdated = this.controls.reduce((/**
5762 * @param {?} updated
5763 * @param {?} child
5764 * @return {?}
5765 */
5766 (updated, child) => {
5767 return child._syncPendingControls() ? true : updated;
5768 }), false);
5769 if (subtreeUpdated)
5770 this.updateValueAndValidity({ onlySelf: true });
5771 return subtreeUpdated;
5772 }
5773 /**
5774 * \@internal
5775 * @param {?} index
5776 * @return {?}
5777 */
5778 _throwIfControlMissing(index) {
5779 if (!this.controls.length) {
5780 throw new Error(`
5781 There are no form controls registered with this array yet. If you're using ngModel,
5782 you may want to check next tick (e.g. use setTimeout).
5783 `);
5784 }
5785 if (!this.at(index)) {
5786 throw new Error(`Cannot find form control at index ${index}`);
5787 }
5788 }
5789 /**
5790 * \@internal
5791 * @param {?} cb
5792 * @return {?}
5793 */
5794 _forEachChild(cb) {
5795 this.controls.forEach((/**
5796 * @param {?} control
5797 * @param {?} index
5798 * @return {?}
5799 */
5800 (control, index) => { cb(control, index); }));
5801 }
5802 /**
5803 * \@internal
5804 * @return {?}
5805 */
5806 _updateValue() {
5807 ((/** @type {?} */ (this))).value =
5808 this.controls.filter((/**
5809 * @param {?} control
5810 * @return {?}
5811 */
5812 (control) => control.enabled || this.disabled))
5813 .map((/**
5814 * @param {?} control
5815 * @return {?}
5816 */
5817 (control) => control.value));
5818 }
5819 /**
5820 * \@internal
5821 * @param {?} condition
5822 * @return {?}
5823 */
5824 _anyControls(condition) {
5825 return this.controls.some((/**
5826 * @param {?} control
5827 * @return {?}
5828 */
5829 (control) => control.enabled && condition(control)));
5830 }
5831 /**
5832 * \@internal
5833 * @return {?}
5834 */
5835 _setUpControls() {
5836 this._forEachChild((/**
5837 * @param {?} control
5838 * @return {?}
5839 */
5840 (control) => this._registerControl(control)));
5841 }
5842 /**
5843 * \@internal
5844 * @param {?} value
5845 * @return {?}
5846 */
5847 _checkAllValuesPresent(value) {
5848 this._forEachChild((/**
5849 * @param {?} control
5850 * @param {?} i
5851 * @return {?}
5852 */
5853 (control, i) => {
5854 if (value[i] === undefined) {
5855 throw new Error(`Must supply a value for form control at index: ${i}.`);
5856 }
5857 }));
5858 }
5859 /**
5860 * \@internal
5861 * @return {?}
5862 */
5863 _allControlsDisabled() {
5864 for (const control of this.controls) {
5865 if (control.enabled)
5866 return false;
5867 }
5868 return this.controls.length > 0 || this.disabled;
5869 }
5870 /**
5871 * @private
5872 * @param {?} control
5873 * @return {?}
5874 */
5875 _registerControl(control) {
5876 control.setParent(this);
5877 control._registerOnCollectionChange(this._onCollectionChange);
5878 }
5879}
5880if (false) {
5881 /** @type {?} */
5882 FormArray.prototype.controls;
5883}
5884
5885/**
5886 * @fileoverview added by tsickle
5887 * Generated from: packages/forms/src/directives/ng_form.ts
5888 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
5889 */
5890/** @type {?} */
5891const formDirectiveProvider = {
5892 provide: ControlContainer,
5893 useExisting: forwardRef((/**
5894 * @return {?}
5895 */
5896 () => NgForm))
5897};
5898const ɵ0 = /**
5899 * @return {?}
5900 */
5901() => Promise.resolve(null);
5902/** @type {?} */
5903const resolvedPromise = ((ɵ0))();
5904/**
5905 * \@description
5906 * Creates a top-level `FormGroup` instance and binds it to a form
5907 * to track aggregate form value and validation status.
5908 *
5909 * As soon as you import the `FormsModule`, this directive becomes active by default on
5910 * all `<form>` tags. You don't need to add a special selector.
5911 *
5912 * You optionally export the directive into a local template variable using `ngForm` as the key
5913 * (ex: `#myForm="ngForm"`). This is optional, but useful. Many properties from the underlying
5914 * `FormGroup` instance are duplicated on the directive itself, so a reference to it
5915 * gives you access to the aggregate value and validity status of the form, as well as
5916 * user interaction properties like `dirty` and `touched`.
5917 *
5918 * To register child controls with the form, use `NgModel` with a `name`
5919 * attribute. You may use `NgModelGroup` to create sub-groups within the form.
5920 *
5921 * If necessary, listen to the directive's `ngSubmit` event to be notified when the user has
5922 * triggered a form submission. The `ngSubmit` event emits the original form
5923 * submission event.
5924 *
5925 * In template driven forms, all `<form>` tags are automatically tagged as `NgForm`.
5926 * To import the `FormsModule` but skip its usage in some forms,
5927 * for example, to use native HTML5 validation, add the `ngNoForm` and the `<form>`
5928 * tags won't create an `NgForm` directive. In reactive forms, using `ngNoForm` is
5929 * unnecessary because the `<form>` tags are inert. In that case, you would
5930 * refrain from using the `formGroup` directive.
5931 *
5932 * \@usageNotes
5933 *
5934 * ### Listening for form submission
5935 *
5936 * The following example shows how to capture the form values from the "ngSubmit" event.
5937 *
5938 * {\@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
5939 *
5940 * ### Setting the update options
5941 *
5942 * The following example shows you how to change the "updateOn" option from its default using
5943 * ngFormOptions.
5944 *
5945 * ```html
5946 * <form [ngFormOptions]="{updateOn: 'blur'}">
5947 * <input name="one" ngModel> <!-- this ngModel will update on blur -->
5948 * </form>
5949 * ```
5950 *
5951 * ### Native DOM validation UI
5952 *
5953 * In order to prevent the native DOM form validation UI from interfering with Angular's form
5954 * validation, Angular automatically adds the `novalidate` attribute on any `<form>` whenever
5955 * `FormModule` or `ReactiveFormModule` are imported into the application.
5956 * If you want to explicitly enable native DOM validation UI with Angular forms, you can add the
5957 * `ngNativeValidate` attribute to the `<form>` element:
5958 *
5959 * ```html
5960 * <form ngNativeValidate>
5961 * ...
5962 * </form>
5963 * ```
5964 *
5965 * \@ngModule FormsModule
5966 * \@publicApi
5967 */
5968class NgForm extends ControlContainer {
5969 /**
5970 * @param {?} validators
5971 * @param {?} asyncValidators
5972 */
5973 constructor(validators, asyncValidators) {
5974 super();
5975 /**
5976 * \@description
5977 * Returns whether the form submission has been triggered.
5978 */
5979 this.submitted = false;
5980 this._directives = [];
5981 /**
5982 * \@description
5983 * Event emitter for the "ngSubmit" event
5984 */
5985 this.ngSubmit = new EventEmitter();
5986 this.form =
5987 new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));
5988 }
5989 /**
5990 * \@description
5991 * Lifecycle method called after the view is initialized. For internal use only.
5992 * @return {?}
5993 */
5994 ngAfterViewInit() { this._setUpdateStrategy(); }
5995 /**
5996 * \@description
5997 * The directive instance.
5998 * @return {?}
5999 */
6000 get formDirective() { return this; }
6001 /**
6002 * \@description
6003 * The internal `FormGroup` instance.
6004 * @return {?}
6005 */
6006 get control() { return this.form; }
6007 /**
6008 * \@description
6009 * Returns an array representing the path to this group. Because this directive
6010 * always lives at the top level of a form, it is always an empty array.
6011 * @return {?}
6012 */
6013 get path() { return []; }
6014 /**
6015 * \@description
6016 * Returns a map of the controls in this group.
6017 * @return {?}
6018 */
6019 get controls() { return this.form.controls; }
6020 /**
6021 * \@description
6022 * Method that sets up the control directive in this group, re-calculates its value
6023 * and validity, and adds the instance to the internal list of directives.
6024 *
6025 * @param {?} dir The `NgModel` directive instance.
6026 * @return {?}
6027 */
6028 addControl(dir) {
6029 resolvedPromise.then((/**
6030 * @return {?}
6031 */
6032 () => {
6033 /** @type {?} */
6034 const container = this._findContainer(dir.path);
6035 ((/** @type {?} */ (dir))).control =
6036 (/** @type {?} */ (container.registerControl(dir.name, dir.control)));
6037 setUpControl(dir.control, dir);
6038 dir.control.updateValueAndValidity({ emitEvent: false });
6039 this._directives.push(dir);
6040 }));
6041 }
6042 /**
6043 * \@description
6044 * Retrieves the `FormControl` instance from the provided `NgModel` directive.
6045 *
6046 * @param {?} dir The `NgModel` directive instance.
6047 * @return {?}
6048 */
6049 getControl(dir) { return (/** @type {?} */ (this.form.get(dir.path))); }
6050 /**
6051 * \@description
6052 * Removes the `NgModel` instance from the internal list of directives
6053 *
6054 * @param {?} dir The `NgModel` directive instance.
6055 * @return {?}
6056 */
6057 removeControl(dir) {
6058 resolvedPromise.then((/**
6059 * @return {?}
6060 */
6061 () => {
6062 /** @type {?} */
6063 const container = this._findContainer(dir.path);
6064 if (container) {
6065 container.removeControl(dir.name);
6066 }
6067 removeDir(this._directives, dir);
6068 }));
6069 }
6070 /**
6071 * \@description
6072 * Adds a new `NgModelGroup` directive instance to the form.
6073 *
6074 * @param {?} dir The `NgModelGroup` directive instance.
6075 * @return {?}
6076 */
6077 addFormGroup(dir) {
6078 resolvedPromise.then((/**
6079 * @return {?}
6080 */
6081 () => {
6082 /** @type {?} */
6083 const container = this._findContainer(dir.path);
6084 /** @type {?} */
6085 const group = new FormGroup({});
6086 setUpFormContainer(group, dir);
6087 container.registerControl(dir.name, group);
6088 group.updateValueAndValidity({ emitEvent: false });
6089 }));
6090 }
6091 /**
6092 * \@description
6093 * Removes the `NgModelGroup` directive instance from the form.
6094 *
6095 * @param {?} dir The `NgModelGroup` directive instance.
6096 * @return {?}
6097 */
6098 removeFormGroup(dir) {
6099 resolvedPromise.then((/**
6100 * @return {?}
6101 */
6102 () => {
6103 /** @type {?} */
6104 const container = this._findContainer(dir.path);
6105 if (container) {
6106 container.removeControl(dir.name);
6107 }
6108 }));
6109 }
6110 /**
6111 * \@description
6112 * Retrieves the `FormGroup` for a provided `NgModelGroup` directive instance
6113 *
6114 * @param {?} dir The `NgModelGroup` directive instance.
6115 * @return {?}
6116 */
6117 getFormGroup(dir) { return (/** @type {?} */ (this.form.get(dir.path))); }
6118 /**
6119 * Sets the new value for the provided `NgControl` directive.
6120 *
6121 * @param {?} dir The `NgControl` directive instance.
6122 * @param {?} value The new value for the directive's control.
6123 * @return {?}
6124 */
6125 updateModel(dir, value) {
6126 resolvedPromise.then((/**
6127 * @return {?}
6128 */
6129 () => {
6130 /** @type {?} */
6131 const ctrl = (/** @type {?} */ (this.form.get((/** @type {?} */ (dir.path)))));
6132 ctrl.setValue(value);
6133 }));
6134 }
6135 /**
6136 * \@description
6137 * Sets the value for this `FormGroup`.
6138 *
6139 * @param {?} value The new value
6140 * @return {?}
6141 */
6142 setValue(value) { this.control.setValue(value); }
6143 /**
6144 * \@description
6145 * Method called when the "submit" event is triggered on the form.
6146 * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
6147 *
6148 * @param {?} $event The "submit" event object
6149 * @return {?}
6150 */
6151 onSubmit($event) {
6152 ((/** @type {?} */ (this))).submitted = true;
6153 syncPendingControls(this.form, this._directives);
6154 this.ngSubmit.emit($event);
6155 return false;
6156 }
6157 /**
6158 * \@description
6159 * Method called when the "reset" event is triggered on the form.
6160 * @return {?}
6161 */
6162 onReset() { this.resetForm(); }
6163 /**
6164 * \@description
6165 * Resets the form to an initial value and resets its submitted status.
6166 *
6167 * @param {?=} value The new value for the form.
6168 * @return {?}
6169 */
6170 resetForm(value = undefined) {
6171 this.form.reset(value);
6172 ((/** @type {?} */ (this))).submitted = false;
6173 }
6174 /**
6175 * @private
6176 * @return {?}
6177 */
6178 _setUpdateStrategy() {
6179 if (this.options && this.options.updateOn != null) {
6180 this.form._updateOn = this.options.updateOn;
6181 }
6182 }
6183 /**
6184 * \@internal
6185 * @param {?} path
6186 * @return {?}
6187 */
6188 _findContainer(path) {
6189 path.pop();
6190 return path.length ? (/** @type {?} */ (this.form.get(path))) : this.form;
6191 }
6192}
6193NgForm.decorators = [
6194 { type: Directive, args: [{
6195 selector: 'form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]',
6196 providers: [formDirectiveProvider],
6197 host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
6198 outputs: ['ngSubmit'],
6199 exportAs: 'ngForm'
6200 },] }
6201];
6202/** @nocollapse */
6203NgForm.ctorParameters = () => [
6204 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
6205 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] }
6206];
6207NgForm.propDecorators = {
6208 options: [{ type: Input, args: ['ngFormOptions',] }]
6209};
6210if (false) {
6211 /**
6212 * \@description
6213 * Returns whether the form submission has been triggered.
6214 * @type {?}
6215 */
6216 NgForm.prototype.submitted;
6217 /**
6218 * @type {?}
6219 * @private
6220 */
6221 NgForm.prototype._directives;
6222 /**
6223 * \@description
6224 * The `FormGroup` instance created for this form.
6225 * @type {?}
6226 */
6227 NgForm.prototype.form;
6228 /**
6229 * \@description
6230 * Event emitter for the "ngSubmit" event
6231 * @type {?}
6232 */
6233 NgForm.prototype.ngSubmit;
6234 /**
6235 * \@description
6236 * Tracks options for the `NgForm` instance.
6237 *
6238 * **updateOn**: Sets the default `updateOn` value for all child `NgModels` below it
6239 * unless explicitly set by a child `NgModel` using `ngModelOptions`). Defaults to 'change'.
6240 * Possible values: `'change'` | `'blur'` | `'submit'`.
6241 *
6242 * @type {?}
6243 */
6244 NgForm.prototype.options;
6245}
6246
6247/**
6248 * @fileoverview added by tsickle
6249 * Generated from: packages/forms/src/directives/abstract_form_group_directive.ts
6250 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6251 */
6252/**
6253 * \@description
6254 * A base class for code shared between the `NgModelGroup` and `FormGroupName` directives.
6255 *
6256 * \@publicApi
6257 */
6258class AbstractFormGroupDirective extends ControlContainer {
6259 /**
6260 * \@description
6261 * An internal callback method triggered on the instance after the inputs are set.
6262 * Registers the group with its parent group.
6263 * @return {?}
6264 */
6265 ngOnInit() {
6266 this._checkParentType();
6267 (/** @type {?} */ (this.formDirective)).addFormGroup(this);
6268 }
6269 /**
6270 * \@description
6271 * An internal callback method triggered before the instance is destroyed.
6272 * Removes the group from its parent group.
6273 * @return {?}
6274 */
6275 ngOnDestroy() {
6276 if (this.formDirective) {
6277 this.formDirective.removeFormGroup(this);
6278 }
6279 }
6280 /**
6281 * \@description
6282 * The `FormGroup` bound to this directive.
6283 * @return {?}
6284 */
6285 get control() { return (/** @type {?} */ (this.formDirective)).getFormGroup(this); }
6286 /**
6287 * \@description
6288 * The path to this group from the top-level directive.
6289 * @return {?}
6290 */
6291 get path() {
6292 return controlPath(this.name == null ? this.name : this.name.toString(), this._parent);
6293 }
6294 /**
6295 * \@description
6296 * The top-level directive for this group if present, otherwise null.
6297 * @return {?}
6298 */
6299 get formDirective() { return this._parent ? this._parent.formDirective : null; }
6300 /**
6301 * \@description
6302 * The synchronous validators registered with this group.
6303 * @return {?}
6304 */
6305 get validator() { return composeValidators(this._validators); }
6306 /**
6307 * \@description
6308 * The async validators registered with this group.
6309 * @return {?}
6310 */
6311 get asyncValidator() {
6312 return composeAsyncValidators(this._asyncValidators);
6313 }
6314 /**
6315 * \@internal
6316 * @return {?}
6317 */
6318 _checkParentType() { }
6319}
6320if (false) {
6321 /**
6322 * \@description
6323 * The parent control for the group
6324 *
6325 * \@internal
6326 * @type {?}
6327 */
6328 AbstractFormGroupDirective.prototype._parent;
6329 /**
6330 * \@description
6331 * An array of synchronous validators for the group
6332 *
6333 * \@internal
6334 * @type {?}
6335 */
6336 AbstractFormGroupDirective.prototype._validators;
6337 /**
6338 * \@description
6339 * An array of async validators for the group
6340 *
6341 * \@internal
6342 * @type {?}
6343 */
6344 AbstractFormGroupDirective.prototype._asyncValidators;
6345}
6346
6347/**
6348 * @fileoverview added by tsickle
6349 * Generated from: packages/forms/src/directives/template_driven_errors.ts
6350 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6351 */
6352class TemplateDrivenErrors {
6353 /**
6354 * @return {?}
6355 */
6356 static modelParentException() {
6357 throw new Error(`
6358 ngModel cannot be used to register form controls with a parent formGroup directive. Try using
6359 formGroup's partner directive "formControlName" instead. Example:
6360
6361 ${FormErrorExamples.formControlName}
6362
6363 Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:
6364
6365 Example:
6366
6367 ${FormErrorExamples.ngModelWithFormGroup}`);
6368 }
6369 /**
6370 * @return {?}
6371 */
6372 static formGroupNameException() {
6373 throw new Error(`
6374 ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.
6375
6376 Option 1: Use formControlName instead of ngModel (reactive strategy):
6377
6378 ${FormErrorExamples.formGroupName}
6379
6380 Option 2: Update ngModel's parent be ngModelGroup (template-driven strategy):
6381
6382 ${FormErrorExamples.ngModelGroup}`);
6383 }
6384 /**
6385 * @return {?}
6386 */
6387 static missingNameException() {
6388 throw new Error(`If ngModel is used within a form tag, either the name attribute must be set or the form
6389 control must be defined as 'standalone' in ngModelOptions.
6390
6391 Example 1: <input [(ngModel)]="person.firstName" name="first">
6392 Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">`);
6393 }
6394 /**
6395 * @return {?}
6396 */
6397 static modelGroupParentException() {
6398 throw new Error(`
6399 ngModelGroup cannot be used with a parent formGroup directive.
6400
6401 Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):
6402
6403 ${FormErrorExamples.formGroupName}
6404
6405 Option 2: Use a regular form tag instead of the formGroup directive (template-driven strategy):
6406
6407 ${FormErrorExamples.ngModelGroup}`);
6408 }
6409}
6410
6411/**
6412 * @fileoverview added by tsickle
6413 * Generated from: packages/forms/src/directives/ng_model_group.ts
6414 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6415 */
6416/** @type {?} */
6417const modelGroupProvider = {
6418 provide: ControlContainer,
6419 useExisting: forwardRef((/**
6420 * @return {?}
6421 */
6422 () => NgModelGroup))
6423};
6424/**
6425 * \@description
6426 * Creates and binds a `FormGroup` instance to a DOM element.
6427 *
6428 * This directive can only be used as a child of `NgForm` (within `<form>` tags).
6429 *
6430 * Use this directive to validate a sub-group of your form separately from the
6431 * rest of your form, or if some values in your domain model make more sense
6432 * to consume together in a nested object.
6433 *
6434 * Provide a name for the sub-group and it will become the key
6435 * for the sub-group in the form's full value. If you need direct access, export the directive into
6436 * a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`).
6437 *
6438 * \@usageNotes
6439 *
6440 * ### Consuming controls in a grouping
6441 *
6442 * The following example shows you how to combine controls together in a sub-group
6443 * of the form.
6444 *
6445 * {\@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'}
6446 *
6447 * \@ngModule FormsModule
6448 * \@publicApi
6449 */
6450class NgModelGroup extends AbstractFormGroupDirective {
6451 /**
6452 * @param {?} parent
6453 * @param {?} validators
6454 * @param {?} asyncValidators
6455 */
6456 constructor(parent, validators, asyncValidators) {
6457 super();
6458 this._parent = parent;
6459 this._validators = validators;
6460 this._asyncValidators = asyncValidators;
6461 }
6462 /**
6463 * \@internal
6464 * @return {?}
6465 */
6466 _checkParentType() {
6467 if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
6468 TemplateDrivenErrors.modelGroupParentException();
6469 }
6470 }
6471}
6472NgModelGroup.decorators = [
6473 { type: Directive, args: [{ selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup' },] }
6474];
6475/** @nocollapse */
6476NgModelGroup.ctorParameters = () => [
6477 { type: ControlContainer, decorators: [{ type: Host }, { type: SkipSelf }] },
6478 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
6479 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] }
6480];
6481NgModelGroup.propDecorators = {
6482 name: [{ type: Input, args: ['ngModelGroup',] }]
6483};
6484if (false) {
6485 /**
6486 * \@description
6487 * Tracks the name of the `NgModelGroup` bound to the directive. The name corresponds
6488 * to a key in the parent `NgForm`.
6489 * @type {?}
6490 */
6491 NgModelGroup.prototype.name;
6492}
6493
6494/**
6495 * @fileoverview added by tsickle
6496 * Generated from: packages/forms/src/directives/ng_model.ts
6497 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6498 */
6499/** @type {?} */
6500const formControlBinding = {
6501 provide: NgControl,
6502 useExisting: forwardRef((/**
6503 * @return {?}
6504 */
6505 () => NgModel))
6506};
6507const ɵ0$1 = /**
6508 * @return {?}
6509 */
6510() => Promise.resolve(null);
6511/**
6512 * `ngModel` forces an additional change detection run when its inputs change:
6513 * E.g.:
6514 * ```
6515 * <div>{{myModel.valid}}</div>
6516 * <input [(ngModel)]="myValue" #myModel="ngModel">
6517 * ```
6518 * I.e. `ngModel` can export itself on the element and then be used in the template.
6519 * Normally, this would result in expressions before the `input` that use the exported directive
6520 * to have and old value as they have been
6521 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
6522 * detection run.
6523 *
6524 * Notes:
6525 * - this is just one extra run no matter how many `ngModel` have been changed.
6526 * - this is a general problem when using `exportAs` for directives!
6527 * @type {?}
6528 */
6529const resolvedPromise$1 = ((ɵ0$1))();
6530/**
6531 * \@description
6532 * Creates a `FormControl` instance from a domain model and binds it
6533 * to a form control element.
6534 *
6535 * The `FormControl` instance tracks the value, user interaction, and
6536 * validation status of the control and keeps the view synced with the model. If used
6537 * within a parent form, the directive also registers itself with the form as a child
6538 * control.
6539 *
6540 * This directive is used by itself or as part of a larger form. Use the
6541 * `ngModel` selector to activate it.
6542 *
6543 * It accepts a domain model as an optional `Input`. If you have a one-way binding
6544 * to `ngModel` with `[]` syntax, changing the value of the domain model in the component
6545 * class sets the value in the view. If you have a two-way binding with `[()]` syntax
6546 * (also known as 'banana-box syntax'), the value in the UI always syncs back to
6547 * the domain model in your class.
6548 *
6549 * To inspect the properties of the associated `FormControl` (like validity state),
6550 * export the directive into a local template variable using `ngModel` as the key (ex: `#myVar="ngModel"`).
6551 * You then access the control using the directive's `control` property,
6552 * but most properties used (like `valid` and `dirty`) fall through to the control anyway for direct access.
6553 * See a full list of properties directly available in `AbstractControlDirective`.
6554 *
6555 * @see `RadioControlValueAccessor`
6556 * @see `SelectControlValueAccessor`
6557 *
6558 * \@usageNotes
6559 *
6560 * ### Using ngModel on a standalone control
6561 *
6562 * The following examples show a simple standalone control using `ngModel`:
6563 *
6564 * {\@example forms/ts/simpleNgModel/simple_ng_model_example.ts region='Component'}
6565 *
6566 * When using the `ngModel` within `<form>` tags, you'll also need to supply a `name` attribute
6567 * so that the control can be registered with the parent form under that name.
6568 *
6569 * In the context of a parent form, it's often unnecessary to include one-way or two-way binding,
6570 * as the parent form syncs the value for you. You access its properties by exporting it into a
6571 * local template variable using `ngForm` such as (`#f="ngForm"`). Use the variable where
6572 * needed on form submission.
6573 *
6574 * If you do need to populate initial values into your form, using a one-way binding for
6575 * `ngModel` tends to be sufficient as long as you use the exported form's value rather
6576 * than the domain model's value on submit.
6577 *
6578 * ### Using ngModel within a form
6579 *
6580 * The following example shows controls using `ngModel` within a form:
6581 *
6582 * {\@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
6583 *
6584 * ### Using a standalone ngModel within a group
6585 *
6586 * The following example shows you how to use a standalone ngModel control
6587 * within a form. This controls the display of the form, but doesn't contain form data.
6588 *
6589 * ```html
6590 * <form>
6591 * <input name="login" ngModel placeholder="Login">
6592 * <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
6593 * </form>
6594 * <!-- form value: {login: ''} -->
6595 * ```
6596 *
6597 * ### Setting the ngModel name attribute through options
6598 *
6599 * The following example shows you an alternate way to set the name attribute. The name attribute is used
6600 * within a custom form component, and the name `\@Input` property serves a different purpose.
6601 *
6602 * ```html
6603 * <form>
6604 * <my-person-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
6605 * </my-person-control>
6606 * </form>
6607 * <!-- form value: {user: ''} -->
6608 * ```
6609 *
6610 * \@ngModule FormsModule
6611 * \@publicApi
6612 */
6613class NgModel extends NgControl {
6614 /**
6615 * @param {?} parent
6616 * @param {?} validators
6617 * @param {?} asyncValidators
6618 * @param {?} valueAccessors
6619 */
6620 constructor(parent, validators, asyncValidators, valueAccessors) {
6621 super();
6622 this.control = new FormControl();
6623 /**
6624 * \@internal
6625 */
6626 this._registered = false;
6627 /**
6628 * \@description
6629 * Event emitter for producing the `ngModelChange` event after
6630 * the view model updates.
6631 */
6632 this.update = new EventEmitter();
6633 this._parent = parent;
6634 this._rawValidators = validators || [];
6635 this._rawAsyncValidators = asyncValidators || [];
6636 this.valueAccessor = selectValueAccessor(this, valueAccessors);
6637 }
6638 /**
6639 * \@description
6640 * A lifecycle method called when the directive's inputs change. For internal use
6641 * only.
6642 *
6643 * @param {?} changes A object of key/value pairs for the set of changed inputs.
6644 * @return {?}
6645 */
6646 ngOnChanges(changes) {
6647 this._checkForErrors();
6648 if (!this._registered)
6649 this._setUpControl();
6650 if ('isDisabled' in changes) {
6651 this._updateDisabled(changes);
6652 }
6653 if (isPropertyUpdated(changes, this.viewModel)) {
6654 this._updateValue(this.model);
6655 this.viewModel = this.model;
6656 }
6657 }
6658 /**
6659 * \@description
6660 * Lifecycle method called before the directive's instance is destroyed. For internal
6661 * use only.
6662 * @return {?}
6663 */
6664 ngOnDestroy() { this.formDirective && this.formDirective.removeControl(this); }
6665 /**
6666 * \@description
6667 * Returns an array that represents the path from the top-level form to this control.
6668 * Each index is the string name of the control on that level.
6669 * @return {?}
6670 */
6671 get path() {
6672 return this._parent ? controlPath(this.name, this._parent) : [this.name];
6673 }
6674 /**
6675 * \@description
6676 * The top-level directive for this control if present, otherwise null.
6677 * @return {?}
6678 */
6679 get formDirective() { return this._parent ? this._parent.formDirective : null; }
6680 /**
6681 * \@description
6682 * Synchronous validator function composed of all the synchronous validators
6683 * registered with this directive.
6684 * @return {?}
6685 */
6686 get validator() { return composeValidators(this._rawValidators); }
6687 /**
6688 * \@description
6689 * Async validator function composed of all the async validators registered with this
6690 * directive.
6691 * @return {?}
6692 */
6693 get asyncValidator() {
6694 return composeAsyncValidators(this._rawAsyncValidators);
6695 }
6696 /**
6697 * \@description
6698 * Sets the new value for the view model and emits an `ngModelChange` event.
6699 *
6700 * @param {?} newValue The new value emitted by `ngModelChange`.
6701 * @return {?}
6702 */
6703 viewToModelUpdate(newValue) {
6704 this.viewModel = newValue;
6705 this.update.emit(newValue);
6706 }
6707 /**
6708 * @private
6709 * @return {?}
6710 */
6711 _setUpControl() {
6712 this._setUpdateStrategy();
6713 this._isStandalone() ? this._setUpStandalone() :
6714 this.formDirective.addControl(this);
6715 this._registered = true;
6716 }
6717 /**
6718 * @private
6719 * @return {?}
6720 */
6721 _setUpdateStrategy() {
6722 if (this.options && this.options.updateOn != null) {
6723 this.control._updateOn = this.options.updateOn;
6724 }
6725 }
6726 /**
6727 * @private
6728 * @return {?}
6729 */
6730 _isStandalone() {
6731 return !this._parent || !!(this.options && this.options.standalone);
6732 }
6733 /**
6734 * @private
6735 * @return {?}
6736 */
6737 _setUpStandalone() {
6738 setUpControl(this.control, this);
6739 this.control.updateValueAndValidity({ emitEvent: false });
6740 }
6741 /**
6742 * @private
6743 * @return {?}
6744 */
6745 _checkForErrors() {
6746 if (!this._isStandalone()) {
6747 this._checkParentType();
6748 }
6749 this._checkName();
6750 }
6751 /**
6752 * @private
6753 * @return {?}
6754 */
6755 _checkParentType() {
6756 if (!(this._parent instanceof NgModelGroup) &&
6757 this._parent instanceof AbstractFormGroupDirective) {
6758 TemplateDrivenErrors.formGroupNameException();
6759 }
6760 else if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
6761 TemplateDrivenErrors.modelParentException();
6762 }
6763 }
6764 /**
6765 * @private
6766 * @return {?}
6767 */
6768 _checkName() {
6769 if (this.options && this.options.name)
6770 this.name = this.options.name;
6771 if (!this._isStandalone() && !this.name) {
6772 TemplateDrivenErrors.missingNameException();
6773 }
6774 }
6775 /**
6776 * @private
6777 * @param {?} value
6778 * @return {?}
6779 */
6780 _updateValue(value) {
6781 resolvedPromise$1.then((/**
6782 * @return {?}
6783 */
6784 () => { this.control.setValue(value, { emitViewToModelChange: false }); }));
6785 }
6786 /**
6787 * @private
6788 * @param {?} changes
6789 * @return {?}
6790 */
6791 _updateDisabled(changes) {
6792 /** @type {?} */
6793 const disabledValue = changes['isDisabled'].currentValue;
6794 /** @type {?} */
6795 const isDisabled = disabledValue === '' || (disabledValue && disabledValue !== 'false');
6796 resolvedPromise$1.then((/**
6797 * @return {?}
6798 */
6799 () => {
6800 if (isDisabled && !this.control.disabled) {
6801 this.control.disable();
6802 }
6803 else if (!isDisabled && this.control.disabled) {
6804 this.control.enable();
6805 }
6806 }));
6807 }
6808}
6809NgModel.decorators = [
6810 { type: Directive, args: [{
6811 selector: '[ngModel]:not([formControlName]):not([formControl])',
6812 providers: [formControlBinding],
6813 exportAs: 'ngModel'
6814 },] }
6815];
6816/** @nocollapse */
6817NgModel.ctorParameters = () => [
6818 { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }] },
6819 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
6820 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] },
6821 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALUE_ACCESSOR,] }] }
6822];
6823NgModel.propDecorators = {
6824 name: [{ type: Input }],
6825 isDisabled: [{ type: Input, args: ['disabled',] }],
6826 model: [{ type: Input, args: ['ngModel',] }],
6827 options: [{ type: Input, args: ['ngModelOptions',] }],
6828 update: [{ type: Output, args: ['ngModelChange',] }]
6829};
6830if (false) {
6831 /**
6832 * \@nodoc
6833 * @type {?}
6834 */
6835 NgModel.ngAcceptInputType_isDisabled;
6836 /** @type {?} */
6837 NgModel.prototype.control;
6838 /**
6839 * \@internal
6840 * @type {?}
6841 */
6842 NgModel.prototype._registered;
6843 /**
6844 * \@description
6845 * Internal reference to the view model value.
6846 * @type {?}
6847 */
6848 NgModel.prototype.viewModel;
6849 /**
6850 * \@description
6851 * Tracks the name bound to the directive. The parent form
6852 * uses this name as a key to retrieve this control's value.
6853 * @type {?}
6854 */
6855 NgModel.prototype.name;
6856 /**
6857 * \@description
6858 * Tracks whether the control is disabled.
6859 * @type {?}
6860 */
6861 NgModel.prototype.isDisabled;
6862 /**
6863 * \@description
6864 * Tracks the value bound to this directive.
6865 * @type {?}
6866 */
6867 NgModel.prototype.model;
6868 /**
6869 * \@description
6870 * Tracks the configuration options for this `ngModel` instance.
6871 *
6872 * **name**: An alternative to setting the name attribute on the form control element. See
6873 * the [example](api/forms/NgModel#using-ngmodel-on-a-standalone-control) for using `NgModel`
6874 * as a standalone control.
6875 *
6876 * **standalone**: When set to true, the `ngModel` will not register itself with its parent form,
6877 * and acts as if it's not in the form. Defaults to false.
6878 *
6879 * **updateOn**: Defines the event upon which the form control value and validity update.
6880 * Defaults to 'change'. Possible values: `'change'` | `'blur'` | `'submit'`.
6881 *
6882 * @type {?}
6883 */
6884 NgModel.prototype.options;
6885 /**
6886 * \@description
6887 * Event emitter for producing the `ngModelChange` event after
6888 * the view model updates.
6889 * @type {?}
6890 */
6891 NgModel.prototype.update;
6892}
6893
6894/**
6895 * @fileoverview added by tsickle
6896 * Generated from: packages/forms/src/directives/ng_no_validate_directive.ts
6897 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6898 */
6899/**
6900 * \@description
6901 *
6902 * Adds `novalidate` attribute to all forms by default.
6903 *
6904 * `novalidate` is used to disable browser's native form validation.
6905 *
6906 * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute:
6907 *
6908 * ```
6909 * <form ngNativeValidate></form>
6910 * ```
6911 *
6912 * \@publicApi
6913 * \@ngModule ReactiveFormsModule
6914 * \@ngModule FormsModule
6915 */
6916class ɵNgNoValidate {
6917}
6918ɵNgNoValidate.decorators = [
6919 { type: Directive, args: [{
6920 selector: 'form:not([ngNoForm]):not([ngNativeValidate])',
6921 host: { 'novalidate': '' },
6922 },] }
6923];
6924
6925/**
6926 * @fileoverview added by tsickle
6927 * Generated from: packages/forms/src/directives/reactive_directives/form_control_directive.ts
6928 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6929 */
6930/**
6931 * Token to provide to turn off the ngModel warning on formControl and formControlName.
6932 * @type {?}
6933 */
6934const NG_MODEL_WITH_FORM_CONTROL_WARNING = new InjectionToken('NgModelWithFormControlWarning');
6935/** @type {?} */
6936const formControlBinding$1 = {
6937 provide: NgControl,
6938 useExisting: forwardRef((/**
6939 * @return {?}
6940 */
6941 () => FormControlDirective))
6942};
6943/**
6944 * \@description
6945 * * Syncs a standalone `FormControl` instance to a form control element.
6946 *
6947 * @see [Reactive Forms Guide](guide/reactive-forms)
6948 * @see `FormControl`
6949 * @see `AbstractControl`
6950 *
6951 * \@usageNotes
6952 *
6953 * ### Registering a single form control
6954 *
6955 * The following examples shows how to register a standalone control and set its value.
6956 *
6957 * {\@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
6958 *
6959 * ### Use with ngModel
6960 *
6961 * Support for using the `ngModel` input property and `ngModelChange` event with reactive
6962 * form directives has been deprecated in Angular v6 and will be removed in a future version
6963 * of Angular.
6964 *
6965 * Now deprecated:
6966 *
6967 * ```html
6968 * <input [formControl]="control" [(ngModel)]="value">
6969 * ```
6970 *
6971 * ```ts
6972 * this.value = 'some value';
6973 * ```
6974 *
6975 * This has been deprecated for a few reasons. First, developers have found this pattern
6976 * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
6977 * an input/output property named `ngModel` on the reactive form directive that simply
6978 * approximates (some of) its behavior. Specifically, it allows getting/setting the value
6979 * and intercepting value events. However, some of `ngModel`'s other features - like
6980 * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
6981 * which has understandably caused some confusion.
6982 *
6983 * In addition, this pattern mixes template-driven and reactive forms strategies, which
6984 * we generally don't recommend because it doesn't take advantage of the full benefits of
6985 * either strategy. Setting the value in the template violates the template-agnostic
6986 * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
6987 * the class removes the convenience of defining forms in the template.
6988 *
6989 * To update your code before support is removed, you'll want to decide whether to stick
6990 * with reactive form directives (and get/set values using reactive forms patterns) or
6991 * switch over to template-driven directives.
6992 *
6993 * After (choice 1 - use reactive forms):
6994 *
6995 * ```html
6996 * <input [formControl]="control">
6997 * ```
6998 *
6999 * ```ts
7000 * this.control.setValue('some value');
7001 * ```
7002 *
7003 * After (choice 2 - use template-driven forms):
7004 *
7005 * ```html
7006 * <input [(ngModel)]="value">
7007 * ```
7008 *
7009 * ```ts
7010 * this.value = 'some value';
7011 * ```
7012 *
7013 * By default, when you use this pattern, you will see a deprecation warning once in dev
7014 * mode. You can choose to silence this warning by providing a config for
7015 * `ReactiveFormsModule` at import time:
7016 *
7017 * ```ts
7018 * imports: [
7019 * ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
7020 * ]
7021 * ```
7022 *
7023 * Alternatively, you can choose to surface a separate warning for each instance of this
7024 * pattern with a config value of `"always"`. This may help to track down where in the code
7025 * the pattern is being used as the code is being updated.
7026 *
7027 * \@ngModule ReactiveFormsModule
7028 * \@publicApi
7029 */
7030class FormControlDirective extends NgControl {
7031 /**
7032 * @param {?} validators
7033 * @param {?} asyncValidators
7034 * @param {?} valueAccessors
7035 * @param {?} _ngModelWarningConfig
7036 */
7037 constructor(validators, asyncValidators, valueAccessors, _ngModelWarningConfig) {
7038 super();
7039 this._ngModelWarningConfig = _ngModelWarningConfig;
7040 /**
7041 * @deprecated as of v6
7042 */
7043 this.update = new EventEmitter();
7044 /**
7045 * \@description
7046 * Instance property used to track whether an ngModel warning has been sent out for this
7047 * particular `FormControlDirective` instance. Used to support warning config of "always".
7048 *
7049 * \@internal
7050 */
7051 this._ngModelWarningSent = false;
7052 this._rawValidators = validators || [];
7053 this._rawAsyncValidators = asyncValidators || [];
7054 this.valueAccessor = selectValueAccessor(this, valueAccessors);
7055 }
7056 /**
7057 * \@description
7058 * Triggers a warning that this input should not be used with reactive forms.
7059 * @param {?} isDisabled
7060 * @return {?}
7061 */
7062 set isDisabled(isDisabled) { ReactiveErrors.disabledAttrWarning(); }
7063 /**
7064 * \@description
7065 * A lifecycle method called when the directive's inputs change. For internal use
7066 * only.
7067 *
7068 * @param {?} changes A object of key/value pairs for the set of changed inputs.
7069 * @return {?}
7070 */
7071 ngOnChanges(changes) {
7072 if (this._isControlChanged(changes)) {
7073 setUpControl(this.form, this);
7074 if (this.control.disabled && (/** @type {?} */ (this.valueAccessor)).setDisabledState) {
7075 (/** @type {?} */ ((/** @type {?} */ (this.valueAccessor)).setDisabledState))(true);
7076 }
7077 this.form.updateValueAndValidity({ emitEvent: false });
7078 }
7079 if (isPropertyUpdated(changes, this.viewModel)) {
7080 _ngModelWarning('formControl', FormControlDirective, this, this._ngModelWarningConfig);
7081 this.form.setValue(this.model);
7082 this.viewModel = this.model;
7083 }
7084 }
7085 /**
7086 * \@description
7087 * Returns an array that represents the path from the top-level form to this control.
7088 * Each index is the string name of the control on that level.
7089 * @return {?}
7090 */
7091 get path() { return []; }
7092 /**
7093 * \@description
7094 * Synchronous validator function composed of all the synchronous validators
7095 * registered with this directive.
7096 * @return {?}
7097 */
7098 get validator() { return composeValidators(this._rawValidators); }
7099 /**
7100 * \@description
7101 * Async validator function composed of all the async validators registered with this
7102 * directive.
7103 * @return {?}
7104 */
7105 get asyncValidator() {
7106 return composeAsyncValidators(this._rawAsyncValidators);
7107 }
7108 /**
7109 * \@description
7110 * The `FormControl` bound to this directive.
7111 * @return {?}
7112 */
7113 get control() { return this.form; }
7114 /**
7115 * \@description
7116 * Sets the new value for the view model and emits an `ngModelChange` event.
7117 *
7118 * @param {?} newValue The new value for the view model.
7119 * @return {?}
7120 */
7121 viewToModelUpdate(newValue) {
7122 this.viewModel = newValue;
7123 this.update.emit(newValue);
7124 }
7125 /**
7126 * @private
7127 * @param {?} changes
7128 * @return {?}
7129 */
7130 _isControlChanged(changes) {
7131 return changes.hasOwnProperty('form');
7132 }
7133}
7134/**
7135 * \@description
7136 * Static property used to track whether any ngModel warnings have been sent across
7137 * all instances of FormControlDirective. Used to support warning config of "once".
7138 *
7139 * \@internal
7140 */
7141FormControlDirective._ngModelWarningSentOnce = false;
7142FormControlDirective.decorators = [
7143 { type: Directive, args: [{ selector: '[formControl]', providers: [formControlBinding$1], exportAs: 'ngForm' },] }
7144];
7145/** @nocollapse */
7146FormControlDirective.ctorParameters = () => [
7147 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
7148 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] },
7149 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALUE_ACCESSOR,] }] },
7150 { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [NG_MODEL_WITH_FORM_CONTROL_WARNING,] }] }
7151];
7152FormControlDirective.propDecorators = {
7153 form: [{ type: Input, args: ['formControl',] }],
7154 isDisabled: [{ type: Input, args: ['disabled',] }],
7155 model: [{ type: Input, args: ['ngModel',] }],
7156 update: [{ type: Output, args: ['ngModelChange',] }]
7157};
7158if (false) {
7159 /**
7160 * \@description
7161 * Static property used to track whether any ngModel warnings have been sent across
7162 * all instances of FormControlDirective. Used to support warning config of "once".
7163 *
7164 * \@internal
7165 * @type {?}
7166 */
7167 FormControlDirective._ngModelWarningSentOnce;
7168 /**
7169 * \@description
7170 * Internal reference to the view model value.
7171 * @type {?}
7172 */
7173 FormControlDirective.prototype.viewModel;
7174 /**
7175 * \@description
7176 * Tracks the `FormControl` instance bound to the directive.
7177 * @type {?}
7178 */
7179 FormControlDirective.prototype.form;
7180 /**
7181 * @deprecated as of v6
7182 * @type {?}
7183 */
7184 FormControlDirective.prototype.model;
7185 /**
7186 * @deprecated as of v6
7187 * @type {?}
7188 */
7189 FormControlDirective.prototype.update;
7190 /**
7191 * \@description
7192 * Instance property used to track whether an ngModel warning has been sent out for this
7193 * particular `FormControlDirective` instance. Used to support warning config of "always".
7194 *
7195 * \@internal
7196 * @type {?}
7197 */
7198 FormControlDirective.prototype._ngModelWarningSent;
7199 /**
7200 * @type {?}
7201 * @private
7202 */
7203 FormControlDirective.prototype._ngModelWarningConfig;
7204}
7205
7206/**
7207 * @fileoverview added by tsickle
7208 * Generated from: packages/forms/src/directives/reactive_directives/form_group_directive.ts
7209 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
7210 */
7211/** @type {?} */
7212const formDirectiveProvider$1 = {
7213 provide: ControlContainer,
7214 useExisting: forwardRef((/**
7215 * @return {?}
7216 */
7217 () => FormGroupDirective))
7218};
7219/**
7220 * \@description
7221 *
7222 * Binds an existing `FormGroup` to a DOM element.
7223 *
7224 * This directive accepts an existing `FormGroup` instance. It will then use this
7225 * `FormGroup` instance to match any child `FormControl`, `FormGroup`,
7226 * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
7227 * and `FormArrayName` directives.
7228 *
7229 * @see [Reactive Forms Guide](guide/reactive-forms)
7230 * @see `AbstractControl`
7231 *
7232 * ### Register Form Group
7233 *
7234 * The following example registers a `FormGroup` with first name and last name controls,
7235 * and listens for the *ngSubmit* event when the button is clicked.
7236 *
7237 * {\@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
7238 *
7239 * \@ngModule ReactiveFormsModule
7240 * \@publicApi
7241 */
7242class FormGroupDirective extends ControlContainer {
7243 /**
7244 * @param {?} _validators
7245 * @param {?} _asyncValidators
7246 */
7247 constructor(_validators, _asyncValidators) {
7248 super();
7249 this._validators = _validators;
7250 this._asyncValidators = _asyncValidators;
7251 /**
7252 * \@description
7253 * Reports whether the form submission has been triggered.
7254 */
7255 this.submitted = false;
7256 /**
7257 * \@description
7258 * Tracks the list of added `FormControlName` instances
7259 */
7260 this.directives = [];
7261 /**
7262 * \@description
7263 * Tracks the `FormGroup` bound to this directive.
7264 */
7265 this.form = (/** @type {?} */ (null));
7266 /**
7267 * \@description
7268 * Emits an event when the form submission has been triggered.
7269 */
7270 this.ngSubmit = new EventEmitter();
7271 }
7272 /**
7273 * \@description
7274 * A lifecycle method called when the directive's inputs change. For internal use only.
7275 *
7276 * @param {?} changes A object of key/value pairs for the set of changed inputs.
7277 * @return {?}
7278 */
7279 ngOnChanges(changes) {
7280 this._checkFormPresent();
7281 if (changes.hasOwnProperty('form')) {
7282 this._updateValidators();
7283 this._updateDomValue();
7284 this._updateRegistrations();
7285 }
7286 }
7287 /**
7288 * \@description
7289 * Returns this directive's instance.
7290 * @return {?}
7291 */
7292 get formDirective() { return this; }
7293 /**
7294 * \@description
7295 * Returns the `FormGroup` bound to this directive.
7296 * @return {?}
7297 */
7298 get control() { return this.form; }
7299 /**
7300 * \@description
7301 * Returns an array representing the path to this group. Because this directive
7302 * always lives at the top level of a form, it always an empty array.
7303 * @return {?}
7304 */
7305 get path() { return []; }
7306 /**
7307 * \@description
7308 * Method that sets up the control directive in this group, re-calculates its value
7309 * and validity, and adds the instance to the internal list of directives.
7310 *
7311 * @param {?} dir The `FormControlName` directive instance.
7312 * @return {?}
7313 */
7314 addControl(dir) {
7315 /** @type {?} */
7316 const ctrl = this.form.get(dir.path);
7317 setUpControl(ctrl, dir);
7318 ctrl.updateValueAndValidity({ emitEvent: false });
7319 this.directives.push(dir);
7320 return ctrl;
7321 }
7322 /**
7323 * \@description
7324 * Retrieves the `FormControl` instance from the provided `FormControlName` directive
7325 *
7326 * @param {?} dir The `FormControlName` directive instance.
7327 * @return {?}
7328 */
7329 getControl(dir) { return (/** @type {?} */ (this.form.get(dir.path))); }
7330 /**
7331 * \@description
7332 * Removes the `FormControlName` instance from the internal list of directives
7333 *
7334 * @param {?} dir The `FormControlName` directive instance.
7335 * @return {?}
7336 */
7337 removeControl(dir) { removeDir(this.directives, dir); }
7338 /**
7339 * Adds a new `FormGroupName` directive instance to the form.
7340 *
7341 * @param {?} dir The `FormGroupName` directive instance.
7342 * @return {?}
7343 */
7344 addFormGroup(dir) {
7345 /** @type {?} */
7346 const ctrl = this.form.get(dir.path);
7347 setUpFormContainer(ctrl, dir);
7348 ctrl.updateValueAndValidity({ emitEvent: false });
7349 }
7350 /**
7351 * No-op method to remove the form group.
7352 *
7353 * @param {?} dir The `FormGroupName` directive instance.
7354 * @return {?}
7355 */
7356 removeFormGroup(dir) { }
7357 /**
7358 * \@description
7359 * Retrieves the `FormGroup` for a provided `FormGroupName` directive instance
7360 *
7361 * @param {?} dir The `FormGroupName` directive instance.
7362 * @return {?}
7363 */
7364 getFormGroup(dir) { return (/** @type {?} */ (this.form.get(dir.path))); }
7365 /**
7366 * Adds a new `FormArrayName` directive instance to the form.
7367 *
7368 * @param {?} dir The `FormArrayName` directive instance.
7369 * @return {?}
7370 */
7371 addFormArray(dir) {
7372 /** @type {?} */
7373 const ctrl = this.form.get(dir.path);
7374 setUpFormContainer(ctrl, dir);
7375 ctrl.updateValueAndValidity({ emitEvent: false });
7376 }
7377 /**
7378 * No-op method to remove the form array.
7379 *
7380 * @param {?} dir The `FormArrayName` directive instance.
7381 * @return {?}
7382 */
7383 removeFormArray(dir) { }
7384 /**
7385 * \@description
7386 * Retrieves the `FormArray` for a provided `FormArrayName` directive instance.
7387 *
7388 * @param {?} dir The `FormArrayName` directive instance.
7389 * @return {?}
7390 */
7391 getFormArray(dir) { return (/** @type {?} */ (this.form.get(dir.path))); }
7392 /**
7393 * Sets the new value for the provided `FormControlName` directive.
7394 *
7395 * @param {?} dir The `FormControlName` directive instance.
7396 * @param {?} value The new value for the directive's control.
7397 * @return {?}
7398 */
7399 updateModel(dir, value) {
7400 /** @type {?} */
7401 const ctrl = (/** @type {?} */ (this.form.get(dir.path)));
7402 ctrl.setValue(value);
7403 }
7404 /**
7405 * \@description
7406 * Method called with the "submit" event is triggered on the form.
7407 * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
7408 *
7409 * @param {?} $event The "submit" event object
7410 * @return {?}
7411 */
7412 onSubmit($event) {
7413 ((/** @type {?} */ (this))).submitted = true;
7414 syncPendingControls(this.form, this.directives);
7415 this.ngSubmit.emit($event);
7416 return false;
7417 }
7418 /**
7419 * \@description
7420 * Method called when the "reset" event is triggered on the form.
7421 * @return {?}
7422 */
7423 onReset() { this.resetForm(); }
7424 /**
7425 * \@description
7426 * Resets the form to an initial value and resets its submitted status.
7427 *
7428 * @param {?=} value The new value for the form.
7429 * @return {?}
7430 */
7431 resetForm(value = undefined) {
7432 this.form.reset(value);
7433 ((/** @type {?} */ (this))).submitted = false;
7434 }
7435 /**
7436 * \@internal
7437 * @return {?}
7438 */
7439 _updateDomValue() {
7440 this.directives.forEach((/**
7441 * @param {?} dir
7442 * @return {?}
7443 */
7444 dir => {
7445 /** @type {?} */
7446 const newCtrl = this.form.get(dir.path);
7447 if (dir.control !== newCtrl) {
7448 cleanUpControl(dir.control, dir);
7449 if (newCtrl)
7450 setUpControl(newCtrl, dir);
7451 ((/** @type {?} */ (dir))).control = newCtrl;
7452 }
7453 }));
7454 this.form._updateTreeValidity({ emitEvent: false });
7455 }
7456 /**
7457 * @private
7458 * @return {?}
7459 */
7460 _updateRegistrations() {
7461 this.form._registerOnCollectionChange((/**
7462 * @return {?}
7463 */
7464 () => this._updateDomValue()));
7465 if (this._oldForm)
7466 this._oldForm._registerOnCollectionChange((/**
7467 * @return {?}
7468 */
7469 () => { }));
7470 this._oldForm = this.form;
7471 }
7472 /**
7473 * @private
7474 * @return {?}
7475 */
7476 _updateValidators() {
7477 /** @type {?} */
7478 const sync = composeValidators(this._validators);
7479 this.form.validator = Validators.compose([(/** @type {?} */ (this.form.validator)), (/** @type {?} */ (sync))]);
7480 /** @type {?} */
7481 const async = composeAsyncValidators(this._asyncValidators);
7482 this.form.asyncValidator = Validators.composeAsync([(/** @type {?} */ (this.form.asyncValidator)), (/** @type {?} */ (async))]);
7483 }
7484 /**
7485 * @private
7486 * @return {?}
7487 */
7488 _checkFormPresent() {
7489 if (!this.form) {
7490 ReactiveErrors.missingFormException();
7491 }
7492 }
7493}
7494FormGroupDirective.decorators = [
7495 { type: Directive, args: [{
7496 selector: '[formGroup]',
7497 providers: [formDirectiveProvider$1],
7498 host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
7499 exportAs: 'ngForm'
7500 },] }
7501];
7502/** @nocollapse */
7503FormGroupDirective.ctorParameters = () => [
7504 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
7505 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] }
7506];
7507FormGroupDirective.propDecorators = {
7508 form: [{ type: Input, args: ['formGroup',] }],
7509 ngSubmit: [{ type: Output }]
7510};
7511if (false) {
7512 /**
7513 * \@description
7514 * Reports whether the form submission has been triggered.
7515 * @type {?}
7516 */
7517 FormGroupDirective.prototype.submitted;
7518 /**
7519 * @type {?}
7520 * @private
7521 */
7522 FormGroupDirective.prototype._oldForm;
7523 /**
7524 * \@description
7525 * Tracks the list of added `FormControlName` instances
7526 * @type {?}
7527 */
7528 FormGroupDirective.prototype.directives;
7529 /**
7530 * \@description
7531 * Tracks the `FormGroup` bound to this directive.
7532 * @type {?}
7533 */
7534 FormGroupDirective.prototype.form;
7535 /**
7536 * \@description
7537 * Emits an event when the form submission has been triggered.
7538 * @type {?}
7539 */
7540 FormGroupDirective.prototype.ngSubmit;
7541 /**
7542 * @type {?}
7543 * @private
7544 */
7545 FormGroupDirective.prototype._validators;
7546 /**
7547 * @type {?}
7548 * @private
7549 */
7550 FormGroupDirective.prototype._asyncValidators;
7551}
7552
7553/**
7554 * @fileoverview added by tsickle
7555 * Generated from: packages/forms/src/directives/reactive_directives/form_group_name.ts
7556 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
7557 */
7558/** @type {?} */
7559const formGroupNameProvider = {
7560 provide: ControlContainer,
7561 useExisting: forwardRef((/**
7562 * @return {?}
7563 */
7564 () => FormGroupName))
7565};
7566/**
7567 * \@description
7568 *
7569 * Syncs a nested `FormGroup` to a DOM element.
7570 *
7571 * This directive can only be used with a parent `FormGroupDirective`.
7572 *
7573 * It accepts the string name of the nested `FormGroup` to link, and
7574 * looks for a `FormGroup` registered with that name in the parent
7575 * `FormGroup` instance you passed into `FormGroupDirective`.
7576 *
7577 * Use nested form groups to validate a sub-group of a
7578 * form separately from the rest or to group the values of certain
7579 * controls into their own nested object.
7580 *
7581 * @see [Reactive Forms Guide](guide/reactive-forms)
7582 *
7583 * \@usageNotes
7584 *
7585 * ### Access the group by name
7586 *
7587 * The following example uses the {\@link AbstractControl#get get} method to access the
7588 * associated `FormGroup`
7589 *
7590 * ```ts
7591 * this.form.get('name');
7592 * ```
7593 *
7594 * ### Access individual controls in the group
7595 *
7596 * The following example uses the {\@link AbstractControl#get get} method to access
7597 * individual controls within the group using dot syntax.
7598 *
7599 * ```ts
7600 * this.form.get('name.first');
7601 * ```
7602 *
7603 * ### Register a nested `FormGroup`.
7604 *
7605 * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`,
7606 * and provides methods to retrieve the nested `FormGroup` and individual controls.
7607 *
7608 * {\@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
7609 *
7610 * \@ngModule ReactiveFormsModule
7611 * \@publicApi
7612 */
7613class FormGroupName extends AbstractFormGroupDirective {
7614 /**
7615 * @param {?} parent
7616 * @param {?} validators
7617 * @param {?} asyncValidators
7618 */
7619 constructor(parent, validators, asyncValidators) {
7620 super();
7621 this._parent = parent;
7622 this._validators = validators;
7623 this._asyncValidators = asyncValidators;
7624 }
7625 /**
7626 * \@internal
7627 * @return {?}
7628 */
7629 _checkParentType() {
7630 if (_hasInvalidParent(this._parent)) {
7631 ReactiveErrors.groupParentException();
7632 }
7633 }
7634}
7635FormGroupName.decorators = [
7636 { type: Directive, args: [{ selector: '[formGroupName]', providers: [formGroupNameProvider] },] }
7637];
7638/** @nocollapse */
7639FormGroupName.ctorParameters = () => [
7640 { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf }] },
7641 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
7642 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] }
7643];
7644FormGroupName.propDecorators = {
7645 name: [{ type: Input, args: ['formGroupName',] }]
7646};
7647if (false) {
7648 /**
7649 * \@description
7650 * Tracks the name of the `FormGroup` bound to the directive. The name corresponds
7651 * to a key in the parent `FormGroup` or `FormArray`.
7652 * Accepts a name as a string or a number.
7653 * The name in the form of a string is useful for individual forms,
7654 * while the numerical form allows for form groups to be bound
7655 * to indices when iterating over groups in a `FormArray`.
7656 * @type {?}
7657 */
7658 FormGroupName.prototype.name;
7659}
7660/** @type {?} */
7661const formArrayNameProvider = {
7662 provide: ControlContainer,
7663 useExisting: forwardRef((/**
7664 * @return {?}
7665 */
7666 () => FormArrayName))
7667};
7668/**
7669 * \@description
7670 *
7671 * Syncs a nested `FormArray` to a DOM element.
7672 *
7673 * This directive is designed to be used with a parent `FormGroupDirective` (selector:
7674 * `[formGroup]`).
7675 *
7676 * It accepts the string name of the nested `FormArray` you want to link, and
7677 * will look for a `FormArray` registered with that name in the parent
7678 * `FormGroup` instance you passed into `FormGroupDirective`.
7679 *
7680 * @see [Reactive Forms Guide](guide/reactive-forms)
7681 * @see `AbstractControl`
7682 *
7683 * \@usageNotes
7684 *
7685 * ### Example
7686 *
7687 * {\@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
7688 *
7689 * \@ngModule ReactiveFormsModule
7690 * \@publicApi
7691 */
7692class FormArrayName extends ControlContainer {
7693 /**
7694 * @param {?} parent
7695 * @param {?} validators
7696 * @param {?} asyncValidators
7697 */
7698 constructor(parent, validators, asyncValidators) {
7699 super();
7700 this._parent = parent;
7701 this._validators = validators;
7702 this._asyncValidators = asyncValidators;
7703 }
7704 /**
7705 * \@description
7706 * A lifecycle method called when the directive's inputs are initialized. For internal use only.
7707 *
7708 * @throws If the directive does not have a valid parent.
7709 * @return {?}
7710 */
7711 ngOnInit() {
7712 this._checkParentType();
7713 (/** @type {?} */ (this.formDirective)).addFormArray(this);
7714 }
7715 /**
7716 * \@description
7717 * A lifecycle method called before the directive's instance is destroyed. For internal use only.
7718 * @return {?}
7719 */
7720 ngOnDestroy() {
7721 if (this.formDirective) {
7722 this.formDirective.removeFormArray(this);
7723 }
7724 }
7725 /**
7726 * \@description
7727 * The `FormArray` bound to this directive.
7728 * @return {?}
7729 */
7730 get control() { return (/** @type {?} */ (this.formDirective)).getFormArray(this); }
7731 /**
7732 * \@description
7733 * The top-level directive for this group if present, otherwise null.
7734 * @return {?}
7735 */
7736 get formDirective() {
7737 return this._parent ? (/** @type {?} */ (this._parent.formDirective)) : null;
7738 }
7739 /**
7740 * \@description
7741 * Returns an array that represents the path from the top-level form to this control.
7742 * Each index is the string name of the control on that level.
7743 * @return {?}
7744 */
7745 get path() {
7746 return controlPath(this.name == null ? this.name : this.name.toString(), this._parent);
7747 }
7748 /**
7749 * \@description
7750 * Synchronous validator function composed of all the synchronous validators registered with this
7751 * directive.
7752 * @return {?}
7753 */
7754 get validator() { return composeValidators(this._validators); }
7755 /**
7756 * \@description
7757 * Async validator function composed of all the async validators registered with this directive.
7758 * @return {?}
7759 */
7760 get asyncValidator() {
7761 return composeAsyncValidators(this._asyncValidators);
7762 }
7763 /**
7764 * @private
7765 * @return {?}
7766 */
7767 _checkParentType() {
7768 if (_hasInvalidParent(this._parent)) {
7769 ReactiveErrors.arrayParentException();
7770 }
7771 }
7772}
7773FormArrayName.decorators = [
7774 { type: Directive, args: [{ selector: '[formArrayName]', providers: [formArrayNameProvider] },] }
7775];
7776/** @nocollapse */
7777FormArrayName.ctorParameters = () => [
7778 { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf }] },
7779 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
7780 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] }
7781];
7782FormArrayName.propDecorators = {
7783 name: [{ type: Input, args: ['formArrayName',] }]
7784};
7785if (false) {
7786 /**
7787 * \@internal
7788 * @type {?}
7789 */
7790 FormArrayName.prototype._parent;
7791 /**
7792 * \@internal
7793 * @type {?}
7794 */
7795 FormArrayName.prototype._validators;
7796 /**
7797 * \@internal
7798 * @type {?}
7799 */
7800 FormArrayName.prototype._asyncValidators;
7801 /**
7802 * \@description
7803 * Tracks the name of the `FormArray` bound to the directive. The name corresponds
7804 * to a key in the parent `FormGroup` or `FormArray`.
7805 * Accepts a name as a string or a number.
7806 * The name in the form of a string is useful for individual forms,
7807 * while the numerical form allows for form arrays to be bound
7808 * to indices when iterating over arrays in a `FormArray`.
7809 * @type {?}
7810 */
7811 FormArrayName.prototype.name;
7812}
7813/**
7814 * @param {?} parent
7815 * @return {?}
7816 */
7817function _hasInvalidParent(parent) {
7818 return !(parent instanceof FormGroupName) && !(parent instanceof FormGroupDirective) &&
7819 !(parent instanceof FormArrayName);
7820}
7821
7822/**
7823 * @fileoverview added by tsickle
7824 * Generated from: packages/forms/src/directives/reactive_directives/form_control_name.ts
7825 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
7826 */
7827/** @type {?} */
7828const controlNameBinding = {
7829 provide: NgControl,
7830 useExisting: forwardRef((/**
7831 * @return {?}
7832 */
7833 () => FormControlName))
7834};
7835/**
7836 * \@description
7837 * Syncs a `FormControl` in an existing `FormGroup` to a form control
7838 * element by name.
7839 *
7840 * @see [Reactive Forms Guide](guide/reactive-forms)
7841 * @see `FormControl`
7842 * @see `AbstractControl`
7843 *
7844 * \@usageNotes
7845 *
7846 * ### Register `FormControl` within a group
7847 *
7848 * The following example shows how to register multiple form controls within a form group
7849 * and set their value.
7850 *
7851 * {\@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
7852 *
7853 * To see `formControlName` examples with different form control types, see:
7854 *
7855 * * Radio buttons: `RadioControlValueAccessor`
7856 * * Selects: `SelectControlValueAccessor`
7857 *
7858 * ### Use with ngModel
7859 *
7860 * Support for using the `ngModel` input property and `ngModelChange` event with reactive
7861 * form directives has been deprecated in Angular v6 and will be removed in a future
7862 * version of Angular.
7863 *
7864 * Now deprecated:
7865 *
7866 * ```html
7867 * <form [formGroup]="form">
7868 * <input formControlName="first" [(ngModel)]="value">
7869 * </form>
7870 * ```
7871 *
7872 * ```ts
7873 * this.value = 'some value';
7874 * ```
7875 *
7876 * This has been deprecated for a few reasons. First, developers have found this pattern
7877 * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
7878 * an input/output property named `ngModel` on the reactive form directive that simply
7879 * approximates (some of) its behavior. Specifically, it allows getting/setting the value
7880 * and intercepting value events. However, some of `ngModel`'s other features - like
7881 * delaying updates with `ngModelOptions` or exporting the directive - simply don't work,
7882 * which has understandably caused some confusion.
7883 *
7884 * In addition, this pattern mixes template-driven and reactive forms strategies, which
7885 * we generally don't recommend because it doesn't take advantage of the full benefits of
7886 * either strategy. Setting the value in the template violates the template-agnostic
7887 * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
7888 * the class removes the convenience of defining forms in the template.
7889 *
7890 * To update your code before support is removed, you'll want to decide whether to stick with
7891 * reactive form directives (and get/set values using reactive forms patterns) or switch over to
7892 * template-driven directives.
7893 *
7894 * After (choice 1 - use reactive forms):
7895 *
7896 * ```html
7897 * <form [formGroup]="form">
7898 * <input formControlName="first">
7899 * </form>
7900 * ```
7901 *
7902 * ```ts
7903 * this.form.get('first').setValue('some value');
7904 * ```
7905 *
7906 * After (choice 2 - use template-driven forms):
7907 *
7908 * ```html
7909 * <input [(ngModel)]="value">
7910 * ```
7911 *
7912 * ```ts
7913 * this.value = 'some value';
7914 * ```
7915 *
7916 * By default, when you use this pattern, you will see a deprecation warning once in dev
7917 * mode. You can choose to silence this warning by providing a config for
7918 * `ReactiveFormsModule` at import time:
7919 *
7920 * ```ts
7921 * imports: [
7922 * ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'})
7923 * ]
7924 * ```
7925 *
7926 * Alternatively, you can choose to surface a separate warning for each instance of this
7927 * pattern with a config value of `"always"`. This may help to track down where in the code
7928 * the pattern is being used as the code is being updated.
7929 *
7930 * \@ngModule ReactiveFormsModule
7931 * \@publicApi
7932 */
7933class FormControlName extends NgControl {
7934 /**
7935 * @param {?} parent
7936 * @param {?} validators
7937 * @param {?} asyncValidators
7938 * @param {?} valueAccessors
7939 * @param {?} _ngModelWarningConfig
7940 */
7941 constructor(parent, validators, asyncValidators, valueAccessors, _ngModelWarningConfig) {
7942 super();
7943 this._ngModelWarningConfig = _ngModelWarningConfig;
7944 this._added = false;
7945 /**
7946 * @deprecated as of v6
7947 */
7948 this.update = new EventEmitter();
7949 /**
7950 * \@description
7951 * Instance property used to track whether an ngModel warning has been sent out for this
7952 * particular FormControlName instance. Used to support warning config of "always".
7953 *
7954 * \@internal
7955 */
7956 this._ngModelWarningSent = false;
7957 this._parent = parent;
7958 this._rawValidators = validators || [];
7959 this._rawAsyncValidators = asyncValidators || [];
7960 this.valueAccessor = selectValueAccessor(this, valueAccessors);
7961 }
7962 /**
7963 * \@description
7964 * Triggers a warning that this input should not be used with reactive forms.
7965 * @param {?} isDisabled
7966 * @return {?}
7967 */
7968 set isDisabled(isDisabled) { ReactiveErrors.disabledAttrWarning(); }
7969 /**
7970 * \@description
7971 * A lifecycle method called when the directive's inputs change. For internal use only.
7972 *
7973 * @param {?} changes A object of key/value pairs for the set of changed inputs.
7974 * @return {?}
7975 */
7976 ngOnChanges(changes) {
7977 if (!this._added)
7978 this._setUpControl();
7979 if (isPropertyUpdated(changes, this.viewModel)) {
7980 _ngModelWarning('formControlName', FormControlName, this, this._ngModelWarningConfig);
7981 this.viewModel = this.model;
7982 this.formDirective.updateModel(this, this.model);
7983 }
7984 }
7985 /**
7986 * \@description
7987 * Lifecycle method called before the directive's instance is destroyed. For internal use only.
7988 * @return {?}
7989 */
7990 ngOnDestroy() {
7991 if (this.formDirective) {
7992 this.formDirective.removeControl(this);
7993 }
7994 }
7995 /**
7996 * \@description
7997 * Sets the new value for the view model and emits an `ngModelChange` event.
7998 *
7999 * @param {?} newValue The new value for the view model.
8000 * @return {?}
8001 */
8002 viewToModelUpdate(newValue) {
8003 this.viewModel = newValue;
8004 this.update.emit(newValue);
8005 }
8006 /**
8007 * \@description
8008 * Returns an array that represents the path from the top-level form to this control.
8009 * Each index is the string name of the control on that level.
8010 * @return {?}
8011 */
8012 get path() {
8013 return controlPath(this.name == null ? this.name : this.name.toString(), (/** @type {?} */ (this._parent)));
8014 }
8015 /**
8016 * \@description
8017 * The top-level directive for this group if present, otherwise null.
8018 * @return {?}
8019 */
8020 get formDirective() { return this._parent ? this._parent.formDirective : null; }
8021 /**
8022 * \@description
8023 * Synchronous validator function composed of all the synchronous validators
8024 * registered with this directive.
8025 * @return {?}
8026 */
8027 get validator() { return composeValidators(this._rawValidators); }
8028 /**
8029 * \@description
8030 * Async validator function composed of all the async validators registered with this
8031 * directive.
8032 * @return {?}
8033 */
8034 get asyncValidator() {
8035 return (/** @type {?} */ (composeAsyncValidators(this._rawAsyncValidators)));
8036 }
8037 /**
8038 * @private
8039 * @return {?}
8040 */
8041 _checkParentType() {
8042 if (!(this._parent instanceof FormGroupName) &&
8043 this._parent instanceof AbstractFormGroupDirective) {
8044 ReactiveErrors.ngModelGroupException();
8045 }
8046 else if (!(this._parent instanceof FormGroupName) && !(this._parent instanceof FormGroupDirective) &&
8047 !(this._parent instanceof FormArrayName)) {
8048 ReactiveErrors.controlParentException();
8049 }
8050 }
8051 /**
8052 * @private
8053 * @return {?}
8054 */
8055 _setUpControl() {
8056 this._checkParentType();
8057 ((/** @type {?} */ (this))).control = this.formDirective.addControl(this);
8058 if (this.control.disabled && (/** @type {?} */ (this.valueAccessor)).setDisabledState) {
8059 (/** @type {?} */ ((/** @type {?} */ (this.valueAccessor)).setDisabledState))(true);
8060 }
8061 this._added = true;
8062 }
8063}
8064/**
8065 * \@description
8066 * Static property used to track whether any ngModel warnings have been sent across
8067 * all instances of FormControlName. Used to support warning config of "once".
8068 *
8069 * \@internal
8070 */
8071FormControlName._ngModelWarningSentOnce = false;
8072FormControlName.decorators = [
8073 { type: Directive, args: [{ selector: '[formControlName]', providers: [controlNameBinding] },] }
8074];
8075/** @nocollapse */
8076FormControlName.ctorParameters = () => [
8077 { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf }] },
8078 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] }] },
8079 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] },
8080 { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALUE_ACCESSOR,] }] },
8081 { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [NG_MODEL_WITH_FORM_CONTROL_WARNING,] }] }
8082];
8083FormControlName.propDecorators = {
8084 name: [{ type: Input, args: ['formControlName',] }],
8085 isDisabled: [{ type: Input, args: ['disabled',] }],
8086 model: [{ type: Input, args: ['ngModel',] }],
8087 update: [{ type: Output, args: ['ngModelChange',] }]
8088};
8089if (false) {
8090 /**
8091 * \@description
8092 * Static property used to track whether any ngModel warnings have been sent across
8093 * all instances of FormControlName. Used to support warning config of "once".
8094 *
8095 * \@internal
8096 * @type {?}
8097 */
8098 FormControlName._ngModelWarningSentOnce;
8099 /**
8100 * @type {?}
8101 * @private
8102 */
8103 FormControlName.prototype._added;
8104 /**
8105 * \@description
8106 * Internal reference to the view model value.
8107 * \@internal
8108 * @type {?}
8109 */
8110 FormControlName.prototype.viewModel;
8111 /**
8112 * \@description
8113 * Tracks the `FormControl` instance bound to the directive.
8114 * @type {?}
8115 */
8116 FormControlName.prototype.control;
8117 /**
8118 * \@description
8119 * Tracks the name of the `FormControl` bound to the directive. The name corresponds
8120 * to a key in the parent `FormGroup` or `FormArray`.
8121 * Accepts a name as a string or a number.
8122 * The name in the form of a string is useful for individual forms,
8123 * while the numerical form allows for form controls to be bound
8124 * to indices when iterating over controls in a `FormArray`.
8125 * @type {?}
8126 */
8127 FormControlName.prototype.name;
8128 /**
8129 * @deprecated as of v6
8130 * @type {?}
8131 */
8132 FormControlName.prototype.model;
8133 /**
8134 * @deprecated as of v6
8135 * @type {?}
8136 */
8137 FormControlName.prototype.update;
8138 /**
8139 * \@description
8140 * Instance property used to track whether an ngModel warning has been sent out for this
8141 * particular FormControlName instance. Used to support warning config of "always".
8142 *
8143 * \@internal
8144 * @type {?}
8145 */
8146 FormControlName.prototype._ngModelWarningSent;
8147 /**
8148 * @type {?}
8149 * @private
8150 */
8151 FormControlName.prototype._ngModelWarningConfig;
8152}
8153
8154/**
8155 * @fileoverview added by tsickle
8156 * Generated from: packages/forms/src/directives/validators.ts
8157 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
8158 */
8159/**
8160 * \@description
8161 * An interface implemented by classes that perform synchronous validation.
8162 *
8163 * \@usageNotes
8164 *
8165 * ### Provide a custom validator
8166 *
8167 * The following example implements the `Validator` interface to create a
8168 * validator directive with a custom error key.
8169 *
8170 * ```typescript
8171 * \@Directive({
8172 * selector: '[customValidator]',
8173 * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
8174 * })
8175 * class CustomValidatorDirective implements Validator {
8176 * validate(control: AbstractControl): ValidationErrors|null {
8177 * return {'custom': true};
8178 * }
8179 * }
8180 * ```
8181 *
8182 * \@publicApi
8183 * @record
8184 */
8185function Validator() { }
8186if (false) {
8187 /**
8188 * \@description
8189 * Method that performs synchronous validation against the provided control.
8190 *
8191 * @param {?} control The control to validate against.
8192 *
8193 * @return {?} A map of validation errors if validation fails,
8194 * otherwise null.
8195 */
8196 Validator.prototype.validate = function (control) { };
8197 /**
8198 * \@description
8199 * Registers a callback function to call when the validator inputs change.
8200 *
8201 * @param {?} fn The callback function
8202 * @return {?}
8203 */
8204 Validator.prototype.registerOnValidatorChange = function (fn) { };
8205}
8206/**
8207 * \@description
8208 * An interface implemented by classes that perform asynchronous validation.
8209 *
8210 * \@usageNotes
8211 *
8212 * ### Provide a custom async validator directive
8213 *
8214 * The following example implements the `AsyncValidator` interface to create an
8215 * async validator directive with a custom error key.
8216 *
8217 * ```typescript
8218 * import { of as observableOf } from 'rxjs';
8219 *
8220 * \@Directive({
8221 * selector: '[customAsyncValidator]',
8222 * providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CustomAsyncValidatorDirective, multi:
8223 * true}]
8224 * })
8225 * class CustomAsyncValidatorDirective implements AsyncValidator {
8226 * validate(control: AbstractControl): Observable<ValidationErrors|null> {
8227 * return observableOf({'custom': true});
8228 * }
8229 * }
8230 * ```
8231 *
8232 * \@publicApi
8233 * @record
8234 */
8235function AsyncValidator() { }
8236if (false) {
8237 /**
8238 * \@description
8239 * Method that performs async validation against the provided control.
8240 *
8241 * @param {?} control The control to validate against.
8242 *
8243 * @return {?} A promise or observable that resolves a map of validation errors
8244 * if validation fails, otherwise null.
8245 */
8246 AsyncValidator.prototype.validate = function (control) { };
8247}
8248/**
8249 * \@description
8250 * Provider which adds `RequiredValidator` to the `NG_VALIDATORS` multi-provider list.
8251 * @type {?}
8252 */
8253const REQUIRED_VALIDATOR = {
8254 provide: NG_VALIDATORS,
8255 useExisting: forwardRef((/**
8256 * @return {?}
8257 */
8258 () => RequiredValidator)),
8259 multi: true
8260};
8261/**
8262 * \@description
8263 * Provider which adds `CheckboxRequiredValidator` to the `NG_VALIDATORS` multi-provider list.
8264 * @type {?}
8265 */
8266const CHECKBOX_REQUIRED_VALIDATOR = {
8267 provide: NG_VALIDATORS,
8268 useExisting: forwardRef((/**
8269 * @return {?}
8270 */
8271 () => CheckboxRequiredValidator)),
8272 multi: true
8273};
8274/**
8275 * \@description
8276 * A directive that adds the `required` validator to any controls marked with the
8277 * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
8278 *
8279 * @see [Form Validation](guide/form-validation)
8280 *
8281 * \@usageNotes
8282 *
8283 * ### Adding a required validator using template-driven forms
8284 *
8285 * ```
8286 * <input name="fullName" ngModel required>
8287 * ```
8288 *
8289 * \@ngModule FormsModule
8290 * \@ngModule ReactiveFormsModule
8291 * \@publicApi
8292 */
8293class RequiredValidator {
8294 /**
8295 * \@description
8296 * Tracks changes to the required attribute bound to this directive.
8297 * @return {?}
8298 */
8299 get required() { return this._required; }
8300 /**
8301 * @param {?} value
8302 * @return {?}
8303 */
8304 set required(value) {
8305 this._required = value != null && value !== false && `${value}` !== 'false';
8306 if (this._onChange)
8307 this._onChange();
8308 }
8309 /**
8310 * \@description
8311 * Method that validates whether the control is empty.
8312 * Returns the validation result if enabled, otherwise null.
8313 * @param {?} control
8314 * @return {?}
8315 */
8316 validate(control) {
8317 return this.required ? Validators.required(control) : null;
8318 }
8319 /**
8320 * \@description
8321 * Registers a callback function to call when the validator inputs change.
8322 *
8323 * @param {?} fn The callback function
8324 * @return {?}
8325 */
8326 registerOnValidatorChange(fn) { this._onChange = fn; }
8327}
8328RequiredValidator.decorators = [
8329 { type: Directive, args: [{
8330 selector: ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]',
8331 providers: [REQUIRED_VALIDATOR],
8332 host: { '[attr.required]': 'required ? "" : null' }
8333 },] }
8334];
8335RequiredValidator.propDecorators = {
8336 required: [{ type: Input }]
8337};
8338if (false) {
8339 /**
8340 * @type {?}
8341 * @private
8342 */
8343 RequiredValidator.prototype._required;
8344 /**
8345 * @type {?}
8346 * @private
8347 */
8348 RequiredValidator.prototype._onChange;
8349}
8350/**
8351 * A Directive that adds the `required` validator to checkbox controls marked with the
8352 * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
8353 *
8354 * @see [Form Validation](guide/form-validation)
8355 *
8356 * \@usageNotes
8357 *
8358 * ### Adding a required checkbox validator using template-driven forms
8359 *
8360 * The following example shows how to add a checkbox required validator to an input attached to an ngModel binding.
8361 *
8362 * ```
8363 * <input type="checkbox" name="active" ngModel required>
8364 * ```
8365 *
8366 * \@publicApi
8367 * \@ngModule FormsModule
8368 * \@ngModule ReactiveFormsModule
8369 */
8370class CheckboxRequiredValidator extends RequiredValidator {
8371 /**
8372 * \@description
8373 * Method that validates whether or not the checkbox has been checked.
8374 * Returns the validation result if enabled, otherwise null.
8375 * @param {?} control
8376 * @return {?}
8377 */
8378 validate(control) {
8379 return this.required ? Validators.requiredTrue(control) : null;
8380 }
8381}
8382CheckboxRequiredValidator.decorators = [
8383 { type: Directive, args: [{
8384 selector: 'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]',
8385 providers: [CHECKBOX_REQUIRED_VALIDATOR],
8386 host: { '[attr.required]': 'required ? "" : null' }
8387 },] }
8388];
8389/**
8390 * \@description
8391 * Provider which adds `EmailValidator` to the `NG_VALIDATORS` multi-provider list.
8392 * @type {?}
8393 */
8394const EMAIL_VALIDATOR = {
8395 provide: NG_VALIDATORS,
8396 useExisting: forwardRef((/**
8397 * @return {?}
8398 */
8399 () => EmailValidator)),
8400 multi: true
8401};
8402/**
8403 * A directive that adds the `email` validator to controls marked with the
8404 * `email` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
8405 *
8406 * @see [Form Validation](guide/form-validation)
8407 *
8408 * \@usageNotes
8409 *
8410 * ### Adding an email validator
8411 *
8412 * The following example shows how to add an email validator to an input attached to an ngModel binding.
8413 *
8414 * ```
8415 * <input type="email" name="email" ngModel email>
8416 * <input type="email" name="email" ngModel email="true">
8417 * <input type="email" name="email" ngModel [email]="true">
8418 * ```
8419 *
8420 * \@publicApi
8421 * \@ngModule FormsModule
8422 * \@ngModule ReactiveFormsModule
8423 */
8424class EmailValidator {
8425 /**
8426 * \@description
8427 * Tracks changes to the email attribute bound to this directive.
8428 * @param {?} value
8429 * @return {?}
8430 */
8431 set email(value) {
8432 this._enabled = value === '' || value === true || value === 'true';
8433 if (this._onChange)
8434 this._onChange();
8435 }
8436 /**
8437 * \@description
8438 * Method that validates whether an email address is valid.
8439 * Returns the validation result if enabled, otherwise null.
8440 * @param {?} control
8441 * @return {?}
8442 */
8443 validate(control) {
8444 return this._enabled ? Validators.email(control) : null;
8445 }
8446 /**
8447 * \@description
8448 * Registers a callback function to call when the validator inputs change.
8449 *
8450 * @param {?} fn The callback function
8451 * @return {?}
8452 */
8453 registerOnValidatorChange(fn) { this._onChange = fn; }
8454}
8455EmailValidator.decorators = [
8456 { type: Directive, args: [{
8457 selector: '[email][formControlName],[email][formControl],[email][ngModel]',
8458 providers: [EMAIL_VALIDATOR]
8459 },] }
8460];
8461EmailValidator.propDecorators = {
8462 email: [{ type: Input }]
8463};
8464if (false) {
8465 /**
8466 * @type {?}
8467 * @private
8468 */
8469 EmailValidator.prototype._enabled;
8470 /**
8471 * @type {?}
8472 * @private
8473 */
8474 EmailValidator.prototype._onChange;
8475}
8476/**
8477 * \@description
8478 * A function that receives a control and synchronously returns a map of
8479 * validation errors if present, otherwise null.
8480 *
8481 * \@publicApi
8482 * @record
8483 */
8484function ValidatorFn() { }
8485/**
8486 * \@description
8487 * A function that receives a control and returns a Promise or observable
8488 * that emits validation errors if present, otherwise null.
8489 *
8490 * \@publicApi
8491 * @record
8492 */
8493function AsyncValidatorFn() { }
8494/**
8495 * \@description
8496 * Provider which adds `MinLengthValidator` to the `NG_VALIDATORS` multi-provider list.
8497 * @type {?}
8498 */
8499const MIN_LENGTH_VALIDATOR = {
8500 provide: NG_VALIDATORS,
8501 useExisting: forwardRef((/**
8502 * @return {?}
8503 */
8504 () => MinLengthValidator)),
8505 multi: true
8506};
8507/**
8508 * A directive that adds minimum length validation to controls marked with the
8509 * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
8510 *
8511 * @see [Form Validation](guide/form-validation)
8512 *
8513 * \@usageNotes
8514 *
8515 * ### Adding a minimum length validator
8516 *
8517 * The following example shows how to add a minimum length validator to an input attached to an
8518 * ngModel binding.
8519 *
8520 * ```html
8521 * <input name="firstName" ngModel minlength="4">
8522 * ```
8523 *
8524 * \@ngModule ReactiveFormsModule
8525 * \@ngModule FormsModule
8526 * \@publicApi
8527 */
8528class MinLengthValidator {
8529 /**
8530 * \@description
8531 * A lifecycle method called when the directive's inputs change. For internal use
8532 * only.
8533 *
8534 * @param {?} changes A object of key/value pairs for the set of changed inputs.
8535 * @return {?}
8536 */
8537 ngOnChanges(changes) {
8538 if ('minlength' in changes) {
8539 this._createValidator();
8540 if (this._onChange)
8541 this._onChange();
8542 }
8543 }
8544 /**
8545 * \@description
8546 * Method that validates whether the value meets a minimum length
8547 * requirement. Returns the validation result if enabled, otherwise null.
8548 * @param {?} control
8549 * @return {?}
8550 */
8551 validate(control) {
8552 return this.minlength == null ? null : this._validator(control);
8553 }
8554 /**
8555 * \@description
8556 * Registers a callback function to call when the validator inputs change.
8557 *
8558 * @param {?} fn The callback function
8559 * @return {?}
8560 */
8561 registerOnValidatorChange(fn) { this._onChange = fn; }
8562 /**
8563 * @private
8564 * @return {?}
8565 */
8566 _createValidator() {
8567 this._validator = Validators.minLength(typeof this.minlength === 'number' ? this.minlength : parseInt(this.minlength, 10));
8568 }
8569}
8570MinLengthValidator.decorators = [
8571 { type: Directive, args: [{
8572 selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
8573 providers: [MIN_LENGTH_VALIDATOR],
8574 host: { '[attr.minlength]': 'minlength ? minlength : null' }
8575 },] }
8576];
8577MinLengthValidator.propDecorators = {
8578 minlength: [{ type: Input }]
8579};
8580if (false) {
8581 /**
8582 * @type {?}
8583 * @private
8584 */
8585 MinLengthValidator.prototype._validator;
8586 /**
8587 * @type {?}
8588 * @private
8589 */
8590 MinLengthValidator.prototype._onChange;
8591 /**
8592 * \@description
8593 * Tracks changes to the the minimum length bound to this directive.
8594 * @type {?}
8595 */
8596 MinLengthValidator.prototype.minlength;
8597}
8598/**
8599 * \@description
8600 * Provider which adds `MaxLengthValidator` to the `NG_VALIDATORS` multi-provider list.
8601 * @type {?}
8602 */
8603const MAX_LENGTH_VALIDATOR = {
8604 provide: NG_VALIDATORS,
8605 useExisting: forwardRef((/**
8606 * @return {?}
8607 */
8608 () => MaxLengthValidator)),
8609 multi: true
8610};
8611/**
8612 * A directive that adds max length validation to controls marked with the
8613 * `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
8614 *
8615 * @see [Form Validation](guide/form-validation)
8616 *
8617 * \@usageNotes
8618 *
8619 * ### Adding a maximum length validator
8620 *
8621 * The following example shows how to add a maximum length validator to an input attached to an
8622 * ngModel binding.
8623 *
8624 * ```html
8625 * <input name="firstName" ngModel maxlength="25">
8626 * ```
8627 *
8628 * \@ngModule ReactiveFormsModule
8629 * \@ngModule FormsModule
8630 * \@publicApi
8631 */
8632class MaxLengthValidator {
8633 /**
8634 * \@description
8635 * A lifecycle method called when the directive's inputs change. For internal use
8636 * only.
8637 *
8638 * @param {?} changes A object of key/value pairs for the set of changed inputs.
8639 * @return {?}
8640 */
8641 ngOnChanges(changes) {
8642 if ('maxlength' in changes) {
8643 this._createValidator();
8644 if (this._onChange)
8645 this._onChange();
8646 }
8647 }
8648 /**
8649 * \@description
8650 * Method that validates whether the value exceeds
8651 * the maximum length requirement.
8652 * @param {?} control
8653 * @return {?}
8654 */
8655 validate(control) {
8656 return this.maxlength != null ? this._validator(control) : null;
8657 }
8658 /**
8659 * \@description
8660 * Registers a callback function to call when the validator inputs change.
8661 *
8662 * @param {?} fn The callback function
8663 * @return {?}
8664 */
8665 registerOnValidatorChange(fn) { this._onChange = fn; }
8666 /**
8667 * @private
8668 * @return {?}
8669 */
8670 _createValidator() {
8671 this._validator = Validators.maxLength(typeof this.maxlength === 'number' ? this.maxlength : parseInt(this.maxlength, 10));
8672 }
8673}
8674MaxLengthValidator.decorators = [
8675 { type: Directive, args: [{
8676 selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
8677 providers: [MAX_LENGTH_VALIDATOR],
8678 host: { '[attr.maxlength]': 'maxlength ? maxlength : null' }
8679 },] }
8680];
8681MaxLengthValidator.propDecorators = {
8682 maxlength: [{ type: Input }]
8683};
8684if (false) {
8685 /**
8686 * @type {?}
8687 * @private
8688 */
8689 MaxLengthValidator.prototype._validator;
8690 /**
8691 * @type {?}
8692 * @private
8693 */
8694 MaxLengthValidator.prototype._onChange;
8695 /**
8696 * \@description
8697 * Tracks changes to the the maximum length bound to this directive.
8698 * @type {?}
8699 */
8700 MaxLengthValidator.prototype.maxlength;
8701}
8702/**
8703 * \@description
8704 * Provider which adds `PatternValidator` to the `NG_VALIDATORS` multi-provider list.
8705 * @type {?}
8706 */
8707const PATTERN_VALIDATOR = {
8708 provide: NG_VALIDATORS,
8709 useExisting: forwardRef((/**
8710 * @return {?}
8711 */
8712 () => PatternValidator)),
8713 multi: true
8714};
8715/**
8716 * \@description
8717 * A directive that adds regex pattern validation to controls marked with the
8718 * `pattern` attribute. The regex must match the entire control value.
8719 * The directive is provided with the `NG_VALIDATORS` multi-provider list.
8720 *
8721 * @see [Form Validation](guide/form-validation)
8722 *
8723 * \@usageNotes
8724 *
8725 * ### Adding a pattern validator
8726 *
8727 * The following example shows how to add a pattern validator to an input attached to an
8728 * ngModel binding.
8729 *
8730 * ```html
8731 * <input name="firstName" ngModel pattern="[a-zA-Z ]*">
8732 * ```
8733 *
8734 * \@ngModule ReactiveFormsModule
8735 * \@ngModule FormsModule
8736 * \@publicApi
8737 */
8738class PatternValidator {
8739 /**
8740 * \@description
8741 * A lifecycle method called when the directive's inputs change. For internal use
8742 * only.
8743 *
8744 * @param {?} changes A object of key/value pairs for the set of changed inputs.
8745 * @return {?}
8746 */
8747 ngOnChanges(changes) {
8748 if ('pattern' in changes) {
8749 this._createValidator();
8750 if (this._onChange)
8751 this._onChange();
8752 }
8753 }
8754 /**
8755 * \@description
8756 * Method that validates whether the value matches the
8757 * the pattern requirement.
8758 * @param {?} control
8759 * @return {?}
8760 */
8761 validate(control) { return this._validator(control); }
8762 /**
8763 * \@description
8764 * Registers a callback function to call when the validator inputs change.
8765 *
8766 * @param {?} fn The callback function
8767 * @return {?}
8768 */
8769 registerOnValidatorChange(fn) { this._onChange = fn; }
8770 /**
8771 * @private
8772 * @return {?}
8773 */
8774 _createValidator() { this._validator = Validators.pattern(this.pattern); }
8775}
8776PatternValidator.decorators = [
8777 { type: Directive, args: [{
8778 selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
8779 providers: [PATTERN_VALIDATOR],
8780 host: { '[attr.pattern]': 'pattern ? pattern : null' }
8781 },] }
8782];
8783PatternValidator.propDecorators = {
8784 pattern: [{ type: Input }]
8785};
8786if (false) {
8787 /**
8788 * @type {?}
8789 * @private
8790 */
8791 PatternValidator.prototype._validator;
8792 /**
8793 * @type {?}
8794 * @private
8795 */
8796 PatternValidator.prototype._onChange;
8797 /**
8798 * \@description
8799 * Tracks changes to the pattern bound to this directive.
8800 * @type {?}
8801 */
8802 PatternValidator.prototype.pattern;
8803}
8804
8805/**
8806 * @fileoverview added by tsickle
8807 * Generated from: packages/forms/src/directives.ts
8808 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
8809 */
8810/** @type {?} */
8811const SHARED_FORM_DIRECTIVES = [
8812 ɵNgNoValidate,
8813 NgSelectOption,
8814 ɵNgSelectMultipleOption,
8815 DefaultValueAccessor,
8816 NumberValueAccessor,
8817 RangeValueAccessor,
8818 CheckboxControlValueAccessor,
8819 SelectControlValueAccessor,
8820 SelectMultipleControlValueAccessor,
8821 RadioControlValueAccessor,
8822 NgControlStatus,
8823 NgControlStatusGroup,
8824 RequiredValidator,
8825 MinLengthValidator,
8826 MaxLengthValidator,
8827 PatternValidator,
8828 CheckboxRequiredValidator,
8829 EmailValidator,
8830];
8831/** @type {?} */
8832const TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm];
8833/** @type {?} */
8834const REACTIVE_DRIVEN_DIRECTIVES = [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];
8835/**
8836 * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
8837 */
8838class ɵInternalFormsSharedModule {
8839}
8840ɵInternalFormsSharedModule.decorators = [
8841 { type: NgModule, args: [{
8842 declarations: SHARED_FORM_DIRECTIVES,
8843 exports: SHARED_FORM_DIRECTIVES,
8844 },] }
8845];
8846
8847/**
8848 * @fileoverview added by tsickle
8849 * Generated from: packages/forms/src/form_builder.ts
8850 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
8851 */
8852/**
8853 * @param {?} options
8854 * @return {?}
8855 */
8856function isAbstractControlOptions(options) {
8857 return ((/** @type {?} */ (options))).asyncValidators !== undefined ||
8858 ((/** @type {?} */ (options))).validators !== undefined ||
8859 ((/** @type {?} */ (options))).updateOn !== undefined;
8860}
8861/**
8862 * \@description
8863 * Creates an `AbstractControl` from a user-specified configuration.
8864 *
8865 * The `FormBuilder` provides syntactic sugar that shortens creating instances of a `FormControl`,
8866 * `FormGroup`, or `FormArray`. It reduces the amount of boilerplate needed to build complex
8867 * forms.
8868 *
8869 * @see [Reactive Forms Guide](/guide/reactive-forms)
8870 *
8871 * \@publicApi
8872 */
8873class FormBuilder {
8874 /**
8875 * \@description
8876 * Construct a new `FormGroup` instance.
8877 *
8878 * @param {?} controlsConfig A collection of child controls. The key for each child is the name
8879 * under which it is registered.
8880 *
8881 * @param {?=} options Configuration options object for the `FormGroup`. The object can
8882 * have two shapes:
8883 *
8884 * 1) `AbstractControlOptions` object (preferred), which consists of:
8885 * * `validators`: A synchronous validator function, or an array of validator functions
8886 * * `asyncValidators`: A single async validator or array of async validator functions
8887 * * `updateOn`: The event upon which the control should be updated (options: 'change' | 'blur' |
8888 * submit')
8889 *
8890 * 2) Legacy configuration object, which consists of:
8891 * * `validator`: A synchronous validator function, or an array of validator functions
8892 * * `asyncValidator`: A single async validator or array of async validator functions
8893 *
8894 * @return {?}
8895 */
8896 group(controlsConfig, options = null) {
8897 /** @type {?} */
8898 const controls = this._reduceControls(controlsConfig);
8899 /** @type {?} */
8900 let validators = null;
8901 /** @type {?} */
8902 let asyncValidators = null;
8903 /** @type {?} */
8904 let updateOn = undefined;
8905 if (options != null) {
8906 if (isAbstractControlOptions(options)) {
8907 // `options` are `AbstractControlOptions`
8908 validators = options.validators != null ? options.validators : null;
8909 asyncValidators = options.asyncValidators != null ? options.asyncValidators : null;
8910 updateOn = options.updateOn != null ? options.updateOn : undefined;
8911 }
8912 else {
8913 // `options` are legacy form group options
8914 validators = options['validator'] != null ? options['validator'] : null;
8915 asyncValidators = options['asyncValidator'] != null ? options['asyncValidator'] : null;
8916 }
8917 }
8918 return new FormGroup(controls, { asyncValidators, updateOn, validators });
8919 }
8920 /**
8921 * \@description
8922 * Construct a new `FormControl` with the given state, validators and options.
8923 *
8924 * \@usageNotes
8925 *
8926 * ### Initialize a control as disabled
8927 *
8928 * The following example returns a control with an initial value in a disabled state.
8929 *
8930 * <code-example path="forms/ts/formBuilder/form_builder_example.ts" region="disabled-control">
8931 * </code-example>
8932 * @param {?} formState Initializes the control with an initial state value, or
8933 * with an object that contains both a value and a disabled status.
8934 *
8935 * @param {?=} validatorOrOpts A synchronous validator function, or an array of
8936 * such functions, or an `AbstractControlOptions` object that contains
8937 * validation functions and a validation trigger.
8938 *
8939 * @param {?=} asyncValidator A single async validator or array of async validator
8940 * functions.
8941 *
8942 * @return {?}
8943 */
8944 control(formState, validatorOrOpts, asyncValidator) {
8945 return new FormControl(formState, validatorOrOpts, asyncValidator);
8946 }
8947 /**
8948 * Constructs a new `FormArray` from the given array of configurations,
8949 * validators and options.
8950 *
8951 * @param {?} controlsConfig An array of child controls or control configs. Each
8952 * child control is given an index when it is registered.
8953 *
8954 * @param {?=} validatorOrOpts A synchronous validator function, or an array of
8955 * such functions, or an `AbstractControlOptions` object that contains
8956 * validation functions and a validation trigger.
8957 *
8958 * @param {?=} asyncValidator A single async validator or array of async validator
8959 * functions.
8960 * @return {?}
8961 */
8962 array(controlsConfig, validatorOrOpts, asyncValidator) {
8963 /** @type {?} */
8964 const controls = controlsConfig.map((/**
8965 * @param {?} c
8966 * @return {?}
8967 */
8968 c => this._createControl(c)));
8969 return new FormArray(controls, validatorOrOpts, asyncValidator);
8970 }
8971 /**
8972 * \@internal
8973 * @param {?} controlsConfig
8974 * @return {?}
8975 */
8976 _reduceControls(controlsConfig) {
8977 /** @type {?} */
8978 const controls = {};
8979 Object.keys(controlsConfig).forEach((/**
8980 * @param {?} controlName
8981 * @return {?}
8982 */
8983 controlName => {
8984 controls[controlName] = this._createControl(controlsConfig[controlName]);
8985 }));
8986 return controls;
8987 }
8988 /**
8989 * \@internal
8990 * @param {?} controlConfig
8991 * @return {?}
8992 */
8993 _createControl(controlConfig) {
8994 if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
8995 controlConfig instanceof FormArray) {
8996 return controlConfig;
8997 }
8998 else if (Array.isArray(controlConfig)) {
8999 /** @type {?} */
9000 const value = controlConfig[0];
9001 /** @type {?} */
9002 const validator = controlConfig.length > 1 ? controlConfig[1] : null;
9003 /** @type {?} */
9004 const asyncValidator = controlConfig.length > 2 ? controlConfig[2] : null;
9005 return this.control(value, validator, asyncValidator);
9006 }
9007 else {
9008 return this.control(controlConfig);
9009 }
9010 }
9011}
9012FormBuilder.decorators = [
9013 { type: Injectable }
9014];
9015
9016/**
9017 * @fileoverview added by tsickle
9018 * Generated from: packages/forms/src/version.ts
9019 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9020 */
9021/**
9022 * \@publicApi
9023 * @type {?}
9024 */
9025const VERSION = new Version('9.0.3');
9026
9027/**
9028 * @fileoverview added by tsickle
9029 * Generated from: packages/forms/src/form_providers.ts
9030 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9031 */
9032/**
9033 * Exports the required providers and directives for template-driven forms,
9034 * making them available for import by NgModules that import this module.
9035 *
9036 * @see [Forms Guide](/guide/forms)
9037 *
9038 * \@publicApi
9039 */
9040class FormsModule {
9041}
9042FormsModule.decorators = [
9043 { type: NgModule, args: [{
9044 declarations: TEMPLATE_DRIVEN_DIRECTIVES,
9045 providers: [RadioControlRegistry],
9046 exports: [ɵInternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
9047 },] }
9048];
9049/**
9050 * Exports the required infrastructure and directives for reactive forms,
9051 * making them available for import by NgModules that import this module.
9052 * @see [Forms](guide/reactive-forms)
9053 *
9054 * @see [Reactive Forms Guide](/guide/reactive-forms)
9055 *
9056 * \@publicApi
9057 */
9058class ReactiveFormsModule {
9059 /**
9060 * \@description
9061 * Provides options for configuring the reactive forms module.
9062 *
9063 * @param {?} opts An object of configuration options
9064 * * `warnOnNgModelWithFormControl` Configures when to emit a warning when an `ngModel`
9065 * binding is used with reactive form directives.
9066 * @return {?}
9067 */
9068 static withConfig(opts) {
9069 return {
9070 ngModule: ReactiveFormsModule,
9071 providers: [{
9072 provide: NG_MODEL_WITH_FORM_CONTROL_WARNING,
9073 useValue: opts.warnOnNgModelWithFormControl
9074 }]
9075 };
9076 }
9077}
9078ReactiveFormsModule.decorators = [
9079 { type: NgModule, args: [{
9080 declarations: [REACTIVE_DRIVEN_DIRECTIVES],
9081 providers: [FormBuilder, RadioControlRegistry],
9082 exports: [ɵInternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]
9083 },] }
9084];
9085
9086/**
9087 * @fileoverview added by tsickle
9088 * Generated from: packages/forms/src/forms.ts
9089 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9090 */
9091
9092/**
9093 * @fileoverview added by tsickle
9094 * Generated from: packages/forms/public_api.ts
9095 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9096 */
9097
9098/**
9099 * @fileoverview added by tsickle
9100 * Generated from: packages/forms/index.ts
9101 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9102 */
9103
9104/**
9105 * Generated bundle index. Do not edit.
9106 */
9107
9108export { AbstractControl, AbstractControlDirective, AbstractFormGroupDirective, COMPOSITION_BUFFER_MODE, CheckboxControlValueAccessor, CheckboxRequiredValidator, ControlContainer, DefaultValueAccessor, EmailValidator, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormsModule, MaxLengthValidator, MinLengthValidator, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgControlStatus, NgControlStatusGroup, NgForm, NgModel, NgModelGroup, NgSelectOption, NumberValueAccessor, PatternValidator, RadioControlValueAccessor, RangeValueAccessor, ReactiveFormsModule, RequiredValidator, SelectControlValueAccessor, SelectMultipleControlValueAccessor, VERSION, Validators, ɵInternalFormsSharedModule, ɵNgNoValidate, ɵNgSelectMultipleOption, SHARED_FORM_DIRECTIVES as ɵangular_packages_forms_forms_a, TEMPLATE_DRIVEN_DIRECTIVES as ɵangular_packages_forms_forms_b, CHECKBOX_REQUIRED_VALIDATOR as ɵangular_packages_forms_forms_ba, EMAIL_VALIDATOR as ɵangular_packages_forms_forms_bb, MIN_LENGTH_VALIDATOR as ɵangular_packages_forms_forms_bc, MAX_LENGTH_VALIDATOR as ɵangular_packages_forms_forms_bd, PATTERN_VALIDATOR as ɵangular_packages_forms_forms_be, REACTIVE_DRIVEN_DIRECTIVES as ɵangular_packages_forms_forms_c, ɵInternalFormsSharedModule as ɵangular_packages_forms_forms_d, CHECKBOX_VALUE_ACCESSOR as ɵangular_packages_forms_forms_e, DEFAULT_VALUE_ACCESSOR as ɵangular_packages_forms_forms_f, AbstractControlStatus as ɵangular_packages_forms_forms_g, ngControlStatusHost as ɵangular_packages_forms_forms_h, formDirectiveProvider as ɵangular_packages_forms_forms_i, formControlBinding as ɵangular_packages_forms_forms_j, modelGroupProvider as ɵangular_packages_forms_forms_k, NUMBER_VALUE_ACCESSOR as ɵangular_packages_forms_forms_l, RADIO_VALUE_ACCESSOR as ɵangular_packages_forms_forms_m, RadioControlRegistry as ɵangular_packages_forms_forms_n, RANGE_VALUE_ACCESSOR as ɵangular_packages_forms_forms_o, NG_MODEL_WITH_FORM_CONTROL_WARNING as ɵangular_packages_forms_forms_p, formControlBinding$1 as ɵangular_packages_forms_forms_q, controlNameBinding as ɵangular_packages_forms_forms_r, formDirectiveProvider$1 as ɵangular_packages_forms_forms_s, formGroupNameProvider as ɵangular_packages_forms_forms_t, formArrayNameProvider as ɵangular_packages_forms_forms_u, SELECT_VALUE_ACCESSOR as ɵangular_packages_forms_forms_v, SELECT_MULTIPLE_VALUE_ACCESSOR as ɵangular_packages_forms_forms_w, ɵNgSelectMultipleOption as ɵangular_packages_forms_forms_x, ɵNgNoValidate as ɵangular_packages_forms_forms_y, REQUIRED_VALIDATOR as ɵangular_packages_forms_forms_z };
9109//# sourceMappingURL=forms.js.map