1 | /**
|
---|
2 | * @license Angular v12.2.13
|
---|
3 | * (c) 2010-2021 Google LLC. https://angular.io/
|
---|
4 | * License: MIT
|
---|
5 | */
|
---|
6 |
|
---|
7 | import { AfterViewInit } from '@angular/core';
|
---|
8 | import { ElementRef } from '@angular/core';
|
---|
9 | import { EventEmitter } from '@angular/core';
|
---|
10 | import { InjectionToken } from '@angular/core';
|
---|
11 | import { Injector } from '@angular/core';
|
---|
12 | import { ModuleWithProviders } from '@angular/core';
|
---|
13 | import { Observable } from 'rxjs';
|
---|
14 | import { OnChanges } from '@angular/core';
|
---|
15 | import { OnDestroy } from '@angular/core';
|
---|
16 | import { OnInit } from '@angular/core';
|
---|
17 | import { Renderer2 } from '@angular/core';
|
---|
18 | import { SimpleChanges } from '@angular/core';
|
---|
19 | import { StaticProvider } from '@angular/core';
|
---|
20 | import { Type } from '@angular/core';
|
---|
21 | import { Version } from '@angular/core';
|
---|
22 |
|
---|
23 | /**
|
---|
24 | * This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
|
---|
25 | *
|
---|
26 | * It provides some of the shared behavior that all controls and groups of controls have, like
|
---|
27 | * running validators, calculating status, and resetting state. It also defines the properties
|
---|
28 | * that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
|
---|
29 | * instantiated directly.
|
---|
30 | *
|
---|
31 | * @see [Forms Guide](/guide/forms)
|
---|
32 | * @see [Reactive Forms Guide](/guide/reactive-forms)
|
---|
33 | * @see [Dynamic Forms Guide](/guide/dynamic-form)
|
---|
34 | *
|
---|
35 | * @publicApi
|
---|
36 | */
|
---|
37 | export declare abstract class AbstractControl {
|
---|
38 | private _parent;
|
---|
39 | private _asyncValidationSubscription;
|
---|
40 | /**
|
---|
41 | * The current value of the control.
|
---|
42 | *
|
---|
43 | * * For a `FormControl`, the current value.
|
---|
44 | * * For an enabled `FormGroup`, the values of enabled controls as an object
|
---|
45 | * with a key-value pair for each member of the group.
|
---|
46 | * * For a disabled `FormGroup`, the values of all controls as an object
|
---|
47 | * with a key-value pair for each member of the group.
|
---|
48 | * * For a `FormArray`, the values of enabled controls as an array.
|
---|
49 | *
|
---|
50 | */
|
---|
51 | readonly value: any;
|
---|
52 | /**
|
---|
53 | * Initialize the AbstractControl instance.
|
---|
54 | *
|
---|
55 | * @param validators The function or array of functions that is used to determine the validity of
|
---|
56 | * this control synchronously.
|
---|
57 | * @param asyncValidators The function or array of functions that is used to determine validity of
|
---|
58 | * this control asynchronously.
|
---|
59 | */
|
---|
60 | constructor(validators: ValidatorFn | ValidatorFn[] | null, asyncValidators: AsyncValidatorFn | AsyncValidatorFn[] | null);
|
---|
61 | /**
|
---|
62 | * Returns the function that is used to determine the validity of this control synchronously.
|
---|
63 | * If multiple validators have been added, this will be a single composed function.
|
---|
64 | * See `Validators.compose()` for additional information.
|
---|
65 | */
|
---|
66 | get validator(): ValidatorFn | null;
|
---|
67 | set validator(validatorFn: ValidatorFn | null);
|
---|
68 | /**
|
---|
69 | * Returns the function that is used to determine the validity of this control asynchronously.
|
---|
70 | * If multiple validators have been added, this will be a single composed function.
|
---|
71 | * See `Validators.compose()` for additional information.
|
---|
72 | */
|
---|
73 | get asyncValidator(): AsyncValidatorFn | null;
|
---|
74 | set asyncValidator(asyncValidatorFn: AsyncValidatorFn | null);
|
---|
75 | /**
|
---|
76 | * The parent control.
|
---|
77 | */
|
---|
78 | get parent(): FormGroup | FormArray | null;
|
---|
79 | /**
|
---|
80 | * The validation status of the control. There are four possible
|
---|
81 | * validation status values:
|
---|
82 | *
|
---|
83 | * * **VALID**: This control has passed all validation checks.
|
---|
84 | * * **INVALID**: This control has failed at least one validation check.
|
---|
85 | * * **PENDING**: This control is in the midst of conducting a validation check.
|
---|
86 | * * **DISABLED**: This control is exempt from validation checks.
|
---|
87 | *
|
---|
88 | * These status values are mutually exclusive, so a control cannot be
|
---|
89 | * both valid AND invalid or invalid AND disabled.
|
---|
90 | */
|
---|
91 | readonly status: string;
|
---|
92 | /**
|
---|
93 | * A control is `valid` when its `status` is `VALID`.
|
---|
94 | *
|
---|
95 | * @see {@link AbstractControl.status}
|
---|
96 | *
|
---|
97 | * @returns True if the control has passed all of its validation tests,
|
---|
98 | * false otherwise.
|
---|
99 | */
|
---|
100 | get valid(): boolean;
|
---|
101 | /**
|
---|
102 | * A control is `invalid` when its `status` is `INVALID`.
|
---|
103 | *
|
---|
104 | * @see {@link AbstractControl.status}
|
---|
105 | *
|
---|
106 | * @returns True if this control has failed one or more of its validation checks,
|
---|
107 | * false otherwise.
|
---|
108 | */
|
---|
109 | get invalid(): boolean;
|
---|
110 | /**
|
---|
111 | * A control is `pending` when its `status` is `PENDING`.
|
---|
112 | *
|
---|
113 | * @see {@link AbstractControl.status}
|
---|
114 | *
|
---|
115 | * @returns True if this control is in the process of conducting a validation check,
|
---|
116 | * false otherwise.
|
---|
117 | */
|
---|
118 | get pending(): boolean;
|
---|
119 | /**
|
---|
120 | * A control is `disabled` when its `status` is `DISABLED`.
|
---|
121 | *
|
---|
122 | * Disabled controls are exempt from validation checks and
|
---|
123 | * are not included in the aggregate value of their ancestor
|
---|
124 | * controls.
|
---|
125 | *
|
---|
126 | * @see {@link AbstractControl.status}
|
---|
127 | *
|
---|
128 | * @returns True if the control is disabled, false otherwise.
|
---|
129 | */
|
---|
130 | get disabled(): boolean;
|
---|
131 | /**
|
---|
132 | * A control is `enabled` as long as its `status` is not `DISABLED`.
|
---|
133 | *
|
---|
134 | * @returns True if the control has any status other than 'DISABLED',
|
---|
135 | * false if the status is 'DISABLED'.
|
---|
136 | *
|
---|
137 | * @see {@link AbstractControl.status}
|
---|
138 | *
|
---|
139 | */
|
---|
140 | get enabled(): boolean;
|
---|
141 | /**
|
---|
142 | * An object containing any errors generated by failing validation,
|
---|
143 | * or null if there are no errors.
|
---|
144 | */
|
---|
145 | readonly errors: ValidationErrors | null;
|
---|
146 | /**
|
---|
147 | * A control is `pristine` if the user has not yet changed
|
---|
148 | * the value in the UI.
|
---|
149 | *
|
---|
150 | * @returns True if the user has not yet changed the value in the UI; compare `dirty`.
|
---|
151 | * Programmatic changes to a control's value do not mark it dirty.
|
---|
152 | */
|
---|
153 | readonly pristine: boolean;
|
---|
154 | /**
|
---|
155 | * A control is `dirty` if the user has changed the value
|
---|
156 | * in the UI.
|
---|
157 | *
|
---|
158 | * @returns True if the user has changed the value of this control in the UI; compare `pristine`.
|
---|
159 | * Programmatic changes to a control's value do not mark it dirty.
|
---|
160 | */
|
---|
161 | get dirty(): boolean;
|
---|
162 | /**
|
---|
163 | * True if the control is marked as `touched`.
|
---|
164 | *
|
---|
165 | * A control is marked `touched` once the user has triggered
|
---|
166 | * a `blur` event on it.
|
---|
167 | */
|
---|
168 | readonly touched: boolean;
|
---|
169 | /**
|
---|
170 | * True if the control has not been marked as touched
|
---|
171 | *
|
---|
172 | * A control is `untouched` if the user has not yet triggered
|
---|
173 | * a `blur` event on it.
|
---|
174 | */
|
---|
175 | get untouched(): boolean;
|
---|
176 | /**
|
---|
177 | * A multicasting observable that emits an event every time the value of the control changes, in
|
---|
178 | * the UI or programmatically. It also emits an event each time you call enable() or disable()
|
---|
179 | * without passing along {emitEvent: false} as a function argument.
|
---|
180 | */
|
---|
181 | readonly valueChanges: Observable<any>;
|
---|
182 | /**
|
---|
183 | * A multicasting observable that emits an event every time the validation `status` of the control
|
---|
184 | * recalculates.
|
---|
185 | *
|
---|
186 | * @see {@link AbstractControl.status}
|
---|
187 | *
|
---|
188 | */
|
---|
189 | readonly statusChanges: Observable<any>;
|
---|
190 | /**
|
---|
191 | * Reports the update strategy of the `AbstractControl` (meaning
|
---|
192 | * the event on which the control updates itself).
|
---|
193 | * Possible values: `'change'` | `'blur'` | `'submit'`
|
---|
194 | * Default value: `'change'`
|
---|
195 | */
|
---|
196 | get updateOn(): FormHooks;
|
---|
197 | /**
|
---|
198 | * Sets the synchronous validators that are active on this control. Calling
|
---|
199 | * this overwrites any existing synchronous validators.
|
---|
200 | *
|
---|
201 | * When you add or remove a validator at run time, you must call
|
---|
202 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
203 | *
|
---|
204 | * If you want to add a new validator without affecting existing ones, consider
|
---|
205 | * using `addValidators()` method instead.
|
---|
206 | */
|
---|
207 | setValidators(validators: ValidatorFn | ValidatorFn[] | null): void;
|
---|
208 | /**
|
---|
209 | * Sets the asynchronous validators that are active on this control. Calling this
|
---|
210 | * overwrites any existing asynchronous validators.
|
---|
211 | *
|
---|
212 | * When you add or remove a validator at run time, you must call
|
---|
213 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
214 | *
|
---|
215 | * If you want to add a new validator without affecting existing ones, consider
|
---|
216 | * using `addAsyncValidators()` method instead.
|
---|
217 | */
|
---|
218 | setAsyncValidators(validators: AsyncValidatorFn | AsyncValidatorFn[] | null): void;
|
---|
219 | /**
|
---|
220 | * Add a synchronous validator or validators to this control, without affecting other validators.
|
---|
221 | *
|
---|
222 | * When you add or remove a validator at run time, you must call
|
---|
223 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
224 | *
|
---|
225 | * Adding a validator that already exists will have no effect. If duplicate validator functions
|
---|
226 | * are present in the `validators` array, only the first instance would be added to a form
|
---|
227 | * control.
|
---|
228 | *
|
---|
229 | * @param validators The new validator function or functions to add to this control.
|
---|
230 | */
|
---|
231 | addValidators(validators: ValidatorFn | ValidatorFn[]): void;
|
---|
232 | /**
|
---|
233 | * Add an asynchronous validator or validators to this control, without affecting other
|
---|
234 | * validators.
|
---|
235 | *
|
---|
236 | * When you add or remove a validator at run time, you must call
|
---|
237 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
238 | *
|
---|
239 | * Adding a validator that already exists will have no effect.
|
---|
240 | *
|
---|
241 | * @param validators The new asynchronous validator function or functions to add to this control.
|
---|
242 | */
|
---|
243 | addAsyncValidators(validators: AsyncValidatorFn | AsyncValidatorFn[]): void;
|
---|
244 | /**
|
---|
245 | * Remove a synchronous validator from this control, without affecting other validators.
|
---|
246 | * Validators are compared by function reference; you must pass a reference to the exact same
|
---|
247 | * validator function as the one that was originally set. If a provided validator is not found,
|
---|
248 | * it is ignored.
|
---|
249 | *
|
---|
250 | * When you add or remove a validator at run time, you must call
|
---|
251 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
252 | *
|
---|
253 | * @param validators The validator or validators to remove.
|
---|
254 | */
|
---|
255 | removeValidators(validators: ValidatorFn | ValidatorFn[]): void;
|
---|
256 | /**
|
---|
257 | * Remove an asynchronous validator from this control, without affecting other validators.
|
---|
258 | * Validators are compared by function reference; you must pass a reference to the exact same
|
---|
259 | * validator function as the one that was originally set. If a provided validator is not found, it
|
---|
260 | * is ignored.
|
---|
261 | *
|
---|
262 | * When you add or remove a validator at run time, you must call
|
---|
263 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
264 | *
|
---|
265 | * @param validators The asynchronous validator or validators to remove.
|
---|
266 | */
|
---|
267 | removeAsyncValidators(validators: AsyncValidatorFn | AsyncValidatorFn[]): void;
|
---|
268 | /**
|
---|
269 | * Check whether a synchronous validator function is present on this control. The provided
|
---|
270 | * validator must be a reference to the exact same function that was provided.
|
---|
271 | *
|
---|
272 | * @param validator The validator to check for presence. Compared by function reference.
|
---|
273 | * @returns Whether the provided validator was found on this control.
|
---|
274 | */
|
---|
275 | hasValidator(validator: ValidatorFn): boolean;
|
---|
276 | /**
|
---|
277 | * Check whether an asynchronous validator function is present on this control. The provided
|
---|
278 | * validator must be a reference to the exact same function that was provided.
|
---|
279 | *
|
---|
280 | * @param validator The asynchronous validator to check for presence. Compared by function
|
---|
281 | * reference.
|
---|
282 | * @returns Whether the provided asynchronous validator was found on this control.
|
---|
283 | */
|
---|
284 | hasAsyncValidator(validator: AsyncValidatorFn): boolean;
|
---|
285 | /**
|
---|
286 | * Empties out the synchronous validator list.
|
---|
287 | *
|
---|
288 | * When you add or remove a validator at run time, you must call
|
---|
289 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
290 | *
|
---|
291 | */
|
---|
292 | clearValidators(): void;
|
---|
293 | /**
|
---|
294 | * Empties out the async validator list.
|
---|
295 | *
|
---|
296 | * When you add or remove a validator at run time, you must call
|
---|
297 | * `updateValueAndValidity()` for the new validation to take effect.
|
---|
298 | *
|
---|
299 | */
|
---|
300 | clearAsyncValidators(): void;
|
---|
301 | /**
|
---|
302 | * Marks the control as `touched`. A control is touched by focus and
|
---|
303 | * blur events that do not change the value.
|
---|
304 | *
|
---|
305 | * @see `markAsUntouched()`
|
---|
306 | * @see `markAsDirty()`
|
---|
307 | * @see `markAsPristine()`
|
---|
308 | *
|
---|
309 | * @param opts Configuration options that determine how the control propagates changes
|
---|
310 | * and emits events after marking is applied.
|
---|
311 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
312 | * marks all direct ancestors. Default is false.
|
---|
313 | */
|
---|
314 | markAsTouched(opts?: {
|
---|
315 | onlySelf?: boolean;
|
---|
316 | }): void;
|
---|
317 | /**
|
---|
318 | * Marks the control and all its descendant controls as `touched`.
|
---|
319 | * @see `markAsTouched()`
|
---|
320 | */
|
---|
321 | markAllAsTouched(): void;
|
---|
322 | /**
|
---|
323 | * Marks the control as `untouched`.
|
---|
324 | *
|
---|
325 | * If the control has any children, also marks all children as `untouched`
|
---|
326 | * and recalculates the `touched` status of all parent controls.
|
---|
327 | *
|
---|
328 | * @see `markAsTouched()`
|
---|
329 | * @see `markAsDirty()`
|
---|
330 | * @see `markAsPristine()`
|
---|
331 | *
|
---|
332 | * @param opts Configuration options that determine how the control propagates changes
|
---|
333 | * and emits events after the marking is applied.
|
---|
334 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
335 | * marks all direct ancestors. Default is false.
|
---|
336 | */
|
---|
337 | markAsUntouched(opts?: {
|
---|
338 | onlySelf?: boolean;
|
---|
339 | }): void;
|
---|
340 | /**
|
---|
341 | * Marks the control as `dirty`. A control becomes dirty when
|
---|
342 | * the control's value is changed through the UI; compare `markAsTouched`.
|
---|
343 | *
|
---|
344 | * @see `markAsTouched()`
|
---|
345 | * @see `markAsUntouched()`
|
---|
346 | * @see `markAsPristine()`
|
---|
347 | *
|
---|
348 | * @param opts Configuration options that determine how the control propagates changes
|
---|
349 | * and emits events after marking is applied.
|
---|
350 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
351 | * marks all direct ancestors. Default is false.
|
---|
352 | */
|
---|
353 | markAsDirty(opts?: {
|
---|
354 | onlySelf?: boolean;
|
---|
355 | }): void;
|
---|
356 | /**
|
---|
357 | * Marks the control as `pristine`.
|
---|
358 | *
|
---|
359 | * If the control has any children, marks all children as `pristine`,
|
---|
360 | * and recalculates the `pristine` status of all parent
|
---|
361 | * controls.
|
---|
362 | *
|
---|
363 | * @see `markAsTouched()`
|
---|
364 | * @see `markAsUntouched()`
|
---|
365 | * @see `markAsDirty()`
|
---|
366 | *
|
---|
367 | * @param opts Configuration options that determine how the control emits events after
|
---|
368 | * marking is applied.
|
---|
369 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
370 | * marks all direct ancestors. Default is false.
|
---|
371 | */
|
---|
372 | markAsPristine(opts?: {
|
---|
373 | onlySelf?: boolean;
|
---|
374 | }): void;
|
---|
375 | /**
|
---|
376 | * Marks the control as `pending`.
|
---|
377 | *
|
---|
378 | * A control is pending while the control performs async validation.
|
---|
379 | *
|
---|
380 | * @see {@link AbstractControl.status}
|
---|
381 | *
|
---|
382 | * @param opts Configuration options that determine how the control propagates changes and
|
---|
383 | * emits events after marking is applied.
|
---|
384 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
385 | * marks all direct ancestors. Default is false.
|
---|
386 | * * `emitEvent`: When true or not supplied (the default), the `statusChanges`
|
---|
387 | * observable emits an event with the latest status the control is marked pending.
|
---|
388 | * When false, no events are emitted.
|
---|
389 | *
|
---|
390 | */
|
---|
391 | markAsPending(opts?: {
|
---|
392 | onlySelf?: boolean;
|
---|
393 | emitEvent?: boolean;
|
---|
394 | }): void;
|
---|
395 | /**
|
---|
396 | * Disables the control. This means the control is exempt from validation checks and
|
---|
397 | * excluded from the aggregate value of any parent. Its status is `DISABLED`.
|
---|
398 | *
|
---|
399 | * If the control has children, all children are also disabled.
|
---|
400 | *
|
---|
401 | * @see {@link AbstractControl.status}
|
---|
402 | *
|
---|
403 | * @param opts Configuration options that determine how the control propagates
|
---|
404 | * changes and emits events after the control is disabled.
|
---|
405 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
406 | * marks all direct ancestors. Default is false.
|
---|
407 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
408 | * `valueChanges`
|
---|
409 | * observables emit events with the latest status and value when the control is disabled.
|
---|
410 | * When false, no events are emitted.
|
---|
411 | */
|
---|
412 | disable(opts?: {
|
---|
413 | onlySelf?: boolean;
|
---|
414 | emitEvent?: boolean;
|
---|
415 | }): void;
|
---|
416 | /**
|
---|
417 | * Enables the control. This means the control is included in validation checks and
|
---|
418 | * the aggregate value of its parent. Its status recalculates based on its value and
|
---|
419 | * its validators.
|
---|
420 | *
|
---|
421 | * By default, if the control has children, all children are enabled.
|
---|
422 | *
|
---|
423 | * @see {@link AbstractControl.status}
|
---|
424 | *
|
---|
425 | * @param opts Configure options that control how the control propagates changes and
|
---|
426 | * emits events when marked as untouched
|
---|
427 | * * `onlySelf`: When true, mark only this control. When false or not supplied,
|
---|
428 | * marks all direct ancestors. Default is false.
|
---|
429 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
430 | * `valueChanges`
|
---|
431 | * observables emit events with the latest status and value when the control is enabled.
|
---|
432 | * When false, no events are emitted.
|
---|
433 | */
|
---|
434 | enable(opts?: {
|
---|
435 | onlySelf?: boolean;
|
---|
436 | emitEvent?: boolean;
|
---|
437 | }): void;
|
---|
438 | private _updateAncestors;
|
---|
439 | /**
|
---|
440 | * @param parent Sets the parent of the control
|
---|
441 | */
|
---|
442 | setParent(parent: FormGroup | FormArray): void;
|
---|
443 | /**
|
---|
444 | * Sets the value of the control. Abstract method (implemented in sub-classes).
|
---|
445 | */
|
---|
446 | abstract setValue(value: any, options?: Object): void;
|
---|
447 | /**
|
---|
448 | * Patches the value of the control. Abstract method (implemented in sub-classes).
|
---|
449 | */
|
---|
450 | abstract patchValue(value: any, options?: Object): void;
|
---|
451 | /**
|
---|
452 | * Resets the control. Abstract method (implemented in sub-classes).
|
---|
453 | */
|
---|
454 | abstract reset(value?: any, options?: Object): void;
|
---|
455 | /**
|
---|
456 | * Recalculates the value and validation status of the control.
|
---|
457 | *
|
---|
458 | * By default, it also updates the value and validity of its ancestors.
|
---|
459 | *
|
---|
460 | * @param opts Configuration options determine how the control propagates changes and emits events
|
---|
461 | * after updates and validity checks are applied.
|
---|
462 | * * `onlySelf`: When true, only update this control. When false or not supplied,
|
---|
463 | * update all direct ancestors. Default is false.
|
---|
464 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
465 | * `valueChanges`
|
---|
466 | * observables emit events with the latest status and value when the control is updated.
|
---|
467 | * When false, no events are emitted.
|
---|
468 | */
|
---|
469 | updateValueAndValidity(opts?: {
|
---|
470 | onlySelf?: boolean;
|
---|
471 | emitEvent?: boolean;
|
---|
472 | }): void;
|
---|
473 | private _setInitialStatus;
|
---|
474 | private _runValidator;
|
---|
475 | private _runAsyncValidator;
|
---|
476 | private _cancelExistingSubscription;
|
---|
477 | /**
|
---|
478 | * Sets errors on a form control when running validations manually, rather than automatically.
|
---|
479 | *
|
---|
480 | * Calling `setErrors` also updates the validity of the parent control.
|
---|
481 | *
|
---|
482 | * @usageNotes
|
---|
483 | *
|
---|
484 | * ### Manually set the errors for a control
|
---|
485 | *
|
---|
486 | * ```
|
---|
487 | * const login = new FormControl('someLogin');
|
---|
488 | * login.setErrors({
|
---|
489 | * notUnique: true
|
---|
490 | * });
|
---|
491 | *
|
---|
492 | * expect(login.valid).toEqual(false);
|
---|
493 | * expect(login.errors).toEqual({ notUnique: true });
|
---|
494 | *
|
---|
495 | * login.setValue('someOtherLogin');
|
---|
496 | *
|
---|
497 | * expect(login.valid).toEqual(true);
|
---|
498 | * ```
|
---|
499 | */
|
---|
500 | setErrors(errors: ValidationErrors | null, opts?: {
|
---|
501 | emitEvent?: boolean;
|
---|
502 | }): void;
|
---|
503 | /**
|
---|
504 | * Retrieves a child control given the control's name or path.
|
---|
505 | *
|
---|
506 | * @param path A dot-delimited string or array of string/number values that define the path to the
|
---|
507 | * control.
|
---|
508 | *
|
---|
509 | * @usageNotes
|
---|
510 | * ### Retrieve a nested control
|
---|
511 | *
|
---|
512 | * For example, to get a `name` control nested within a `person` sub-group:
|
---|
513 | *
|
---|
514 | * * `this.form.get('person.name');`
|
---|
515 | *
|
---|
516 | * -OR-
|
---|
517 | *
|
---|
518 | * * `this.form.get(['person', 'name']);`
|
---|
519 | *
|
---|
520 | * ### Retrieve a control in a FormArray
|
---|
521 | *
|
---|
522 | * When accessing an element inside a FormArray, you can use an element index.
|
---|
523 | * For example, to get a `price` control from the first element in an `items` array you can use:
|
---|
524 | *
|
---|
525 | * * `this.form.get('items.0.price');`
|
---|
526 | *
|
---|
527 | * -OR-
|
---|
528 | *
|
---|
529 | * * `this.form.get(['items', 0, 'price']);`
|
---|
530 | */
|
---|
531 | get(path: Array<string | number> | string): AbstractControl | null;
|
---|
532 | /**
|
---|
533 | * @description
|
---|
534 | * Reports error data for the control with the given path.
|
---|
535 | *
|
---|
536 | * @param errorCode The code of the error to check
|
---|
537 | * @param path A list of control names that designates how to move from the current control
|
---|
538 | * to the control that should be queried for errors.
|
---|
539 | *
|
---|
540 | * @usageNotes
|
---|
541 | * For example, for the following `FormGroup`:
|
---|
542 | *
|
---|
543 | * ```
|
---|
544 | * form = new FormGroup({
|
---|
545 | * address: new FormGroup({ street: new FormControl() })
|
---|
546 | * });
|
---|
547 | * ```
|
---|
548 | *
|
---|
549 | * The path to the 'street' control from the root form would be 'address' -> 'street'.
|
---|
550 | *
|
---|
551 | * It can be provided to this method in one of two formats:
|
---|
552 | *
|
---|
553 | * 1. An array of string control names, e.g. `['address', 'street']`
|
---|
554 | * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
|
---|
555 | *
|
---|
556 | * @returns error data for that particular error. If the control or error is not present,
|
---|
557 | * null is returned.
|
---|
558 | */
|
---|
559 | getError(errorCode: string, path?: Array<string | number> | string): any;
|
---|
560 | /**
|
---|
561 | * @description
|
---|
562 | * Reports whether the control with the given path has the error specified.
|
---|
563 | *
|
---|
564 | * @param errorCode The code of the error to check
|
---|
565 | * @param path A list of control names that designates how to move from the current control
|
---|
566 | * to the control that should be queried for errors.
|
---|
567 | *
|
---|
568 | * @usageNotes
|
---|
569 | * For example, for the following `FormGroup`:
|
---|
570 | *
|
---|
571 | * ```
|
---|
572 | * form = new FormGroup({
|
---|
573 | * address: new FormGroup({ street: new FormControl() })
|
---|
574 | * });
|
---|
575 | * ```
|
---|
576 | *
|
---|
577 | * The path to the 'street' control from the root form would be 'address' -> 'street'.
|
---|
578 | *
|
---|
579 | * It can be provided to this method in one of two formats:
|
---|
580 | *
|
---|
581 | * 1. An array of string control names, e.g. `['address', 'street']`
|
---|
582 | * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
|
---|
583 | *
|
---|
584 | * If no path is given, this method checks for the error on the current control.
|
---|
585 | *
|
---|
586 | * @returns whether the given error is present in the control at the given path.
|
---|
587 | *
|
---|
588 | * If the control is not present, false is returned.
|
---|
589 | */
|
---|
590 | hasError(errorCode: string, path?: Array<string | number> | string): boolean;
|
---|
591 | /**
|
---|
592 | * Retrieves the top-level ancestor of this control.
|
---|
593 | */
|
---|
594 | get root(): AbstractControl;
|
---|
595 | private _calculateStatus;
|
---|
596 | }
|
---|
597 |
|
---|
598 | /**
|
---|
599 | * @description
|
---|
600 | * Base class for control directives.
|
---|
601 | *
|
---|
602 | * This class is only used internally in the `ReactiveFormsModule` and the `FormsModule`.
|
---|
603 | *
|
---|
604 | * @publicApi
|
---|
605 | */
|
---|
606 | export declare abstract class AbstractControlDirective {
|
---|
607 | /**
|
---|
608 | * @description
|
---|
609 | * A reference to the underlying control.
|
---|
610 | *
|
---|
611 | * @returns the control that backs this directive. Most properties fall through to that instance.
|
---|
612 | */
|
---|
613 | abstract get control(): AbstractControl | null;
|
---|
614 | /**
|
---|
615 | * @description
|
---|
616 | * Reports the value of the control if it is present, otherwise null.
|
---|
617 | */
|
---|
618 | get value(): any;
|
---|
619 | /**
|
---|
620 | * @description
|
---|
621 | * Reports whether the control is valid. A control is considered valid if no
|
---|
622 | * validation errors exist with the current value.
|
---|
623 | * If the control is not present, null is returned.
|
---|
624 | */
|
---|
625 | get valid(): boolean | null;
|
---|
626 | /**
|
---|
627 | * @description
|
---|
628 | * Reports whether the control is invalid, meaning that an error exists in the input value.
|
---|
629 | * If the control is not present, null is returned.
|
---|
630 | */
|
---|
631 | get invalid(): boolean | null;
|
---|
632 | /**
|
---|
633 | * @description
|
---|
634 | * Reports whether a control is pending, meaning that that async validation is occurring and
|
---|
635 | * errors are not yet available for the input value. If the control is not present, null is
|
---|
636 | * returned.
|
---|
637 | */
|
---|
638 | get pending(): boolean | null;
|
---|
639 | /**
|
---|
640 | * @description
|
---|
641 | * Reports whether the control is disabled, meaning that the control is disabled
|
---|
642 | * in the UI and is exempt from validation checks and excluded from aggregate
|
---|
643 | * values of ancestor controls. If the control is not present, null is returned.
|
---|
644 | */
|
---|
645 | get disabled(): boolean | null;
|
---|
646 | /**
|
---|
647 | * @description
|
---|
648 | * Reports whether the control is enabled, meaning that the control is included in ancestor
|
---|
649 | * calculations of validity or value. If the control is not present, null is returned.
|
---|
650 | */
|
---|
651 | get enabled(): boolean | null;
|
---|
652 | /**
|
---|
653 | * @description
|
---|
654 | * Reports the control's validation errors. If the control is not present, null is returned.
|
---|
655 | */
|
---|
656 | get errors(): ValidationErrors | null;
|
---|
657 | /**
|
---|
658 | * @description
|
---|
659 | * Reports whether the control is pristine, meaning that the user has not yet changed
|
---|
660 | * the value in the UI. If the control is not present, null is returned.
|
---|
661 | */
|
---|
662 | get pristine(): boolean | null;
|
---|
663 | /**
|
---|
664 | * @description
|
---|
665 | * Reports whether the control is dirty, meaning that the user has changed
|
---|
666 | * the value in the UI. If the control is not present, null is returned.
|
---|
667 | */
|
---|
668 | get dirty(): boolean | null;
|
---|
669 | /**
|
---|
670 | * @description
|
---|
671 | * Reports whether the control is touched, meaning that the user has triggered
|
---|
672 | * a `blur` event on it. If the control is not present, null is returned.
|
---|
673 | */
|
---|
674 | get touched(): boolean | null;
|
---|
675 | /**
|
---|
676 | * @description
|
---|
677 | * Reports the validation status of the control. Possible values include:
|
---|
678 | * 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
|
---|
679 | * If the control is not present, null is returned.
|
---|
680 | */
|
---|
681 | get status(): string | null;
|
---|
682 | /**
|
---|
683 | * @description
|
---|
684 | * Reports whether the control is untouched, meaning that the user has not yet triggered
|
---|
685 | * a `blur` event on it. If the control is not present, null is returned.
|
---|
686 | */
|
---|
687 | get untouched(): boolean | null;
|
---|
688 | /**
|
---|
689 | * @description
|
---|
690 | * Returns a multicasting observable that emits a validation status whenever it is
|
---|
691 | * calculated for the control. If the control is not present, null is returned.
|
---|
692 | */
|
---|
693 | get statusChanges(): Observable<any> | null;
|
---|
694 | /**
|
---|
695 | * @description
|
---|
696 | * Returns a multicasting observable of value changes for the control that emits every time the
|
---|
697 | * value of the control changes in the UI or programmatically.
|
---|
698 | * If the control is not present, null is returned.
|
---|
699 | */
|
---|
700 | get valueChanges(): Observable<any> | null;
|
---|
701 | /**
|
---|
702 | * @description
|
---|
703 | * Returns an array that represents the path from the top-level form to this control.
|
---|
704 | * Each index is the string name of the control on that level.
|
---|
705 | */
|
---|
706 | get path(): string[] | null;
|
---|
707 | /**
|
---|
708 | * Contains the result of merging synchronous validators into a single validator function
|
---|
709 | * (combined using `Validators.compose`).
|
---|
710 | */
|
---|
711 | private _composedValidatorFn;
|
---|
712 | /**
|
---|
713 | * Contains the result of merging asynchronous validators into a single validator function
|
---|
714 | * (combined using `Validators.composeAsync`).
|
---|
715 | */
|
---|
716 | private _composedAsyncValidatorFn;
|
---|
717 | /**
|
---|
718 | * @description
|
---|
719 | * Synchronous validator function composed of all the synchronous validators registered with this
|
---|
720 | * directive.
|
---|
721 | */
|
---|
722 | get validator(): ValidatorFn | null;
|
---|
723 | /**
|
---|
724 | * @description
|
---|
725 | * Asynchronous validator function composed of all the asynchronous validators registered with
|
---|
726 | * this directive.
|
---|
727 | */
|
---|
728 | get asyncValidator(): AsyncValidatorFn | null;
|
---|
729 | private _onDestroyCallbacks;
|
---|
730 | /**
|
---|
731 | * @description
|
---|
732 | * Resets the control with the provided value if the control is present.
|
---|
733 | */
|
---|
734 | reset(value?: any): void;
|
---|
735 | /**
|
---|
736 | * @description
|
---|
737 | * Reports whether the control with the given path has the error specified.
|
---|
738 | *
|
---|
739 | * @param errorCode The code of the error to check
|
---|
740 | * @param path A list of control names that designates how to move from the current control
|
---|
741 | * to the control that should be queried for errors.
|
---|
742 | *
|
---|
743 | * @usageNotes
|
---|
744 | * For example, for the following `FormGroup`:
|
---|
745 | *
|
---|
746 | * ```
|
---|
747 | * form = new FormGroup({
|
---|
748 | * address: new FormGroup({ street: new FormControl() })
|
---|
749 | * });
|
---|
750 | * ```
|
---|
751 | *
|
---|
752 | * The path to the 'street' control from the root form would be 'address' -> 'street'.
|
---|
753 | *
|
---|
754 | * It can be provided to this method in one of two formats:
|
---|
755 | *
|
---|
756 | * 1. An array of string control names, e.g. `['address', 'street']`
|
---|
757 | * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
|
---|
758 | *
|
---|
759 | * If no path is given, this method checks for the error on the current control.
|
---|
760 | *
|
---|
761 | * @returns whether the given error is present in the control at the given path.
|
---|
762 | *
|
---|
763 | * If the control is not present, false is returned.
|
---|
764 | */
|
---|
765 | hasError(errorCode: string, path?: Array<string | number> | string): boolean;
|
---|
766 | /**
|
---|
767 | * @description
|
---|
768 | * Reports error data for the control with the given path.
|
---|
769 | *
|
---|
770 | * @param errorCode The code of the error to check
|
---|
771 | * @param path A list of control names that designates how to move from the current control
|
---|
772 | * to the control that should be queried for errors.
|
---|
773 | *
|
---|
774 | * @usageNotes
|
---|
775 | * For example, for the following `FormGroup`:
|
---|
776 | *
|
---|
777 | * ```
|
---|
778 | * form = new FormGroup({
|
---|
779 | * address: new FormGroup({ street: new FormControl() })
|
---|
780 | * });
|
---|
781 | * ```
|
---|
782 | *
|
---|
783 | * The path to the 'street' control from the root form would be 'address' -> 'street'.
|
---|
784 | *
|
---|
785 | * It can be provided to this method in one of two formats:
|
---|
786 | *
|
---|
787 | * 1. An array of string control names, e.g. `['address', 'street']`
|
---|
788 | * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
|
---|
789 | *
|
---|
790 | * @returns error data for that particular error. If the control or error is not present,
|
---|
791 | * null is returned.
|
---|
792 | */
|
---|
793 | getError(errorCode: string, path?: Array<string | number> | string): any;
|
---|
794 | }
|
---|
795 |
|
---|
796 | /**
|
---|
797 | * Interface for options provided to an `AbstractControl`.
|
---|
798 | *
|
---|
799 | * @publicApi
|
---|
800 | */
|
---|
801 | export declare interface AbstractControlOptions {
|
---|
802 | /**
|
---|
803 | * @description
|
---|
804 | * The list of validators applied to a control.
|
---|
805 | */
|
---|
806 | validators?: ValidatorFn | ValidatorFn[] | null;
|
---|
807 | /**
|
---|
808 | * @description
|
---|
809 | * The list of async validators applied to control.
|
---|
810 | */
|
---|
811 | asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
|
---|
812 | /**
|
---|
813 | * @description
|
---|
814 | * The event name for control to update upon.
|
---|
815 | */
|
---|
816 | updateOn?: 'change' | 'blur' | 'submit';
|
---|
817 | }
|
---|
818 |
|
---|
819 | /**
|
---|
820 | * @description
|
---|
821 | * A base class for code shared between the `NgModelGroup` and `FormGroupName` directives.
|
---|
822 | *
|
---|
823 | * @publicApi
|
---|
824 | */
|
---|
825 | export declare class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {
|
---|
826 | /** @nodoc */
|
---|
827 | ngOnInit(): void;
|
---|
828 | /** @nodoc */
|
---|
829 | ngOnDestroy(): void;
|
---|
830 | /**
|
---|
831 | * @description
|
---|
832 | * The `FormGroup` bound to this directive.
|
---|
833 | */
|
---|
834 | get control(): FormGroup;
|
---|
835 | /**
|
---|
836 | * @description
|
---|
837 | * The path to this group from the top-level directive.
|
---|
838 | */
|
---|
839 | get path(): string[];
|
---|
840 | /**
|
---|
841 | * @description
|
---|
842 | * The top-level directive for this group if present, otherwise null.
|
---|
843 | */
|
---|
844 | get formDirective(): Form | null;
|
---|
845 | }
|
---|
846 |
|
---|
847 | /**
|
---|
848 | * A base class for Validator-based Directives. The class contains common logic shared across such
|
---|
849 | * Directives.
|
---|
850 | *
|
---|
851 | * For internal use only, this class is not intended for use outside of the Forms package.
|
---|
852 | */
|
---|
853 | declare abstract class AbstractValidatorDirective implements Validator {
|
---|
854 | private _validator;
|
---|
855 | private _onChange;
|
---|
856 | /**
|
---|
857 | * Helper function invoked from child classes to process changes (from `ngOnChanges` hook).
|
---|
858 | * @nodoc
|
---|
859 | */
|
---|
860 | handleChanges(changes: SimpleChanges): void;
|
---|
861 | /** @nodoc */
|
---|
862 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
863 | /** @nodoc */
|
---|
864 | registerOnValidatorChange(fn: () => void): void;
|
---|
865 | }
|
---|
866 |
|
---|
867 | declare type AnyControlStatus = 'untouched' | 'touched' | 'pristine' | 'dirty' | 'valid' | 'invalid' | 'pending' | 'submitted';
|
---|
868 |
|
---|
869 | /**
|
---|
870 | * @description
|
---|
871 | * An interface implemented by classes that perform asynchronous validation.
|
---|
872 | *
|
---|
873 | * @usageNotes
|
---|
874 | *
|
---|
875 | * ### Provide a custom async validator directive
|
---|
876 | *
|
---|
877 | * The following example implements the `AsyncValidator` interface to create an
|
---|
878 | * async validator directive with a custom error key.
|
---|
879 | *
|
---|
880 | * ```typescript
|
---|
881 | * import { of } from 'rxjs';
|
---|
882 | *
|
---|
883 | * @Directive({
|
---|
884 | * selector: '[customAsyncValidator]',
|
---|
885 | * providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CustomAsyncValidatorDirective, multi:
|
---|
886 | * true}]
|
---|
887 | * })
|
---|
888 | * class CustomAsyncValidatorDirective implements AsyncValidator {
|
---|
889 | * validate(control: AbstractControl): Observable<ValidationErrors|null> {
|
---|
890 | * return of({'custom': true});
|
---|
891 | * }
|
---|
892 | * }
|
---|
893 | * ```
|
---|
894 | *
|
---|
895 | * @publicApi
|
---|
896 | */
|
---|
897 | export declare interface AsyncValidator extends Validator {
|
---|
898 | /**
|
---|
899 | * @description
|
---|
900 | * Method that performs async validation against the provided control.
|
---|
901 | *
|
---|
902 | * @param control The control to validate against.
|
---|
903 | *
|
---|
904 | * @returns A promise or observable that resolves a map of validation errors
|
---|
905 | * if validation fails, otherwise null.
|
---|
906 | */
|
---|
907 | validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
|
---|
908 | }
|
---|
909 |
|
---|
910 | /**
|
---|
911 | * @description
|
---|
912 | * A function that receives a control and returns a Promise or observable
|
---|
913 | * that emits validation errors if present, otherwise null.
|
---|
914 | *
|
---|
915 | * @publicApi
|
---|
916 | */
|
---|
917 | export declare interface AsyncValidatorFn {
|
---|
918 | (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
|
---|
919 | }
|
---|
920 |
|
---|
921 | /**
|
---|
922 | * @description
|
---|
923 | * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input
|
---|
924 | * element.
|
---|
925 | *
|
---|
926 | * @usageNotes
|
---|
927 | *
|
---|
928 | * ### Using a checkbox with a reactive form.
|
---|
929 | *
|
---|
930 | * The following example shows how to use a checkbox with a reactive form.
|
---|
931 | *
|
---|
932 | * ```ts
|
---|
933 | * const rememberLoginControl = new FormControl();
|
---|
934 | * ```
|
---|
935 | *
|
---|
936 | * ```
|
---|
937 | * <input type="checkbox" [formControl]="rememberLoginControl">
|
---|
938 | * ```
|
---|
939 | *
|
---|
940 | * @ngModule ReactiveFormsModule
|
---|
941 | * @ngModule FormsModule
|
---|
942 | * @publicApi
|
---|
943 | */
|
---|
944 | export declare class CheckboxControlValueAccessor extends ɵangular_packages_forms_forms_g implements ControlValueAccessor {
|
---|
945 | /**
|
---|
946 | * Sets the "checked" property on the input element.
|
---|
947 | * @nodoc
|
---|
948 | */
|
---|
949 | writeValue(value: any): void;
|
---|
950 | }
|
---|
951 |
|
---|
952 | /**
|
---|
953 | * A Directive that adds the `required` validator to checkbox controls marked with the
|
---|
954 | * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
|
---|
955 | *
|
---|
956 | * @see [Form Validation](guide/form-validation)
|
---|
957 | *
|
---|
958 | * @usageNotes
|
---|
959 | *
|
---|
960 | * ### Adding a required checkbox validator using template-driven forms
|
---|
961 | *
|
---|
962 | * The following example shows how to add a checkbox required validator to an input attached to an
|
---|
963 | * ngModel binding.
|
---|
964 | *
|
---|
965 | * ```
|
---|
966 | * <input type="checkbox" name="active" ngModel required>
|
---|
967 | * ```
|
---|
968 | *
|
---|
969 | * @publicApi
|
---|
970 | * @ngModule FormsModule
|
---|
971 | * @ngModule ReactiveFormsModule
|
---|
972 | */
|
---|
973 | export declare class CheckboxRequiredValidator extends RequiredValidator {
|
---|
974 | /**
|
---|
975 | * Method that validates whether or not the checkbox has been checked.
|
---|
976 | * Returns the validation result if enabled, otherwise null.
|
---|
977 | * @nodoc
|
---|
978 | */
|
---|
979 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
980 | }
|
---|
981 |
|
---|
982 | /**
|
---|
983 | * @description
|
---|
984 | * Provide this token to control if form directives buffer IME input until
|
---|
985 | * the "compositionend" event occurs.
|
---|
986 | * @publicApi
|
---|
987 | */
|
---|
988 | export declare const COMPOSITION_BUFFER_MODE: InjectionToken<boolean>;
|
---|
989 |
|
---|
990 | /**
|
---|
991 | * @description
|
---|
992 | * A base class for directives that contain multiple registered instances of `NgControl`.
|
---|
993 | * Only used by the forms module.
|
---|
994 | *
|
---|
995 | * @publicApi
|
---|
996 | */
|
---|
997 | export declare abstract class ControlContainer extends AbstractControlDirective {
|
---|
998 | /**
|
---|
999 | * @description
|
---|
1000 | * The name for the control
|
---|
1001 | */
|
---|
1002 | name: string | number | null;
|
---|
1003 | /**
|
---|
1004 | * @description
|
---|
1005 | * The top-level form directive for the control.
|
---|
1006 | */
|
---|
1007 | get formDirective(): Form | null;
|
---|
1008 | /**
|
---|
1009 | * @description
|
---|
1010 | * The path to this group.
|
---|
1011 | */
|
---|
1012 | get path(): string[] | null;
|
---|
1013 | }
|
---|
1014 |
|
---|
1015 | /**
|
---|
1016 | * @description
|
---|
1017 | * Defines an interface that acts as a bridge between the Angular forms API and a
|
---|
1018 | * native element in the DOM.
|
---|
1019 | *
|
---|
1020 | * Implement this interface to create a custom form control directive
|
---|
1021 | * that integrates with Angular forms.
|
---|
1022 | *
|
---|
1023 | * @see DefaultValueAccessor
|
---|
1024 | *
|
---|
1025 | * @publicApi
|
---|
1026 | */
|
---|
1027 | export declare interface ControlValueAccessor {
|
---|
1028 | /**
|
---|
1029 | * @description
|
---|
1030 | * Writes a new value to the element.
|
---|
1031 | *
|
---|
1032 | * This method is called by the forms API to write to the view when programmatic
|
---|
1033 | * changes from model to view are requested.
|
---|
1034 | *
|
---|
1035 | * @usageNotes
|
---|
1036 | * ### Write a value to the element
|
---|
1037 | *
|
---|
1038 | * The following example writes a value to the native DOM element.
|
---|
1039 | *
|
---|
1040 | * ```ts
|
---|
1041 | * writeValue(value: any): void {
|
---|
1042 | * this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
|
---|
1043 | * }
|
---|
1044 | * ```
|
---|
1045 | *
|
---|
1046 | * @param obj The new value for the element
|
---|
1047 | */
|
---|
1048 | writeValue(obj: any): void;
|
---|
1049 | /**
|
---|
1050 | * @description
|
---|
1051 | * Registers a callback function that is called when the control's value
|
---|
1052 | * changes in the UI.
|
---|
1053 | *
|
---|
1054 | * This method is called by the forms API on initialization to update the form
|
---|
1055 | * model when values propagate from the view to the model.
|
---|
1056 | *
|
---|
1057 | * When implementing the `registerOnChange` method in your own value accessor,
|
---|
1058 | * save the given function so your class calls it at the appropriate time.
|
---|
1059 | *
|
---|
1060 | * @usageNotes
|
---|
1061 | * ### Store the change function
|
---|
1062 | *
|
---|
1063 | * The following example stores the provided function as an internal method.
|
---|
1064 | *
|
---|
1065 | * ```ts
|
---|
1066 | * registerOnChange(fn: (_: any) => void): void {
|
---|
1067 | * this._onChange = fn;
|
---|
1068 | * }
|
---|
1069 | * ```
|
---|
1070 | *
|
---|
1071 | * When the value changes in the UI, call the registered
|
---|
1072 | * function to allow the forms API to update itself:
|
---|
1073 | *
|
---|
1074 | * ```ts
|
---|
1075 | * host: {
|
---|
1076 | * '(change)': '_onChange($event.target.value)'
|
---|
1077 | * }
|
---|
1078 | * ```
|
---|
1079 | *
|
---|
1080 | * @param fn The callback function to register
|
---|
1081 | */
|
---|
1082 | registerOnChange(fn: any): void;
|
---|
1083 | /**
|
---|
1084 | * @description
|
---|
1085 | * Registers a callback function that is called by the forms API on initialization
|
---|
1086 | * to update the form model on blur.
|
---|
1087 | *
|
---|
1088 | * When implementing `registerOnTouched` in your own value accessor, save the given
|
---|
1089 | * function so your class calls it when the control should be considered
|
---|
1090 | * blurred or "touched".
|
---|
1091 | *
|
---|
1092 | * @usageNotes
|
---|
1093 | * ### Store the callback function
|
---|
1094 | *
|
---|
1095 | * The following example stores the provided function as an internal method.
|
---|
1096 | *
|
---|
1097 | * ```ts
|
---|
1098 | * registerOnTouched(fn: any): void {
|
---|
1099 | * this._onTouched = fn;
|
---|
1100 | * }
|
---|
1101 | * ```
|
---|
1102 | *
|
---|
1103 | * On blur (or equivalent), your class should call the registered function to allow
|
---|
1104 | * the forms API to update itself:
|
---|
1105 | *
|
---|
1106 | * ```ts
|
---|
1107 | * host: {
|
---|
1108 | * '(blur)': '_onTouched()'
|
---|
1109 | * }
|
---|
1110 | * ```
|
---|
1111 | *
|
---|
1112 | * @param fn The callback function to register
|
---|
1113 | */
|
---|
1114 | registerOnTouched(fn: any): void;
|
---|
1115 | /**
|
---|
1116 | * @description
|
---|
1117 | * Function that is called by the forms API when the control status changes to
|
---|
1118 | * or from 'DISABLED'. Depending on the status, it enables or disables the
|
---|
1119 | * appropriate DOM element.
|
---|
1120 | *
|
---|
1121 | * @usageNotes
|
---|
1122 | * The following is an example of writing the disabled property to a native DOM element:
|
---|
1123 | *
|
---|
1124 | * ```ts
|
---|
1125 | * setDisabledState(isDisabled: boolean): void {
|
---|
1126 | * this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
|
---|
1127 | * }
|
---|
1128 | * ```
|
---|
1129 | *
|
---|
1130 | * @param isDisabled The disabled status to set on the element
|
---|
1131 | */
|
---|
1132 | setDisabledState?(isDisabled: boolean): void;
|
---|
1133 | }
|
---|
1134 |
|
---|
1135 | /**
|
---|
1136 | * The default `ControlValueAccessor` for writing a value and listening to changes on input
|
---|
1137 | * elements. The accessor is used by the `FormControlDirective`, `FormControlName`, and
|
---|
1138 | * `NgModel` directives.
|
---|
1139 | *
|
---|
1140 | * {@searchKeywords ngDefaultControl}
|
---|
1141 | *
|
---|
1142 | * @usageNotes
|
---|
1143 | *
|
---|
1144 | * ### Using the default value accessor
|
---|
1145 | *
|
---|
1146 | * The following example shows how to use an input element that activates the default value accessor
|
---|
1147 | * (in this case, a text field).
|
---|
1148 | *
|
---|
1149 | * ```ts
|
---|
1150 | * const firstNameControl = new FormControl();
|
---|
1151 | * ```
|
---|
1152 | *
|
---|
1153 | * ```
|
---|
1154 | * <input type="text" [formControl]="firstNameControl">
|
---|
1155 | * ```
|
---|
1156 | *
|
---|
1157 | * This value accessor is used by default for `<input type="text">` and `<textarea>` elements, but
|
---|
1158 | * you could also use it for custom components that have similar behavior and do not require special
|
---|
1159 | * processing. In order to attach the default value accessor to a custom element, add the
|
---|
1160 | * `ngDefaultControl` attribute as shown below.
|
---|
1161 | *
|
---|
1162 | * ```
|
---|
1163 | * <custom-input-component ngDefaultControl [(ngModel)]="value"></custom-input-component>
|
---|
1164 | * ```
|
---|
1165 | *
|
---|
1166 | * @ngModule ReactiveFormsModule
|
---|
1167 | * @ngModule FormsModule
|
---|
1168 | * @publicApi
|
---|
1169 | */
|
---|
1170 | export declare class DefaultValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor {
|
---|
1171 | private _compositionMode;
|
---|
1172 | /** Whether the user is creating a composition string (IME events). */
|
---|
1173 | private _composing;
|
---|
1174 | constructor(renderer: Renderer2, elementRef: ElementRef, _compositionMode: boolean);
|
---|
1175 | /**
|
---|
1176 | * Sets the "value" property on the input element.
|
---|
1177 | * @nodoc
|
---|
1178 | */
|
---|
1179 | writeValue(value: any): void;
|
---|
1180 | }
|
---|
1181 |
|
---|
1182 | /**
|
---|
1183 | * A directive that adds the `email` validator to controls marked with the
|
---|
1184 | * `email` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
|
---|
1185 | *
|
---|
1186 | * @see [Form Validation](guide/form-validation)
|
---|
1187 | *
|
---|
1188 | * @usageNotes
|
---|
1189 | *
|
---|
1190 | * ### Adding an email validator
|
---|
1191 | *
|
---|
1192 | * The following example shows how to add an email validator to an input attached to an ngModel
|
---|
1193 | * binding.
|
---|
1194 | *
|
---|
1195 | * ```
|
---|
1196 | * <input type="email" name="email" ngModel email>
|
---|
1197 | * <input type="email" name="email" ngModel email="true">
|
---|
1198 | * <input type="email" name="email" ngModel [email]="true">
|
---|
1199 | * ```
|
---|
1200 | *
|
---|
1201 | * @publicApi
|
---|
1202 | * @ngModule FormsModule
|
---|
1203 | * @ngModule ReactiveFormsModule
|
---|
1204 | */
|
---|
1205 | export declare class EmailValidator implements Validator {
|
---|
1206 | private _enabled;
|
---|
1207 | private _onChange?;
|
---|
1208 | /**
|
---|
1209 | * @description
|
---|
1210 | * Tracks changes to the email attribute bound to this directive.
|
---|
1211 | */
|
---|
1212 | set email(value: boolean | string);
|
---|
1213 | /**
|
---|
1214 | * Method that validates whether an email address is valid.
|
---|
1215 | * Returns the validation result if enabled, otherwise null.
|
---|
1216 | * @nodoc
|
---|
1217 | */
|
---|
1218 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
1219 | /**
|
---|
1220 | * Registers a callback function to call when the validator inputs change.
|
---|
1221 | * @nodoc
|
---|
1222 | */
|
---|
1223 | registerOnValidatorChange(fn: () => void): void;
|
---|
1224 | }
|
---|
1225 |
|
---|
1226 | /**
|
---|
1227 | * @description
|
---|
1228 | * An interface implemented by `FormGroupDirective` and `NgForm` directives.
|
---|
1229 | *
|
---|
1230 | * Only used by the `ReactiveFormsModule` and `FormsModule`.
|
---|
1231 | *
|
---|
1232 | * @publicApi
|
---|
1233 | */
|
---|
1234 | export declare interface Form {
|
---|
1235 | /**
|
---|
1236 | * @description
|
---|
1237 | * Add a control to this form.
|
---|
1238 | *
|
---|
1239 | * @param dir The control directive to add to the form.
|
---|
1240 | */
|
---|
1241 | addControl(dir: NgControl): void;
|
---|
1242 | /**
|
---|
1243 | * @description
|
---|
1244 | * Remove a control from this form.
|
---|
1245 | *
|
---|
1246 | * @param dir: The control directive to remove from the form.
|
---|
1247 | */
|
---|
1248 | removeControl(dir: NgControl): void;
|
---|
1249 | /**
|
---|
1250 | * @description
|
---|
1251 | * The control directive from which to get the `FormControl`.
|
---|
1252 | *
|
---|
1253 | * @param dir: The control directive.
|
---|
1254 | */
|
---|
1255 | getControl(dir: NgControl): FormControl;
|
---|
1256 | /**
|
---|
1257 | * @description
|
---|
1258 | * Add a group of controls to this form.
|
---|
1259 | *
|
---|
1260 | * @param dir: The control group directive to add.
|
---|
1261 | */
|
---|
1262 | addFormGroup(dir: AbstractFormGroupDirective): void;
|
---|
1263 | /**
|
---|
1264 | * @description
|
---|
1265 | * Remove a group of controls to this form.
|
---|
1266 | *
|
---|
1267 | * @param dir: The control group directive to remove.
|
---|
1268 | */
|
---|
1269 | removeFormGroup(dir: AbstractFormGroupDirective): void;
|
---|
1270 | /**
|
---|
1271 | * @description
|
---|
1272 | * The `FormGroup` associated with a particular `AbstractFormGroupDirective`.
|
---|
1273 | *
|
---|
1274 | * @param dir: The form group directive from which to get the `FormGroup`.
|
---|
1275 | */
|
---|
1276 | getFormGroup(dir: AbstractFormGroupDirective): FormGroup;
|
---|
1277 | /**
|
---|
1278 | * @description
|
---|
1279 | * Update the model for a particular control with a new value.
|
---|
1280 | *
|
---|
1281 | * @param dir: The control directive to update.
|
---|
1282 | * @param value: The new value for the control.
|
---|
1283 | */
|
---|
1284 | updateModel(dir: NgControl, value: any): void;
|
---|
1285 | }
|
---|
1286 |
|
---|
1287 | /**
|
---|
1288 | * Tracks the value and validity state of an array of `FormControl`,
|
---|
1289 | * `FormGroup` or `FormArray` instances.
|
---|
1290 | *
|
---|
1291 | * A `FormArray` aggregates the values of each child `FormControl` into an array.
|
---|
1292 | * It calculates its status by reducing the status values of its children. For example, if one of
|
---|
1293 | * the controls in a `FormArray` is invalid, the entire array becomes invalid.
|
---|
1294 | *
|
---|
1295 | * `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
|
---|
1296 | * along with `FormControl` and `FormGroup`.
|
---|
1297 | *
|
---|
1298 | * @usageNotes
|
---|
1299 | *
|
---|
1300 | * ### Create an array of form controls
|
---|
1301 | *
|
---|
1302 | * ```
|
---|
1303 | * const arr = new FormArray([
|
---|
1304 | * new FormControl('Nancy', Validators.minLength(2)),
|
---|
1305 | * new FormControl('Drew'),
|
---|
1306 | * ]);
|
---|
1307 | *
|
---|
1308 | * console.log(arr.value); // ['Nancy', 'Drew']
|
---|
1309 | * console.log(arr.status); // 'VALID'
|
---|
1310 | * ```
|
---|
1311 | *
|
---|
1312 | * ### Create a form array with array-level validators
|
---|
1313 | *
|
---|
1314 | * You include array-level validators and async validators. These come in handy
|
---|
1315 | * when you want to perform validation that considers the value of more than one child
|
---|
1316 | * control.
|
---|
1317 | *
|
---|
1318 | * The two types of validators are passed in separately as the second and third arg
|
---|
1319 | * respectively, or together as part of an options object.
|
---|
1320 | *
|
---|
1321 | * ```
|
---|
1322 | * const arr = new FormArray([
|
---|
1323 | * new FormControl('Nancy'),
|
---|
1324 | * new FormControl('Drew')
|
---|
1325 | * ], {validators: myValidator, asyncValidators: myAsyncValidator});
|
---|
1326 | * ```
|
---|
1327 | *
|
---|
1328 | * ### Set the updateOn property for all controls in a form array
|
---|
1329 | *
|
---|
1330 | * The options object is used to set a default value for each child
|
---|
1331 | * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
|
---|
1332 | * array level, all child controls default to 'blur', unless the child
|
---|
1333 | * has explicitly specified a different `updateOn` value.
|
---|
1334 | *
|
---|
1335 | * ```ts
|
---|
1336 | * const arr = new FormArray([
|
---|
1337 | * new FormControl()
|
---|
1338 | * ], {updateOn: 'blur'});
|
---|
1339 | * ```
|
---|
1340 | *
|
---|
1341 | * ### Adding or removing controls from a form array
|
---|
1342 | *
|
---|
1343 | * To change the controls in the array, use the `push`, `insert`, `removeAt` or `clear` methods
|
---|
1344 | * in `FormArray` itself. These methods ensure the controls are properly tracked in the
|
---|
1345 | * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
|
---|
1346 | * the `FormArray` directly, as that result in strange and unexpected behavior such
|
---|
1347 | * as broken change detection.
|
---|
1348 | *
|
---|
1349 | * @publicApi
|
---|
1350 | */
|
---|
1351 | export declare class FormArray extends AbstractControl {
|
---|
1352 | controls: AbstractControl[];
|
---|
1353 | /**
|
---|
1354 | * Creates a new `FormArray` instance.
|
---|
1355 | *
|
---|
1356 | * @param controls An array of child controls. Each child control is given an index
|
---|
1357 | * where it is registered.
|
---|
1358 | *
|
---|
1359 | * @param validatorOrOpts A synchronous validator function, or an array of
|
---|
1360 | * such functions, or an `AbstractControlOptions` object that contains validation functions
|
---|
1361 | * and a validation trigger.
|
---|
1362 | *
|
---|
1363 | * @param asyncValidator A single async validator or array of async validator functions
|
---|
1364 | *
|
---|
1365 | */
|
---|
1366 | constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
|
---|
1367 | /**
|
---|
1368 | * Get the `AbstractControl` at the given `index` in the array.
|
---|
1369 | *
|
---|
1370 | * @param index Index in the array to retrieve the control
|
---|
1371 | */
|
---|
1372 | at(index: number): AbstractControl;
|
---|
1373 | /**
|
---|
1374 | * Insert a new `AbstractControl` at the end of the array.
|
---|
1375 | *
|
---|
1376 | * @param control Form control to be inserted
|
---|
1377 | * @param options Specifies whether this FormArray instance should emit events after a new
|
---|
1378 | * control is added.
|
---|
1379 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1380 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
1381 | * inserted. When false, no events are emitted.
|
---|
1382 | */
|
---|
1383 | push(control: AbstractControl, options?: {
|
---|
1384 | emitEvent?: boolean;
|
---|
1385 | }): void;
|
---|
1386 | /**
|
---|
1387 | * Insert a new `AbstractControl` at the given `index` in the array.
|
---|
1388 | *
|
---|
1389 | * @param index Index in the array to insert the control
|
---|
1390 | * @param control Form control to be inserted
|
---|
1391 | * @param options Specifies whether this FormArray instance should emit events after a new
|
---|
1392 | * control is inserted.
|
---|
1393 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1394 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
1395 | * inserted. When false, no events are emitted.
|
---|
1396 | */
|
---|
1397 | insert(index: number, control: AbstractControl, options?: {
|
---|
1398 | emitEvent?: boolean;
|
---|
1399 | }): void;
|
---|
1400 | /**
|
---|
1401 | * Remove the control at the given `index` in the array.
|
---|
1402 | *
|
---|
1403 | * @param index Index in the array to remove the control
|
---|
1404 | * @param options Specifies whether this FormArray instance should emit events after a
|
---|
1405 | * control is removed.
|
---|
1406 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1407 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
1408 | * removed. When false, no events are emitted.
|
---|
1409 | */
|
---|
1410 | removeAt(index: number, options?: {
|
---|
1411 | emitEvent?: boolean;
|
---|
1412 | }): void;
|
---|
1413 | /**
|
---|
1414 | * Replace an existing control.
|
---|
1415 | *
|
---|
1416 | * @param index Index in the array to replace the control
|
---|
1417 | * @param control The `AbstractControl` control to replace the existing control
|
---|
1418 | * @param options Specifies whether this FormArray instance should emit events after an
|
---|
1419 | * existing control is replaced with a new one.
|
---|
1420 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1421 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
1422 | * replaced with a new one. When false, no events are emitted.
|
---|
1423 | */
|
---|
1424 | setControl(index: number, control: AbstractControl, options?: {
|
---|
1425 | emitEvent?: boolean;
|
---|
1426 | }): void;
|
---|
1427 | /**
|
---|
1428 | * Length of the control array.
|
---|
1429 | */
|
---|
1430 | get length(): number;
|
---|
1431 | /**
|
---|
1432 | * Sets the value of the `FormArray`. It accepts an array that matches
|
---|
1433 | * the structure of the control.
|
---|
1434 | *
|
---|
1435 | * This method performs strict checks, and throws an error if you try
|
---|
1436 | * to set the value of a control that doesn't exist or if you exclude the
|
---|
1437 | * value of a control.
|
---|
1438 | *
|
---|
1439 | * @usageNotes
|
---|
1440 | * ### Set the values for the controls in the form array
|
---|
1441 | *
|
---|
1442 | * ```
|
---|
1443 | * const arr = new FormArray([
|
---|
1444 | * new FormControl(),
|
---|
1445 | * new FormControl()
|
---|
1446 | * ]);
|
---|
1447 | * console.log(arr.value); // [null, null]
|
---|
1448 | *
|
---|
1449 | * arr.setValue(['Nancy', 'Drew']);
|
---|
1450 | * console.log(arr.value); // ['Nancy', 'Drew']
|
---|
1451 | * ```
|
---|
1452 | *
|
---|
1453 | * @param value Array of values for the controls
|
---|
1454 | * @param options Configure options that determine how the control propagates changes and
|
---|
1455 | * emits events after the value changes
|
---|
1456 | *
|
---|
1457 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
|
---|
1458 | * is false.
|
---|
1459 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1460 | * `valueChanges`
|
---|
1461 | * observables emit events with the latest status and value when the control value is updated.
|
---|
1462 | * When false, no events are emitted.
|
---|
1463 | * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
|
---|
1464 | * updateValueAndValidity} method.
|
---|
1465 | */
|
---|
1466 | setValue(value: any[], options?: {
|
---|
1467 | onlySelf?: boolean;
|
---|
1468 | emitEvent?: boolean;
|
---|
1469 | }): void;
|
---|
1470 | /**
|
---|
1471 | * Patches the value of the `FormArray`. It accepts an array that matches the
|
---|
1472 | * structure of the control, and does its best to match the values to the correct
|
---|
1473 | * controls in the group.
|
---|
1474 | *
|
---|
1475 | * It accepts both super-sets and sub-sets of the array without throwing an error.
|
---|
1476 | *
|
---|
1477 | * @usageNotes
|
---|
1478 | * ### Patch the values for controls in a form array
|
---|
1479 | *
|
---|
1480 | * ```
|
---|
1481 | * const arr = new FormArray([
|
---|
1482 | * new FormControl(),
|
---|
1483 | * new FormControl()
|
---|
1484 | * ]);
|
---|
1485 | * console.log(arr.value); // [null, null]
|
---|
1486 | *
|
---|
1487 | * arr.patchValue(['Nancy']);
|
---|
1488 | * console.log(arr.value); // ['Nancy', null]
|
---|
1489 | * ```
|
---|
1490 | *
|
---|
1491 | * @param value Array of latest values for the controls
|
---|
1492 | * @param options Configure options that determine how the control propagates changes and
|
---|
1493 | * emits events after the value changes
|
---|
1494 | *
|
---|
1495 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
|
---|
1496 | * is false.
|
---|
1497 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1498 | * `valueChanges` observables emit events with the latest status and value when the control value
|
---|
1499 | * is updated. When false, no events are emitted. The configuration options are passed to
|
---|
1500 | * the {@link AbstractControl#updateValueAndValidity updateValueAndValidity} method.
|
---|
1501 | */
|
---|
1502 | patchValue(value: any[], options?: {
|
---|
1503 | onlySelf?: boolean;
|
---|
1504 | emitEvent?: boolean;
|
---|
1505 | }): void;
|
---|
1506 | /**
|
---|
1507 | * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
|
---|
1508 | * value of all descendants to null or null maps.
|
---|
1509 | *
|
---|
1510 | * You reset to a specific form state by passing in an array of states
|
---|
1511 | * that matches the structure of the control. The state is a standalone value
|
---|
1512 | * or a form state object with both a value and a disabled status.
|
---|
1513 | *
|
---|
1514 | * @usageNotes
|
---|
1515 | * ### Reset the values in a form array
|
---|
1516 | *
|
---|
1517 | * ```ts
|
---|
1518 | * const arr = new FormArray([
|
---|
1519 | * new FormControl(),
|
---|
1520 | * new FormControl()
|
---|
1521 | * ]);
|
---|
1522 | * arr.reset(['name', 'last name']);
|
---|
1523 | *
|
---|
1524 | * console.log(arr.value); // ['name', 'last name']
|
---|
1525 | * ```
|
---|
1526 | *
|
---|
1527 | * ### Reset the values in a form array and the disabled status for the first control
|
---|
1528 | *
|
---|
1529 | * ```
|
---|
1530 | * arr.reset([
|
---|
1531 | * {value: 'name', disabled: true},
|
---|
1532 | * 'last'
|
---|
1533 | * ]);
|
---|
1534 | *
|
---|
1535 | * console.log(arr.value); // ['last']
|
---|
1536 | * console.log(arr.at(0).status); // 'DISABLED'
|
---|
1537 | * ```
|
---|
1538 | *
|
---|
1539 | * @param value Array of values for the controls
|
---|
1540 | * @param options Configure options that determine how the control propagates changes and
|
---|
1541 | * emits events after the value changes
|
---|
1542 | *
|
---|
1543 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
|
---|
1544 | * is false.
|
---|
1545 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1546 | * `valueChanges`
|
---|
1547 | * observables emit events with the latest status and value when the control is reset.
|
---|
1548 | * When false, no events are emitted.
|
---|
1549 | * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
|
---|
1550 | * updateValueAndValidity} method.
|
---|
1551 | */
|
---|
1552 | reset(value?: any, options?: {
|
---|
1553 | onlySelf?: boolean;
|
---|
1554 | emitEvent?: boolean;
|
---|
1555 | }): void;
|
---|
1556 | /**
|
---|
1557 | * The aggregate value of the array, including any disabled controls.
|
---|
1558 | *
|
---|
1559 | * Reports all values regardless of disabled status.
|
---|
1560 | * For enabled controls only, the `value` property is the best way to get the value of the array.
|
---|
1561 | */
|
---|
1562 | getRawValue(): any[];
|
---|
1563 | /**
|
---|
1564 | * Remove all controls in the `FormArray`.
|
---|
1565 | *
|
---|
1566 | * @param options Specifies whether this FormArray instance should emit events after all
|
---|
1567 | * controls are removed.
|
---|
1568 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1569 | * `valueChanges` observables emit events with the latest status and value when all controls
|
---|
1570 | * in this FormArray instance are removed. When false, no events are emitted.
|
---|
1571 | *
|
---|
1572 | * @usageNotes
|
---|
1573 | * ### Remove all elements from a FormArray
|
---|
1574 | *
|
---|
1575 | * ```ts
|
---|
1576 | * const arr = new FormArray([
|
---|
1577 | * new FormControl(),
|
---|
1578 | * new FormControl()
|
---|
1579 | * ]);
|
---|
1580 | * console.log(arr.length); // 2
|
---|
1581 | *
|
---|
1582 | * arr.clear();
|
---|
1583 | * console.log(arr.length); // 0
|
---|
1584 | * ```
|
---|
1585 | *
|
---|
1586 | * It's a simpler and more efficient alternative to removing all elements one by one:
|
---|
1587 | *
|
---|
1588 | * ```ts
|
---|
1589 | * const arr = new FormArray([
|
---|
1590 | * new FormControl(),
|
---|
1591 | * new FormControl()
|
---|
1592 | * ]);
|
---|
1593 | *
|
---|
1594 | * while (arr.length) {
|
---|
1595 | * arr.removeAt(0);
|
---|
1596 | * }
|
---|
1597 | * ```
|
---|
1598 | */
|
---|
1599 | clear(options?: {
|
---|
1600 | emitEvent?: boolean;
|
---|
1601 | }): void;
|
---|
1602 | private _registerControl;
|
---|
1603 | }
|
---|
1604 |
|
---|
1605 | /**
|
---|
1606 | * @description
|
---|
1607 | *
|
---|
1608 | * Syncs a nested `FormArray` to a DOM element.
|
---|
1609 | *
|
---|
1610 | * This directive is designed to be used with a parent `FormGroupDirective` (selector:
|
---|
1611 | * `[formGroup]`).
|
---|
1612 | *
|
---|
1613 | * It accepts the string name of the nested `FormArray` you want to link, and
|
---|
1614 | * will look for a `FormArray` registered with that name in the parent
|
---|
1615 | * `FormGroup` instance you passed into `FormGroupDirective`.
|
---|
1616 | *
|
---|
1617 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
1618 | * @see `AbstractControl`
|
---|
1619 | *
|
---|
1620 | * @usageNotes
|
---|
1621 | *
|
---|
1622 | * ### Example
|
---|
1623 | *
|
---|
1624 | * {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
|
---|
1625 | *
|
---|
1626 | * @ngModule ReactiveFormsModule
|
---|
1627 | * @publicApi
|
---|
1628 | */
|
---|
1629 | export declare class FormArrayName extends ControlContainer implements OnInit, OnDestroy {
|
---|
1630 | /**
|
---|
1631 | * @description
|
---|
1632 | * Tracks the name of the `FormArray` bound to the directive. The name corresponds
|
---|
1633 | * to a key in the parent `FormGroup` or `FormArray`.
|
---|
1634 | * Accepts a name as a string or a number.
|
---|
1635 | * The name in the form of a string is useful for individual forms,
|
---|
1636 | * while the numerical form allows for form arrays to be bound
|
---|
1637 | * to indices when iterating over arrays in a `FormArray`.
|
---|
1638 | */
|
---|
1639 | name: string | number | null;
|
---|
1640 | constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
|
---|
1641 | /**
|
---|
1642 | * A lifecycle method called when the directive's inputs are initialized. For internal use only.
|
---|
1643 | * @throws If the directive does not have a valid parent.
|
---|
1644 | * @nodoc
|
---|
1645 | */
|
---|
1646 | ngOnInit(): void;
|
---|
1647 | /**
|
---|
1648 | * A lifecycle method called before the directive's instance is destroyed. For internal use only.
|
---|
1649 | * @nodoc
|
---|
1650 | */
|
---|
1651 | ngOnDestroy(): void;
|
---|
1652 | /**
|
---|
1653 | * @description
|
---|
1654 | * The `FormArray` bound to this directive.
|
---|
1655 | */
|
---|
1656 | get control(): FormArray;
|
---|
1657 | /**
|
---|
1658 | * @description
|
---|
1659 | * The top-level directive for this group if present, otherwise null.
|
---|
1660 | */
|
---|
1661 | get formDirective(): FormGroupDirective | null;
|
---|
1662 | /**
|
---|
1663 | * @description
|
---|
1664 | * Returns an array that represents the path from the top-level form to this control.
|
---|
1665 | * Each index is the string name of the control on that level.
|
---|
1666 | */
|
---|
1667 | get path(): string[];
|
---|
1668 | private _checkParentType;
|
---|
1669 | }
|
---|
1670 |
|
---|
1671 | /**
|
---|
1672 | * @description
|
---|
1673 | * Creates an `AbstractControl` from a user-specified configuration.
|
---|
1674 | *
|
---|
1675 | * The `FormBuilder` provides syntactic sugar that shortens creating instances of a `FormControl`,
|
---|
1676 | * `FormGroup`, or `FormArray`. It reduces the amount of boilerplate needed to build complex
|
---|
1677 | * forms.
|
---|
1678 | *
|
---|
1679 | * @see [Reactive Forms Guide](/guide/reactive-forms)
|
---|
1680 | *
|
---|
1681 | * @publicApi
|
---|
1682 | */
|
---|
1683 | export declare class FormBuilder {
|
---|
1684 | /**
|
---|
1685 | * @description
|
---|
1686 | * Construct a new `FormGroup` instance.
|
---|
1687 | *
|
---|
1688 | * @param controlsConfig A collection of child controls. The key for each child is the name
|
---|
1689 | * under which it is registered.
|
---|
1690 | *
|
---|
1691 | * @param options Configuration options object for the `FormGroup`. The object should have the
|
---|
1692 | * the `AbstractControlOptions` type and might contain the following fields:
|
---|
1693 | * * `validators`: A synchronous validator function, or an array of validator functions
|
---|
1694 | * * `asyncValidators`: A single async validator or array of async validator functions
|
---|
1695 | * * `updateOn`: The event upon which the control should be updated (options: 'change' | 'blur' |
|
---|
1696 | * submit')
|
---|
1697 | */
|
---|
1698 | group(controlsConfig: {
|
---|
1699 | [key: string]: any;
|
---|
1700 | }, options?: AbstractControlOptions | null): FormGroup;
|
---|
1701 | /**
|
---|
1702 | * @description
|
---|
1703 | * Construct a new `FormGroup` instance.
|
---|
1704 | *
|
---|
1705 | * @deprecated This API is not typesafe and can result in issues with Closure Compiler renaming.
|
---|
1706 | * Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.
|
---|
1707 | * Note that `AbstractControlOptions` expects `validators` and `asyncValidators` to be valid
|
---|
1708 | * validators. If you have custom validators, make sure their validation function parameter is
|
---|
1709 | * `AbstractControl` and not a sub-class, such as `FormGroup`. These functions will be called with
|
---|
1710 | * an object of type `AbstractControl` and that cannot be automatically downcast to a subclass, so
|
---|
1711 | * TypeScript sees this as an error. For example, change the `(group: FormGroup) =>
|
---|
1712 | * ValidationErrors|null` signature to be `(group: AbstractControl) => ValidationErrors|null`.
|
---|
1713 | *
|
---|
1714 | * @param controlsConfig A collection of child controls. The key for each child is the name
|
---|
1715 | * under which it is registered.
|
---|
1716 | *
|
---|
1717 | * @param options Configuration options object for the `FormGroup`. The legacy configuration
|
---|
1718 | * object consists of:
|
---|
1719 | * * `validator`: A synchronous validator function, or an array of validator functions
|
---|
1720 | * * `asyncValidator`: A single async validator or array of async validator functions
|
---|
1721 | * Note: the legacy format is deprecated and might be removed in one of the next major versions
|
---|
1722 | * of Angular.
|
---|
1723 | */
|
---|
1724 | group(controlsConfig: {
|
---|
1725 | [key: string]: any;
|
---|
1726 | }, options: {
|
---|
1727 | [key: string]: any;
|
---|
1728 | }): FormGroup;
|
---|
1729 | /**
|
---|
1730 | * @description
|
---|
1731 | * Construct a new `FormControl` with the given state, validators and options.
|
---|
1732 | *
|
---|
1733 | * @param formState Initializes the control with an initial state value, or
|
---|
1734 | * with an object that contains both a value and a disabled status.
|
---|
1735 | *
|
---|
1736 | * @param validatorOrOpts A synchronous validator function, or an array of
|
---|
1737 | * such functions, or an `AbstractControlOptions` object that contains
|
---|
1738 | * validation functions and a validation trigger.
|
---|
1739 | *
|
---|
1740 | * @param asyncValidator A single async validator or array of async validator
|
---|
1741 | * functions.
|
---|
1742 | *
|
---|
1743 | * @usageNotes
|
---|
1744 | *
|
---|
1745 | * ### Initialize a control as disabled
|
---|
1746 | *
|
---|
1747 | * The following example returns a control with an initial value in a disabled state.
|
---|
1748 | *
|
---|
1749 | * <code-example path="forms/ts/formBuilder/form_builder_example.ts" region="disabled-control">
|
---|
1750 | * </code-example>
|
---|
1751 | */
|
---|
1752 | control(formState: any, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl;
|
---|
1753 | /**
|
---|
1754 | * Constructs a new `FormArray` from the given array of configurations,
|
---|
1755 | * validators and options.
|
---|
1756 | *
|
---|
1757 | * @param controlsConfig An array of child controls or control configs. Each
|
---|
1758 | * child control is given an index when it is registered.
|
---|
1759 | *
|
---|
1760 | * @param validatorOrOpts A synchronous validator function, or an array of
|
---|
1761 | * such functions, or an `AbstractControlOptions` object that contains
|
---|
1762 | * validation functions and a validation trigger.
|
---|
1763 | *
|
---|
1764 | * @param asyncValidator A single async validator or array of async validator
|
---|
1765 | * functions.
|
---|
1766 | */
|
---|
1767 | array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormArray;
|
---|
1768 | }
|
---|
1769 |
|
---|
1770 | /**
|
---|
1771 | * Tracks the value and validation status of an individual form control.
|
---|
1772 | *
|
---|
1773 | * This is one of the three fundamental building blocks of Angular forms, along with
|
---|
1774 | * `FormGroup` and `FormArray`. It extends the `AbstractControl` class that
|
---|
1775 | * implements most of the base functionality for accessing the value, validation status,
|
---|
1776 | * user interactions and events. See [usage examples below](#usage-notes).
|
---|
1777 | *
|
---|
1778 | * @see `AbstractControl`
|
---|
1779 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
1780 | * @see [Usage Notes](#usage-notes)
|
---|
1781 | *
|
---|
1782 | * @usageNotes
|
---|
1783 | *
|
---|
1784 | * ### Initializing Form Controls
|
---|
1785 | *
|
---|
1786 | * Instantiate a `FormControl`, with an initial value.
|
---|
1787 | *
|
---|
1788 | * ```ts
|
---|
1789 | * const control = new FormControl('some value');
|
---|
1790 | * console.log(control.value); // 'some value'
|
---|
1791 | *```
|
---|
1792 | *
|
---|
1793 | * The following example initializes the control with a form state object. The `value`
|
---|
1794 | * and `disabled` keys are required in this case.
|
---|
1795 | *
|
---|
1796 | * ```ts
|
---|
1797 | * const control = new FormControl({ value: 'n/a', disabled: true });
|
---|
1798 | * console.log(control.value); // 'n/a'
|
---|
1799 | * console.log(control.status); // 'DISABLED'
|
---|
1800 | * ```
|
---|
1801 | *
|
---|
1802 | * The following example initializes the control with a synchronous validator.
|
---|
1803 | *
|
---|
1804 | * ```ts
|
---|
1805 | * const control = new FormControl('', Validators.required);
|
---|
1806 | * console.log(control.value); // ''
|
---|
1807 | * console.log(control.status); // 'INVALID'
|
---|
1808 | * ```
|
---|
1809 | *
|
---|
1810 | * The following example initializes the control using an options object.
|
---|
1811 | *
|
---|
1812 | * ```ts
|
---|
1813 | * const control = new FormControl('', {
|
---|
1814 | * validators: Validators.required,
|
---|
1815 | * asyncValidators: myAsyncValidator
|
---|
1816 | * });
|
---|
1817 | * ```
|
---|
1818 | *
|
---|
1819 | * ### Configure the control to update on a blur event
|
---|
1820 | *
|
---|
1821 | * Set the `updateOn` option to `'blur'` to update on the blur `event`.
|
---|
1822 | *
|
---|
1823 | * ```ts
|
---|
1824 | * const control = new FormControl('', { updateOn: 'blur' });
|
---|
1825 | * ```
|
---|
1826 | *
|
---|
1827 | * ### Configure the control to update on a submit event
|
---|
1828 | *
|
---|
1829 | * Set the `updateOn` option to `'submit'` to update on a submit `event`.
|
---|
1830 | *
|
---|
1831 | * ```ts
|
---|
1832 | * const control = new FormControl('', { updateOn: 'submit' });
|
---|
1833 | * ```
|
---|
1834 | *
|
---|
1835 | * ### Reset the control back to an initial value
|
---|
1836 | *
|
---|
1837 | * You reset to a specific form state by passing through a standalone
|
---|
1838 | * value or a form state object that contains both a value and a disabled state
|
---|
1839 | * (these are the only two properties that cannot be calculated).
|
---|
1840 | *
|
---|
1841 | * ```ts
|
---|
1842 | * const control = new FormControl('Nancy');
|
---|
1843 | *
|
---|
1844 | * console.log(control.value); // 'Nancy'
|
---|
1845 | *
|
---|
1846 | * control.reset('Drew');
|
---|
1847 | *
|
---|
1848 | * console.log(control.value); // 'Drew'
|
---|
1849 | * ```
|
---|
1850 | *
|
---|
1851 | * ### Reset the control back to an initial value and disabled
|
---|
1852 | *
|
---|
1853 | * ```
|
---|
1854 | * const control = new FormControl('Nancy');
|
---|
1855 | *
|
---|
1856 | * console.log(control.value); // 'Nancy'
|
---|
1857 | * console.log(control.status); // 'VALID'
|
---|
1858 | *
|
---|
1859 | * control.reset({ value: 'Drew', disabled: true });
|
---|
1860 | *
|
---|
1861 | * console.log(control.value); // 'Drew'
|
---|
1862 | * console.log(control.status); // 'DISABLED'
|
---|
1863 | * ```
|
---|
1864 | *
|
---|
1865 | * @publicApi
|
---|
1866 | */
|
---|
1867 | export declare class FormControl extends AbstractControl {
|
---|
1868 | /**
|
---|
1869 | * Creates a new `FormControl` instance.
|
---|
1870 | *
|
---|
1871 | * @param formState Initializes the control with an initial value,
|
---|
1872 | * or an object that defines the initial value and disabled state.
|
---|
1873 | *
|
---|
1874 | * @param validatorOrOpts A synchronous validator function, or an array of
|
---|
1875 | * such functions, or an `AbstractControlOptions` object that contains validation functions
|
---|
1876 | * and a validation trigger.
|
---|
1877 | *
|
---|
1878 | * @param asyncValidator A single async validator or array of async validator functions
|
---|
1879 | *
|
---|
1880 | */
|
---|
1881 | constructor(formState?: any, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
|
---|
1882 | /**
|
---|
1883 | * Sets a new value for the form control.
|
---|
1884 | *
|
---|
1885 | * @param value The new value for the control.
|
---|
1886 | * @param options Configuration options that determine how the control propagates changes
|
---|
1887 | * and emits events when the value changes.
|
---|
1888 | * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
|
---|
1889 | * updateValueAndValidity} method.
|
---|
1890 | *
|
---|
1891 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
|
---|
1892 | * false.
|
---|
1893 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1894 | * `valueChanges`
|
---|
1895 | * observables emit events with the latest status and value when the control value is updated.
|
---|
1896 | * When false, no events are emitted.
|
---|
1897 | * * `emitModelToViewChange`: When true or not supplied (the default), each change triggers an
|
---|
1898 | * `onChange` event to
|
---|
1899 | * update the view.
|
---|
1900 | * * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
|
---|
1901 | * `ngModelChange`
|
---|
1902 | * event to update the model.
|
---|
1903 | *
|
---|
1904 | */
|
---|
1905 | setValue(value: any, options?: {
|
---|
1906 | onlySelf?: boolean;
|
---|
1907 | emitEvent?: boolean;
|
---|
1908 | emitModelToViewChange?: boolean;
|
---|
1909 | emitViewToModelChange?: boolean;
|
---|
1910 | }): void;
|
---|
1911 | /**
|
---|
1912 | * Patches the value of a control.
|
---|
1913 | *
|
---|
1914 | * This function is functionally the same as {@link FormControl#setValue setValue} at this level.
|
---|
1915 | * It exists for symmetry with {@link FormGroup#patchValue patchValue} on `FormGroups` and
|
---|
1916 | * `FormArrays`, where it does behave differently.
|
---|
1917 | *
|
---|
1918 | * @see `setValue` for options
|
---|
1919 | */
|
---|
1920 | patchValue(value: any, options?: {
|
---|
1921 | onlySelf?: boolean;
|
---|
1922 | emitEvent?: boolean;
|
---|
1923 | emitModelToViewChange?: boolean;
|
---|
1924 | emitViewToModelChange?: boolean;
|
---|
1925 | }): void;
|
---|
1926 | /**
|
---|
1927 | * Resets the form control, marking it `pristine` and `untouched`, and setting
|
---|
1928 | * the value to null.
|
---|
1929 | *
|
---|
1930 | * @param formState Resets the control with an initial value,
|
---|
1931 | * or an object that defines the initial value and disabled state.
|
---|
1932 | *
|
---|
1933 | * @param options Configuration options that determine how the control propagates changes
|
---|
1934 | * and emits events after the value changes.
|
---|
1935 | *
|
---|
1936 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
|
---|
1937 | * false.
|
---|
1938 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
1939 | * `valueChanges`
|
---|
1940 | * observables emit events with the latest status and value when the control is reset.
|
---|
1941 | * When false, no events are emitted.
|
---|
1942 | *
|
---|
1943 | */
|
---|
1944 | reset(formState?: any, options?: {
|
---|
1945 | onlySelf?: boolean;
|
---|
1946 | emitEvent?: boolean;
|
---|
1947 | }): void;
|
---|
1948 | /**
|
---|
1949 | * Register a listener for change events.
|
---|
1950 | *
|
---|
1951 | * @param fn The method that is called when the value changes
|
---|
1952 | */
|
---|
1953 | registerOnChange(fn: Function): void;
|
---|
1954 | /**
|
---|
1955 | * Register a listener for disabled events.
|
---|
1956 | *
|
---|
1957 | * @param fn The method that is called when the disabled status changes.
|
---|
1958 | */
|
---|
1959 | registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
|
---|
1960 | private _applyFormState;
|
---|
1961 | }
|
---|
1962 |
|
---|
1963 | /**
|
---|
1964 | * @description
|
---|
1965 | * Synchronizes a standalone `FormControl` instance to a form control element.
|
---|
1966 | *
|
---|
1967 | * Note that support for using the `ngModel` input property and `ngModelChange` event with reactive
|
---|
1968 | * form directives was deprecated in Angular v6 and is scheduled for removal in
|
---|
1969 | * a future version of Angular.
|
---|
1970 | * For details, see [Deprecated features](guide/deprecations#ngmodel-with-reactive-forms).
|
---|
1971 | *
|
---|
1972 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
1973 | * @see `FormControl`
|
---|
1974 | * @see `AbstractControl`
|
---|
1975 | *
|
---|
1976 | * @usageNotes
|
---|
1977 | *
|
---|
1978 | * The following example shows how to register a standalone control and set its value.
|
---|
1979 | *
|
---|
1980 | * {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
|
---|
1981 | *
|
---|
1982 | * @ngModule ReactiveFormsModule
|
---|
1983 | * @publicApi
|
---|
1984 | */
|
---|
1985 | export declare class FormControlDirective extends NgControl implements OnChanges, OnDestroy {
|
---|
1986 | private _ngModelWarningConfig;
|
---|
1987 | /**
|
---|
1988 | * Internal reference to the view model value.
|
---|
1989 | * @nodoc
|
---|
1990 | */
|
---|
1991 | viewModel: any;
|
---|
1992 | /**
|
---|
1993 | * @description
|
---|
1994 | * Tracks the `FormControl` instance bound to the directive.
|
---|
1995 | */
|
---|
1996 | form: FormControl;
|
---|
1997 | /**
|
---|
1998 | * @description
|
---|
1999 | * Triggers a warning in dev mode that this input should not be used with reactive forms.
|
---|
2000 | */
|
---|
2001 | set isDisabled(isDisabled: boolean);
|
---|
2002 | /** @deprecated as of v6 */
|
---|
2003 | model: any;
|
---|
2004 | /** @deprecated as of v6 */
|
---|
2005 | update: EventEmitter<any>;
|
---|
2006 | constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
|
---|
2007 | /** @nodoc */
|
---|
2008 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2009 | /** @nodoc */
|
---|
2010 | ngOnDestroy(): void;
|
---|
2011 | /**
|
---|
2012 | * @description
|
---|
2013 | * Returns an array that represents the path from the top-level form to this control.
|
---|
2014 | * Each index is the string name of the control on that level.
|
---|
2015 | */
|
---|
2016 | get path(): string[];
|
---|
2017 | /**
|
---|
2018 | * @description
|
---|
2019 | * The `FormControl` bound to this directive.
|
---|
2020 | */
|
---|
2021 | get control(): FormControl;
|
---|
2022 | /**
|
---|
2023 | * @description
|
---|
2024 | * Sets the new value for the view model and emits an `ngModelChange` event.
|
---|
2025 | *
|
---|
2026 | * @param newValue The new value for the view model.
|
---|
2027 | */
|
---|
2028 | viewToModelUpdate(newValue: any): void;
|
---|
2029 | private _isControlChanged;
|
---|
2030 | }
|
---|
2031 |
|
---|
2032 | /**
|
---|
2033 | * @description
|
---|
2034 | * Syncs a `FormControl` in an existing `FormGroup` to a form control
|
---|
2035 | * element by name.
|
---|
2036 | *
|
---|
2037 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
2038 | * @see `FormControl`
|
---|
2039 | * @see `AbstractControl`
|
---|
2040 | *
|
---|
2041 | * @usageNotes
|
---|
2042 | *
|
---|
2043 | * ### Register `FormControl` within a group
|
---|
2044 | *
|
---|
2045 | * The following example shows how to register multiple form controls within a form group
|
---|
2046 | * and set their value.
|
---|
2047 | *
|
---|
2048 | * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
|
---|
2049 | *
|
---|
2050 | * To see `formControlName` examples with different form control types, see:
|
---|
2051 | *
|
---|
2052 | * * Radio buttons: `RadioControlValueAccessor`
|
---|
2053 | * * Selects: `SelectControlValueAccessor`
|
---|
2054 | *
|
---|
2055 | * ### Use with ngModel is deprecated
|
---|
2056 | *
|
---|
2057 | * Support for using the `ngModel` input property and `ngModelChange` event with reactive
|
---|
2058 | * form directives has been deprecated in Angular v6 and is scheduled for removal in
|
---|
2059 | * a future version of Angular.
|
---|
2060 | *
|
---|
2061 | * For details, see [Deprecated features](guide/deprecations#ngmodel-with-reactive-forms).
|
---|
2062 | *
|
---|
2063 | * @ngModule ReactiveFormsModule
|
---|
2064 | * @publicApi
|
---|
2065 | */
|
---|
2066 | export declare class FormControlName extends NgControl implements OnChanges, OnDestroy {
|
---|
2067 | private _ngModelWarningConfig;
|
---|
2068 | private _added;
|
---|
2069 | /**
|
---|
2070 | * @description
|
---|
2071 | * Tracks the `FormControl` instance bound to the directive.
|
---|
2072 | */
|
---|
2073 | readonly control: FormControl;
|
---|
2074 | /**
|
---|
2075 | * @description
|
---|
2076 | * Tracks the name of the `FormControl` bound to the directive. The name corresponds
|
---|
2077 | * to a key in the parent `FormGroup` or `FormArray`.
|
---|
2078 | * Accepts a name as a string or a number.
|
---|
2079 | * The name in the form of a string is useful for individual forms,
|
---|
2080 | * while the numerical form allows for form controls to be bound
|
---|
2081 | * to indices when iterating over controls in a `FormArray`.
|
---|
2082 | */
|
---|
2083 | name: string | number | null;
|
---|
2084 | /**
|
---|
2085 | * @description
|
---|
2086 | * Triggers a warning in dev mode that this input should not be used with reactive forms.
|
---|
2087 | */
|
---|
2088 | set isDisabled(isDisabled: boolean);
|
---|
2089 | /** @deprecated as of v6 */
|
---|
2090 | model: any;
|
---|
2091 | /** @deprecated as of v6 */
|
---|
2092 | update: EventEmitter<any>;
|
---|
2093 | constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
|
---|
2094 | /** @nodoc */
|
---|
2095 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2096 | /** @nodoc */
|
---|
2097 | ngOnDestroy(): void;
|
---|
2098 | /**
|
---|
2099 | * @description
|
---|
2100 | * Sets the new value for the view model and emits an `ngModelChange` event.
|
---|
2101 | *
|
---|
2102 | * @param newValue The new value for the view model.
|
---|
2103 | */
|
---|
2104 | viewToModelUpdate(newValue: any): void;
|
---|
2105 | /**
|
---|
2106 | * @description
|
---|
2107 | * Returns an array that represents the path from the top-level form to this control.
|
---|
2108 | * Each index is the string name of the control on that level.
|
---|
2109 | */
|
---|
2110 | get path(): string[];
|
---|
2111 | /**
|
---|
2112 | * @description
|
---|
2113 | * The top-level directive for this group if present, otherwise null.
|
---|
2114 | */
|
---|
2115 | get formDirective(): any;
|
---|
2116 | private _checkParentType;
|
---|
2117 | private _setUpControl;
|
---|
2118 | }
|
---|
2119 |
|
---|
2120 | /**
|
---|
2121 | * Tracks the value and validity state of a group of `FormControl` instances.
|
---|
2122 | *
|
---|
2123 | * A `FormGroup` aggregates the values of each child `FormControl` into one object,
|
---|
2124 | * with each control name as the key. It calculates its status by reducing the status values
|
---|
2125 | * of its children. For example, if one of the controls in a group is invalid, the entire
|
---|
2126 | * group becomes invalid.
|
---|
2127 | *
|
---|
2128 | * `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
|
---|
2129 | * along with `FormControl` and `FormArray`.
|
---|
2130 | *
|
---|
2131 | * When instantiating a `FormGroup`, pass in a collection of child controls as the first
|
---|
2132 | * argument. The key for each child registers the name for the control.
|
---|
2133 | *
|
---|
2134 | * @usageNotes
|
---|
2135 | *
|
---|
2136 | * ### Create a form group with 2 controls
|
---|
2137 | *
|
---|
2138 | * ```
|
---|
2139 | * const form = new FormGroup({
|
---|
2140 | * first: new FormControl('Nancy', Validators.minLength(2)),
|
---|
2141 | * last: new FormControl('Drew'),
|
---|
2142 | * });
|
---|
2143 | *
|
---|
2144 | * console.log(form.value); // {first: 'Nancy', last; 'Drew'}
|
---|
2145 | * console.log(form.status); // 'VALID'
|
---|
2146 | * ```
|
---|
2147 | *
|
---|
2148 | * ### Create a form group with a group-level validator
|
---|
2149 | *
|
---|
2150 | * You include group-level validators as the second arg, or group-level async
|
---|
2151 | * validators as the third arg. These come in handy when you want to perform validation
|
---|
2152 | * that considers the value of more than one child control.
|
---|
2153 | *
|
---|
2154 | * ```
|
---|
2155 | * const form = new FormGroup({
|
---|
2156 | * password: new FormControl('', Validators.minLength(2)),
|
---|
2157 | * passwordConfirm: new FormControl('', Validators.minLength(2)),
|
---|
2158 | * }, passwordMatchValidator);
|
---|
2159 | *
|
---|
2160 | *
|
---|
2161 | * function passwordMatchValidator(g: FormGroup) {
|
---|
2162 | * return g.get('password').value === g.get('passwordConfirm').value
|
---|
2163 | * ? null : {'mismatch': true};
|
---|
2164 | * }
|
---|
2165 | * ```
|
---|
2166 | *
|
---|
2167 | * Like `FormControl` instances, you choose to pass in
|
---|
2168 | * validators and async validators as part of an options object.
|
---|
2169 | *
|
---|
2170 | * ```
|
---|
2171 | * const form = new FormGroup({
|
---|
2172 | * password: new FormControl('')
|
---|
2173 | * passwordConfirm: new FormControl('')
|
---|
2174 | * }, { validators: passwordMatchValidator, asyncValidators: otherValidator });
|
---|
2175 | * ```
|
---|
2176 | *
|
---|
2177 | * ### Set the updateOn property for all controls in a form group
|
---|
2178 | *
|
---|
2179 | * The options object is used to set a default value for each child
|
---|
2180 | * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
|
---|
2181 | * group level, all child controls default to 'blur', unless the child
|
---|
2182 | * has explicitly specified a different `updateOn` value.
|
---|
2183 | *
|
---|
2184 | * ```ts
|
---|
2185 | * const c = new FormGroup({
|
---|
2186 | * one: new FormControl()
|
---|
2187 | * }, { updateOn: 'blur' });
|
---|
2188 | * ```
|
---|
2189 | *
|
---|
2190 | * @publicApi
|
---|
2191 | */
|
---|
2192 | export declare class FormGroup extends AbstractControl {
|
---|
2193 | controls: {
|
---|
2194 | [key: string]: AbstractControl;
|
---|
2195 | };
|
---|
2196 | /**
|
---|
2197 | * Creates a new `FormGroup` instance.
|
---|
2198 | *
|
---|
2199 | * @param controls A collection of child controls. The key for each child is the name
|
---|
2200 | * under which it is registered.
|
---|
2201 | *
|
---|
2202 | * @param validatorOrOpts A synchronous validator function, or an array of
|
---|
2203 | * such functions, or an `AbstractControlOptions` object that contains validation functions
|
---|
2204 | * and a validation trigger.
|
---|
2205 | *
|
---|
2206 | * @param asyncValidator A single async validator or array of async validator functions
|
---|
2207 | *
|
---|
2208 | */
|
---|
2209 | constructor(controls: {
|
---|
2210 | [key: string]: AbstractControl;
|
---|
2211 | }, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
|
---|
2212 | /**
|
---|
2213 | * Registers a control with the group's list of controls.
|
---|
2214 | *
|
---|
2215 | * This method does not update the value or validity of the control.
|
---|
2216 | * Use {@link FormGroup#addControl addControl} instead.
|
---|
2217 | *
|
---|
2218 | * @param name The control name to register in the collection
|
---|
2219 | * @param control Provides the control for the given name
|
---|
2220 | */
|
---|
2221 | registerControl(name: string, control: AbstractControl): AbstractControl;
|
---|
2222 | /**
|
---|
2223 | * Add a control to this group.
|
---|
2224 | *
|
---|
2225 | * If a control with a given name already exists, it would *not* be replaced with a new one.
|
---|
2226 | * If you want to replace an existing control, use the {@link FormGroup#setControl setControl}
|
---|
2227 | * method instead. This method also updates the value and validity of the control.
|
---|
2228 | *
|
---|
2229 | * @param name The control name to add to the collection
|
---|
2230 | * @param control Provides the control for the given name
|
---|
2231 | * @param options Specifies whether this FormGroup instance should emit events after a new
|
---|
2232 | * control is added.
|
---|
2233 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
2234 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
2235 | * added. When false, no events are emitted.
|
---|
2236 | */
|
---|
2237 | addControl(name: string, control: AbstractControl, options?: {
|
---|
2238 | emitEvent?: boolean;
|
---|
2239 | }): void;
|
---|
2240 | /**
|
---|
2241 | * Remove a control from this group.
|
---|
2242 | *
|
---|
2243 | * This method also updates the value and validity of the control.
|
---|
2244 | *
|
---|
2245 | * @param name The control name to remove from the collection
|
---|
2246 | * @param options Specifies whether this FormGroup instance should emit events after a
|
---|
2247 | * control is removed.
|
---|
2248 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
2249 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
2250 | * removed. When false, no events are emitted.
|
---|
2251 | */
|
---|
2252 | removeControl(name: string, options?: {
|
---|
2253 | emitEvent?: boolean;
|
---|
2254 | }): void;
|
---|
2255 | /**
|
---|
2256 | * Replace an existing control.
|
---|
2257 | *
|
---|
2258 | * If a control with a given name does not exist in this `FormGroup`, it will be added.
|
---|
2259 | *
|
---|
2260 | * @param name The control name to replace in the collection
|
---|
2261 | * @param control Provides the control for the given name
|
---|
2262 | * @param options Specifies whether this FormGroup instance should emit events after an
|
---|
2263 | * existing control is replaced.
|
---|
2264 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
2265 | * `valueChanges` observables emit events with the latest status and value when the control is
|
---|
2266 | * replaced with a new one. When false, no events are emitted.
|
---|
2267 | */
|
---|
2268 | setControl(name: string, control: AbstractControl, options?: {
|
---|
2269 | emitEvent?: boolean;
|
---|
2270 | }): void;
|
---|
2271 | /**
|
---|
2272 | * Check whether there is an enabled control with the given name in the group.
|
---|
2273 | *
|
---|
2274 | * Reports false for disabled controls. If you'd like to check for existence in the group
|
---|
2275 | * only, use {@link AbstractControl#get get} instead.
|
---|
2276 | *
|
---|
2277 | * @param controlName The control name to check for existence in the collection
|
---|
2278 | *
|
---|
2279 | * @returns false for disabled controls, true otherwise.
|
---|
2280 | */
|
---|
2281 | contains(controlName: string): boolean;
|
---|
2282 | /**
|
---|
2283 | * Sets the value of the `FormGroup`. It accepts an object that matches
|
---|
2284 | * the structure of the group, with control names as keys.
|
---|
2285 | *
|
---|
2286 | * @usageNotes
|
---|
2287 | * ### Set the complete value for the form group
|
---|
2288 | *
|
---|
2289 | * ```
|
---|
2290 | * const form = new FormGroup({
|
---|
2291 | * first: new FormControl(),
|
---|
2292 | * last: new FormControl()
|
---|
2293 | * });
|
---|
2294 | *
|
---|
2295 | * console.log(form.value); // {first: null, last: null}
|
---|
2296 | *
|
---|
2297 | * form.setValue({first: 'Nancy', last: 'Drew'});
|
---|
2298 | * console.log(form.value); // {first: 'Nancy', last: 'Drew'}
|
---|
2299 | * ```
|
---|
2300 | *
|
---|
2301 | * @throws When strict checks fail, such as setting the value of a control
|
---|
2302 | * that doesn't exist or if you exclude a value of a control that does exist.
|
---|
2303 | *
|
---|
2304 | * @param value The new value for the control that matches the structure of the group.
|
---|
2305 | * @param options Configuration options that determine how the control propagates changes
|
---|
2306 | * and emits events after the value changes.
|
---|
2307 | * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
|
---|
2308 | * updateValueAndValidity} method.
|
---|
2309 | *
|
---|
2310 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
|
---|
2311 | * false.
|
---|
2312 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
2313 | * `valueChanges`
|
---|
2314 | * observables emit events with the latest status and value when the control value is updated.
|
---|
2315 | * When false, no events are emitted.
|
---|
2316 | */
|
---|
2317 | setValue(value: {
|
---|
2318 | [key: string]: any;
|
---|
2319 | }, options?: {
|
---|
2320 | onlySelf?: boolean;
|
---|
2321 | emitEvent?: boolean;
|
---|
2322 | }): void;
|
---|
2323 | /**
|
---|
2324 | * Patches the value of the `FormGroup`. It accepts an object with control
|
---|
2325 | * names as keys, and does its best to match the values to the correct controls
|
---|
2326 | * in the group.
|
---|
2327 | *
|
---|
2328 | * It accepts both super-sets and sub-sets of the group without throwing an error.
|
---|
2329 | *
|
---|
2330 | * @usageNotes
|
---|
2331 | * ### Patch the value for a form group
|
---|
2332 | *
|
---|
2333 | * ```
|
---|
2334 | * const form = new FormGroup({
|
---|
2335 | * first: new FormControl(),
|
---|
2336 | * last: new FormControl()
|
---|
2337 | * });
|
---|
2338 | * console.log(form.value); // {first: null, last: null}
|
---|
2339 | *
|
---|
2340 | * form.patchValue({first: 'Nancy'});
|
---|
2341 | * console.log(form.value); // {first: 'Nancy', last: null}
|
---|
2342 | * ```
|
---|
2343 | *
|
---|
2344 | * @param value The object that matches the structure of the group.
|
---|
2345 | * @param options Configuration options that determine how the control propagates changes and
|
---|
2346 | * emits events after the value is patched.
|
---|
2347 | * * `onlySelf`: When true, each change only affects this control and not its parent. Default is
|
---|
2348 | * true.
|
---|
2349 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
2350 | * `valueChanges` observables emit events with the latest status and value when the control value
|
---|
2351 | * is updated. When false, no events are emitted. The configuration options are passed to
|
---|
2352 | * the {@link AbstractControl#updateValueAndValidity updateValueAndValidity} method.
|
---|
2353 | */
|
---|
2354 | patchValue(value: {
|
---|
2355 | [key: string]: any;
|
---|
2356 | }, options?: {
|
---|
2357 | onlySelf?: boolean;
|
---|
2358 | emitEvent?: boolean;
|
---|
2359 | }): void;
|
---|
2360 | /**
|
---|
2361 | * Resets the `FormGroup`, marks all descendants `pristine` and `untouched` and sets
|
---|
2362 | * the value of all descendants to null.
|
---|
2363 | *
|
---|
2364 | * You reset to a specific form state by passing in a map of states
|
---|
2365 | * that matches the structure of your form, with control names as keys. The state
|
---|
2366 | * is a standalone value or a form state object with both a value and a disabled
|
---|
2367 | * status.
|
---|
2368 | *
|
---|
2369 | * @param value Resets the control with an initial value,
|
---|
2370 | * or an object that defines the initial value and disabled state.
|
---|
2371 | *
|
---|
2372 | * @param options Configuration options that determine how the control propagates changes
|
---|
2373 | * and emits events when the group is reset.
|
---|
2374 | * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
|
---|
2375 | * false.
|
---|
2376 | * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
|
---|
2377 | * `valueChanges`
|
---|
2378 | * observables emit events with the latest status and value when the control is reset.
|
---|
2379 | * When false, no events are emitted.
|
---|
2380 | * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
|
---|
2381 | * updateValueAndValidity} method.
|
---|
2382 | *
|
---|
2383 | * @usageNotes
|
---|
2384 | *
|
---|
2385 | * ### Reset the form group values
|
---|
2386 | *
|
---|
2387 | * ```ts
|
---|
2388 | * const form = new FormGroup({
|
---|
2389 | * first: new FormControl('first name'),
|
---|
2390 | * last: new FormControl('last name')
|
---|
2391 | * });
|
---|
2392 | *
|
---|
2393 | * console.log(form.value); // {first: 'first name', last: 'last name'}
|
---|
2394 | *
|
---|
2395 | * form.reset({ first: 'name', last: 'last name' });
|
---|
2396 | *
|
---|
2397 | * console.log(form.value); // {first: 'name', last: 'last name'}
|
---|
2398 | * ```
|
---|
2399 | *
|
---|
2400 | * ### Reset the form group values and disabled status
|
---|
2401 | *
|
---|
2402 | * ```
|
---|
2403 | * const form = new FormGroup({
|
---|
2404 | * first: new FormControl('first name'),
|
---|
2405 | * last: new FormControl('last name')
|
---|
2406 | * });
|
---|
2407 | *
|
---|
2408 | * form.reset({
|
---|
2409 | * first: {value: 'name', disabled: true},
|
---|
2410 | * last: 'last'
|
---|
2411 | * });
|
---|
2412 | *
|
---|
2413 | * console.log(form.value); // {last: 'last'}
|
---|
2414 | * console.log(form.get('first').status); // 'DISABLED'
|
---|
2415 | * ```
|
---|
2416 | */
|
---|
2417 | reset(value?: any, options?: {
|
---|
2418 | onlySelf?: boolean;
|
---|
2419 | emitEvent?: boolean;
|
---|
2420 | }): void;
|
---|
2421 | /**
|
---|
2422 | * The aggregate value of the `FormGroup`, including any disabled controls.
|
---|
2423 | *
|
---|
2424 | * Retrieves all values regardless of disabled status.
|
---|
2425 | * The `value` property is the best way to get the value of the group, because
|
---|
2426 | * it excludes disabled controls in the `FormGroup`.
|
---|
2427 | */
|
---|
2428 | getRawValue(): any;
|
---|
2429 | }
|
---|
2430 |
|
---|
2431 | /**
|
---|
2432 | * @description
|
---|
2433 | *
|
---|
2434 | * Binds an existing `FormGroup` to a DOM element.
|
---|
2435 | *
|
---|
2436 | * This directive accepts an existing `FormGroup` instance. It will then use this
|
---|
2437 | * `FormGroup` instance to match any child `FormControl`, `FormGroup`,
|
---|
2438 | * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
|
---|
2439 | * and `FormArrayName` directives.
|
---|
2440 | *
|
---|
2441 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
2442 | * @see `AbstractControl`
|
---|
2443 | *
|
---|
2444 | * @usageNotes
|
---|
2445 | * ### Register Form Group
|
---|
2446 | *
|
---|
2447 | * The following example registers a `FormGroup` with first name and last name controls,
|
---|
2448 | * and listens for the *ngSubmit* event when the button is clicked.
|
---|
2449 | *
|
---|
2450 | * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
|
---|
2451 | *
|
---|
2452 | * @ngModule ReactiveFormsModule
|
---|
2453 | * @publicApi
|
---|
2454 | */
|
---|
2455 | export declare class FormGroupDirective extends ControlContainer implements Form, OnChanges, OnDestroy {
|
---|
2456 | private validators;
|
---|
2457 | private asyncValidators;
|
---|
2458 | /**
|
---|
2459 | * @description
|
---|
2460 | * Reports whether the form submission has been triggered.
|
---|
2461 | */
|
---|
2462 | readonly submitted: boolean;
|
---|
2463 | /**
|
---|
2464 | * Reference to an old form group input value, which is needed to cleanup old instance in case it
|
---|
2465 | * was replaced with a new one.
|
---|
2466 | */
|
---|
2467 | private _oldForm;
|
---|
2468 | /**
|
---|
2469 | * Callback that should be invoked when controls in FormGroup or FormArray collection change
|
---|
2470 | * (added or removed). This callback triggers corresponding DOM updates.
|
---|
2471 | */
|
---|
2472 | private readonly _onCollectionChange;
|
---|
2473 | /**
|
---|
2474 | * @description
|
---|
2475 | * Tracks the list of added `FormControlName` instances
|
---|
2476 | */
|
---|
2477 | directives: FormControlName[];
|
---|
2478 | /**
|
---|
2479 | * @description
|
---|
2480 | * Tracks the `FormGroup` bound to this directive.
|
---|
2481 | */
|
---|
2482 | form: FormGroup;
|
---|
2483 | /**
|
---|
2484 | * @description
|
---|
2485 | * Emits an event when the form submission has been triggered.
|
---|
2486 | */
|
---|
2487 | ngSubmit: EventEmitter<any>;
|
---|
2488 | constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
|
---|
2489 | /** @nodoc */
|
---|
2490 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2491 | /** @nodoc */
|
---|
2492 | ngOnDestroy(): void;
|
---|
2493 | /**
|
---|
2494 | * @description
|
---|
2495 | * Returns this directive's instance.
|
---|
2496 | */
|
---|
2497 | get formDirective(): Form;
|
---|
2498 | /**
|
---|
2499 | * @description
|
---|
2500 | * Returns the `FormGroup` bound to this directive.
|
---|
2501 | */
|
---|
2502 | get control(): FormGroup;
|
---|
2503 | /**
|
---|
2504 | * @description
|
---|
2505 | * Returns an array representing the path to this group. Because this directive
|
---|
2506 | * always lives at the top level of a form, it always an empty array.
|
---|
2507 | */
|
---|
2508 | get path(): string[];
|
---|
2509 | /**
|
---|
2510 | * @description
|
---|
2511 | * Method that sets up the control directive in this group, re-calculates its value
|
---|
2512 | * and validity, and adds the instance to the internal list of directives.
|
---|
2513 | *
|
---|
2514 | * @param dir The `FormControlName` directive instance.
|
---|
2515 | */
|
---|
2516 | addControl(dir: FormControlName): FormControl;
|
---|
2517 | /**
|
---|
2518 | * @description
|
---|
2519 | * Retrieves the `FormControl` instance from the provided `FormControlName` directive
|
---|
2520 | *
|
---|
2521 | * @param dir The `FormControlName` directive instance.
|
---|
2522 | */
|
---|
2523 | getControl(dir: FormControlName): FormControl;
|
---|
2524 | /**
|
---|
2525 | * @description
|
---|
2526 | * Removes the `FormControlName` instance from the internal list of directives
|
---|
2527 | *
|
---|
2528 | * @param dir The `FormControlName` directive instance.
|
---|
2529 | */
|
---|
2530 | removeControl(dir: FormControlName): void;
|
---|
2531 | /**
|
---|
2532 | * Adds a new `FormGroupName` directive instance to the form.
|
---|
2533 | *
|
---|
2534 | * @param dir The `FormGroupName` directive instance.
|
---|
2535 | */
|
---|
2536 | addFormGroup(dir: FormGroupName): void;
|
---|
2537 | /**
|
---|
2538 | * Performs the necessary cleanup when a `FormGroupName` directive instance is removed from the
|
---|
2539 | * view.
|
---|
2540 | *
|
---|
2541 | * @param dir The `FormGroupName` directive instance.
|
---|
2542 | */
|
---|
2543 | removeFormGroup(dir: FormGroupName): void;
|
---|
2544 | /**
|
---|
2545 | * @description
|
---|
2546 | * Retrieves the `FormGroup` for a provided `FormGroupName` directive instance
|
---|
2547 | *
|
---|
2548 | * @param dir The `FormGroupName` directive instance.
|
---|
2549 | */
|
---|
2550 | getFormGroup(dir: FormGroupName): FormGroup;
|
---|
2551 | /**
|
---|
2552 | * Performs the necessary setup when a `FormArrayName` directive instance is added to the view.
|
---|
2553 | *
|
---|
2554 | * @param dir The `FormArrayName` directive instance.
|
---|
2555 | */
|
---|
2556 | addFormArray(dir: FormArrayName): void;
|
---|
2557 | /**
|
---|
2558 | * Performs the necessary cleanup when a `FormArrayName` directive instance is removed from the
|
---|
2559 | * view.
|
---|
2560 | *
|
---|
2561 | * @param dir The `FormArrayName` directive instance.
|
---|
2562 | */
|
---|
2563 | removeFormArray(dir: FormArrayName): void;
|
---|
2564 | /**
|
---|
2565 | * @description
|
---|
2566 | * Retrieves the `FormArray` for a provided `FormArrayName` directive instance.
|
---|
2567 | *
|
---|
2568 | * @param dir The `FormArrayName` directive instance.
|
---|
2569 | */
|
---|
2570 | getFormArray(dir: FormArrayName): FormArray;
|
---|
2571 | /**
|
---|
2572 | * Sets the new value for the provided `FormControlName` directive.
|
---|
2573 | *
|
---|
2574 | * @param dir The `FormControlName` directive instance.
|
---|
2575 | * @param value The new value for the directive's control.
|
---|
2576 | */
|
---|
2577 | updateModel(dir: FormControlName, value: any): void;
|
---|
2578 | /**
|
---|
2579 | * @description
|
---|
2580 | * Method called with the "submit" event is triggered on the form.
|
---|
2581 | * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
|
---|
2582 | *
|
---|
2583 | * @param $event The "submit" event object
|
---|
2584 | */
|
---|
2585 | onSubmit($event: Event): boolean;
|
---|
2586 | /**
|
---|
2587 | * @description
|
---|
2588 | * Method called when the "reset" event is triggered on the form.
|
---|
2589 | */
|
---|
2590 | onReset(): void;
|
---|
2591 | /**
|
---|
2592 | * @description
|
---|
2593 | * Resets the form to an initial value and resets its submitted status.
|
---|
2594 | *
|
---|
2595 | * @param value The new value for the form.
|
---|
2596 | */
|
---|
2597 | resetForm(value?: any): void;
|
---|
2598 | private _setUpFormContainer;
|
---|
2599 | private _cleanUpFormContainer;
|
---|
2600 | private _updateRegistrations;
|
---|
2601 | private _updateValidators;
|
---|
2602 | private _checkFormPresent;
|
---|
2603 | }
|
---|
2604 |
|
---|
2605 | /**
|
---|
2606 | * @description
|
---|
2607 | *
|
---|
2608 | * Syncs a nested `FormGroup` to a DOM element.
|
---|
2609 | *
|
---|
2610 | * This directive can only be used with a parent `FormGroupDirective`.
|
---|
2611 | *
|
---|
2612 | * It accepts the string name of the nested `FormGroup` to link, and
|
---|
2613 | * looks for a `FormGroup` registered with that name in the parent
|
---|
2614 | * `FormGroup` instance you passed into `FormGroupDirective`.
|
---|
2615 | *
|
---|
2616 | * Use nested form groups to validate a sub-group of a
|
---|
2617 | * form separately from the rest or to group the values of certain
|
---|
2618 | * controls into their own nested object.
|
---|
2619 | *
|
---|
2620 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
2621 | *
|
---|
2622 | * @usageNotes
|
---|
2623 | *
|
---|
2624 | * ### Access the group by name
|
---|
2625 | *
|
---|
2626 | * The following example uses the {@link AbstractControl#get get} method to access the
|
---|
2627 | * associated `FormGroup`
|
---|
2628 | *
|
---|
2629 | * ```ts
|
---|
2630 | * this.form.get('name');
|
---|
2631 | * ```
|
---|
2632 | *
|
---|
2633 | * ### Access individual controls in the group
|
---|
2634 | *
|
---|
2635 | * The following example uses the {@link AbstractControl#get get} method to access
|
---|
2636 | * individual controls within the group using dot syntax.
|
---|
2637 | *
|
---|
2638 | * ```ts
|
---|
2639 | * this.form.get('name.first');
|
---|
2640 | * ```
|
---|
2641 | *
|
---|
2642 | * ### Register a nested `FormGroup`.
|
---|
2643 | *
|
---|
2644 | * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`,
|
---|
2645 | * and provides methods to retrieve the nested `FormGroup` and individual controls.
|
---|
2646 | *
|
---|
2647 | * {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
|
---|
2648 | *
|
---|
2649 | * @ngModule ReactiveFormsModule
|
---|
2650 | * @publicApi
|
---|
2651 | */
|
---|
2652 | export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
|
---|
2653 | /**
|
---|
2654 | * @description
|
---|
2655 | * Tracks the name of the `FormGroup` bound to the directive. The name corresponds
|
---|
2656 | * to a key in the parent `FormGroup` or `FormArray`.
|
---|
2657 | * Accepts a name as a string or a number.
|
---|
2658 | * The name in the form of a string is useful for individual forms,
|
---|
2659 | * while the numerical form allows for form groups to be bound
|
---|
2660 | * to indices when iterating over groups in a `FormArray`.
|
---|
2661 | */
|
---|
2662 | name: string | number | null;
|
---|
2663 | constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
|
---|
2664 | }
|
---|
2665 |
|
---|
2666 | declare type FormHooks = 'change' | 'blur' | 'submit';
|
---|
2667 |
|
---|
2668 | /**
|
---|
2669 | * Exports the required providers and directives for template-driven forms,
|
---|
2670 | * making them available for import by NgModules that import this module.
|
---|
2671 | *
|
---|
2672 | * Providers associated with this module:
|
---|
2673 | * * `RadioControlRegistry`
|
---|
2674 | *
|
---|
2675 | * @see [Forms Overview](/guide/forms-overview)
|
---|
2676 | * @see [Template-driven Forms Guide](/guide/forms)
|
---|
2677 | *
|
---|
2678 | * @publicApi
|
---|
2679 | */
|
---|
2680 | export declare class FormsModule {
|
---|
2681 | }
|
---|
2682 |
|
---|
2683 | /**
|
---|
2684 | * A directive that adds max length validation to controls marked with the
|
---|
2685 | * `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
|
---|
2686 | *
|
---|
2687 | * @see [Form Validation](guide/form-validation)
|
---|
2688 | *
|
---|
2689 | * @usageNotes
|
---|
2690 | *
|
---|
2691 | * ### Adding a maximum length validator
|
---|
2692 | *
|
---|
2693 | * The following example shows how to add a maximum length validator to an input attached to an
|
---|
2694 | * ngModel binding.
|
---|
2695 | *
|
---|
2696 | * ```html
|
---|
2697 | * <input name="firstName" ngModel maxlength="25">
|
---|
2698 | * ```
|
---|
2699 | *
|
---|
2700 | * @ngModule ReactiveFormsModule
|
---|
2701 | * @ngModule FormsModule
|
---|
2702 | * @publicApi
|
---|
2703 | */
|
---|
2704 | export declare class MaxLengthValidator implements Validator, OnChanges {
|
---|
2705 | private _validator;
|
---|
2706 | private _onChange?;
|
---|
2707 | /**
|
---|
2708 | * @description
|
---|
2709 | * Tracks changes to the maximum length bound to this directive.
|
---|
2710 | */
|
---|
2711 | maxlength: string | number | null;
|
---|
2712 | /** @nodoc */
|
---|
2713 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2714 | /**
|
---|
2715 | * Method that validates whether the value exceeds the maximum length requirement.
|
---|
2716 | * @nodoc
|
---|
2717 | */
|
---|
2718 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
2719 | /**
|
---|
2720 | * Registers a callback function to call when the validator inputs change.
|
---|
2721 | * @nodoc
|
---|
2722 | */
|
---|
2723 | registerOnValidatorChange(fn: () => void): void;
|
---|
2724 | private _createValidator;
|
---|
2725 | /** @nodoc */
|
---|
2726 | enabled(): boolean;
|
---|
2727 | }
|
---|
2728 |
|
---|
2729 | /**
|
---|
2730 | * A directive which installs the {@link MaxValidator} for any `formControlName`,
|
---|
2731 | * `formControl`, or control with `ngModel` that also has a `max` attribute.
|
---|
2732 | *
|
---|
2733 | * @see [Form Validation](guide/form-validation)
|
---|
2734 | *
|
---|
2735 | * @usageNotes
|
---|
2736 | *
|
---|
2737 | * ### Adding a max validator
|
---|
2738 | *
|
---|
2739 | * The following example shows how to add a max validator to an input attached to an
|
---|
2740 | * ngModel binding.
|
---|
2741 | *
|
---|
2742 | * ```html
|
---|
2743 | * <input type="number" ngModel max="4">
|
---|
2744 | * ```
|
---|
2745 | *
|
---|
2746 | * @ngModule ReactiveFormsModule
|
---|
2747 | * @ngModule FormsModule
|
---|
2748 | * @publicApi
|
---|
2749 | */
|
---|
2750 | export declare class MaxValidator extends AbstractValidatorDirective implements OnChanges {
|
---|
2751 | /**
|
---|
2752 | * @description
|
---|
2753 | * Tracks changes to the max bound to this directive.
|
---|
2754 | */
|
---|
2755 | max: string | number;
|
---|
2756 | /**
|
---|
2757 | * Declare `ngOnChanges` lifecycle hook at the main directive level (vs keeping it in base class)
|
---|
2758 | * to avoid differences in handling inheritance of lifecycle hooks between Ivy and ViewEngine in
|
---|
2759 | * AOT mode. This could be refactored once ViewEngine is removed.
|
---|
2760 | * @nodoc
|
---|
2761 | */
|
---|
2762 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2763 | }
|
---|
2764 |
|
---|
2765 | /**
|
---|
2766 | * A directive that adds minimum length validation to controls marked with the
|
---|
2767 | * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
|
---|
2768 | *
|
---|
2769 | * @see [Form Validation](guide/form-validation)
|
---|
2770 | *
|
---|
2771 | * @usageNotes
|
---|
2772 | *
|
---|
2773 | * ### Adding a minimum length validator
|
---|
2774 | *
|
---|
2775 | * The following example shows how to add a minimum length validator to an input attached to an
|
---|
2776 | * ngModel binding.
|
---|
2777 | *
|
---|
2778 | * ```html
|
---|
2779 | * <input name="firstName" ngModel minlength="4">
|
---|
2780 | * ```
|
---|
2781 | *
|
---|
2782 | * @ngModule ReactiveFormsModule
|
---|
2783 | * @ngModule FormsModule
|
---|
2784 | * @publicApi
|
---|
2785 | */
|
---|
2786 | export declare class MinLengthValidator implements Validator, OnChanges {
|
---|
2787 | private _validator;
|
---|
2788 | private _onChange?;
|
---|
2789 | /**
|
---|
2790 | * @description
|
---|
2791 | * Tracks changes to the minimum length bound to this directive.
|
---|
2792 | */
|
---|
2793 | minlength: string | number | null;
|
---|
2794 | /** @nodoc */
|
---|
2795 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2796 | /**
|
---|
2797 | * Method that validates whether the value meets a minimum length requirement.
|
---|
2798 | * Returns the validation result if enabled, otherwise null.
|
---|
2799 | * @nodoc
|
---|
2800 | */
|
---|
2801 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
2802 | /**
|
---|
2803 | * Registers a callback function to call when the validator inputs change.
|
---|
2804 | * @nodoc
|
---|
2805 | */
|
---|
2806 | registerOnValidatorChange(fn: () => void): void;
|
---|
2807 | private _createValidator;
|
---|
2808 | /** @nodoc */
|
---|
2809 | enabled(): boolean;
|
---|
2810 | }
|
---|
2811 |
|
---|
2812 | /**
|
---|
2813 | * A directive which installs the {@link MinValidator} for any `formControlName`,
|
---|
2814 | * `formControl`, or control with `ngModel` that also has a `min` attribute.
|
---|
2815 | *
|
---|
2816 | * @see [Form Validation](guide/form-validation)
|
---|
2817 | *
|
---|
2818 | * @usageNotes
|
---|
2819 | *
|
---|
2820 | * ### Adding a min validator
|
---|
2821 | *
|
---|
2822 | * The following example shows how to add a min validator to an input attached to an
|
---|
2823 | * ngModel binding.
|
---|
2824 | *
|
---|
2825 | * ```html
|
---|
2826 | * <input type="number" ngModel min="4">
|
---|
2827 | * ```
|
---|
2828 | *
|
---|
2829 | * @ngModule ReactiveFormsModule
|
---|
2830 | * @ngModule FormsModule
|
---|
2831 | * @publicApi
|
---|
2832 | */
|
---|
2833 | export declare class MinValidator extends AbstractValidatorDirective implements OnChanges {
|
---|
2834 | /**
|
---|
2835 | * @description
|
---|
2836 | * Tracks changes to the min bound to this directive.
|
---|
2837 | */
|
---|
2838 | min: string | number;
|
---|
2839 | /**
|
---|
2840 | * Declare `ngOnChanges` lifecycle hook at the main directive level (vs keeping it in base class)
|
---|
2841 | * to avoid differences in handling inheritance of lifecycle hooks between Ivy and ViewEngine in
|
---|
2842 | * AOT mode. This could be refactored once ViewEngine is removed.
|
---|
2843 | * @nodoc
|
---|
2844 | */
|
---|
2845 | ngOnChanges(changes: SimpleChanges): void;
|
---|
2846 | }
|
---|
2847 |
|
---|
2848 | /**
|
---|
2849 | * @description
|
---|
2850 | * An `InjectionToken` for registering additional asynchronous validators used with
|
---|
2851 | * `AbstractControl`s.
|
---|
2852 | *
|
---|
2853 | * @see `NG_VALIDATORS`
|
---|
2854 | *
|
---|
2855 | * @publicApi
|
---|
2856 | */
|
---|
2857 | export declare const NG_ASYNC_VALIDATORS: InjectionToken<(Function | Validator)[]>;
|
---|
2858 |
|
---|
2859 | /**
|
---|
2860 | * @description
|
---|
2861 | * An `InjectionToken` for registering additional synchronous validators used with
|
---|
2862 | * `AbstractControl`s.
|
---|
2863 | *
|
---|
2864 | * @see `NG_ASYNC_VALIDATORS`
|
---|
2865 | *
|
---|
2866 | * @usageNotes
|
---|
2867 | *
|
---|
2868 | * ### Providing a custom validator
|
---|
2869 | *
|
---|
2870 | * The following example registers a custom validator directive. Adding the validator to the
|
---|
2871 | * existing collection of validators requires the `multi: true` option.
|
---|
2872 | *
|
---|
2873 | * ```typescript
|
---|
2874 | * @Directive({
|
---|
2875 | * selector: '[customValidator]',
|
---|
2876 | * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
|
---|
2877 | * })
|
---|
2878 | * class CustomValidatorDirective implements Validator {
|
---|
2879 | * validate(control: AbstractControl): ValidationErrors | null {
|
---|
2880 | * return { 'custom': true };
|
---|
2881 | * }
|
---|
2882 | * }
|
---|
2883 | * ```
|
---|
2884 | *
|
---|
2885 | * @publicApi
|
---|
2886 | */
|
---|
2887 | export declare const NG_VALIDATORS: InjectionToken<(Function | Validator)[]>;
|
---|
2888 |
|
---|
2889 | /**
|
---|
2890 | * Used to provide a `ControlValueAccessor` for form controls.
|
---|
2891 | *
|
---|
2892 | * See `DefaultValueAccessor` for how to implement one.
|
---|
2893 | *
|
---|
2894 | * @publicApi
|
---|
2895 | */
|
---|
2896 | export declare const NG_VALUE_ACCESSOR: InjectionToken<readonly ControlValueAccessor[]>;
|
---|
2897 |
|
---|
2898 | /**
|
---|
2899 | * @description
|
---|
2900 | * A base class that all `FormControl`-based directives extend. It binds a `FormControl`
|
---|
2901 | * object to a DOM element.
|
---|
2902 | *
|
---|
2903 | * @publicApi
|
---|
2904 | */
|
---|
2905 | export declare abstract class NgControl extends AbstractControlDirective {
|
---|
2906 | /**
|
---|
2907 | * @description
|
---|
2908 | * The name for the control
|
---|
2909 | */
|
---|
2910 | name: string | number | null;
|
---|
2911 | /**
|
---|
2912 | * @description
|
---|
2913 | * The value accessor for the control
|
---|
2914 | */
|
---|
2915 | valueAccessor: ControlValueAccessor | null;
|
---|
2916 | /**
|
---|
2917 | * @description
|
---|
2918 | * The callback method to update the model from the view when requested
|
---|
2919 | *
|
---|
2920 | * @param newValue The new value for the view
|
---|
2921 | */
|
---|
2922 | abstract viewToModelUpdate(newValue: any): void;
|
---|
2923 | }
|
---|
2924 |
|
---|
2925 | /**
|
---|
2926 | * @description
|
---|
2927 | * Directive automatically applied to Angular form controls that sets CSS classes
|
---|
2928 | * based on control status.
|
---|
2929 | *
|
---|
2930 | * @usageNotes
|
---|
2931 | *
|
---|
2932 | * ### CSS classes applied
|
---|
2933 | *
|
---|
2934 | * The following classes are applied as the properties become true:
|
---|
2935 | *
|
---|
2936 | * * ng-valid
|
---|
2937 | * * ng-invalid
|
---|
2938 | * * ng-pending
|
---|
2939 | * * ng-pristine
|
---|
2940 | * * ng-dirty
|
---|
2941 | * * ng-untouched
|
---|
2942 | * * ng-touched
|
---|
2943 | *
|
---|
2944 | * @ngModule ReactiveFormsModule
|
---|
2945 | * @ngModule FormsModule
|
---|
2946 | * @publicApi
|
---|
2947 | */
|
---|
2948 | export declare class NgControlStatus extends ɵangular_packages_forms_forms_i {
|
---|
2949 | constructor(cd: NgControl);
|
---|
2950 | }
|
---|
2951 |
|
---|
2952 | /**
|
---|
2953 | * @description
|
---|
2954 | * Directive automatically applied to Angular form groups that sets CSS classes
|
---|
2955 | * based on control status (valid/invalid/dirty/etc). On groups, this includes the additional
|
---|
2956 | * class ng-submitted.
|
---|
2957 | *
|
---|
2958 | * @see `NgControlStatus`
|
---|
2959 | *
|
---|
2960 | * @ngModule ReactiveFormsModule
|
---|
2961 | * @ngModule FormsModule
|
---|
2962 | * @publicApi
|
---|
2963 | */
|
---|
2964 | export declare class NgControlStatusGroup extends ɵangular_packages_forms_forms_i {
|
---|
2965 | constructor(cd: ControlContainer);
|
---|
2966 | }
|
---|
2967 |
|
---|
2968 | /**
|
---|
2969 | * @description
|
---|
2970 | * Creates a top-level `FormGroup` instance and binds it to a form
|
---|
2971 | * to track aggregate form value and validation status.
|
---|
2972 | *
|
---|
2973 | * As soon as you import the `FormsModule`, this directive becomes active by default on
|
---|
2974 | * all `<form>` tags. You don't need to add a special selector.
|
---|
2975 | *
|
---|
2976 | * You optionally export the directive into a local template variable using `ngForm` as the key
|
---|
2977 | * (ex: `#myForm="ngForm"`). This is optional, but useful. Many properties from the underlying
|
---|
2978 | * `FormGroup` instance are duplicated on the directive itself, so a reference to it
|
---|
2979 | * gives you access to the aggregate value and validity status of the form, as well as
|
---|
2980 | * user interaction properties like `dirty` and `touched`.
|
---|
2981 | *
|
---|
2982 | * To register child controls with the form, use `NgModel` with a `name`
|
---|
2983 | * attribute. You may use `NgModelGroup` to create sub-groups within the form.
|
---|
2984 | *
|
---|
2985 | * If necessary, listen to the directive's `ngSubmit` event to be notified when the user has
|
---|
2986 | * triggered a form submission. The `ngSubmit` event emits the original form
|
---|
2987 | * submission event.
|
---|
2988 | *
|
---|
2989 | * In template driven forms, all `<form>` tags are automatically tagged as `NgForm`.
|
---|
2990 | * To import the `FormsModule` but skip its usage in some forms,
|
---|
2991 | * for example, to use native HTML5 validation, add the `ngNoForm` and the `<form>`
|
---|
2992 | * tags won't create an `NgForm` directive. In reactive forms, using `ngNoForm` is
|
---|
2993 | * unnecessary because the `<form>` tags are inert. In that case, you would
|
---|
2994 | * refrain from using the `formGroup` directive.
|
---|
2995 | *
|
---|
2996 | * @usageNotes
|
---|
2997 | *
|
---|
2998 | * ### Listening for form submission
|
---|
2999 | *
|
---|
3000 | * The following example shows how to capture the form values from the "ngSubmit" event.
|
---|
3001 | *
|
---|
3002 | * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
|
---|
3003 | *
|
---|
3004 | * ### Setting the update options
|
---|
3005 | *
|
---|
3006 | * The following example shows you how to change the "updateOn" option from its default using
|
---|
3007 | * ngFormOptions.
|
---|
3008 | *
|
---|
3009 | * ```html
|
---|
3010 | * <form [ngFormOptions]="{updateOn: 'blur'}">
|
---|
3011 | * <input name="one" ngModel> <!-- this ngModel will update on blur -->
|
---|
3012 | * </form>
|
---|
3013 | * ```
|
---|
3014 | *
|
---|
3015 | * ### Native DOM validation UI
|
---|
3016 | *
|
---|
3017 | * In order to prevent the native DOM form validation UI from interfering with Angular's form
|
---|
3018 | * validation, Angular automatically adds the `novalidate` attribute on any `<form>` whenever
|
---|
3019 | * `FormModule` or `ReactiveFormModule` are imported into the application.
|
---|
3020 | * If you want to explicitly enable native DOM validation UI with Angular forms, you can add the
|
---|
3021 | * `ngNativeValidate` attribute to the `<form>` element:
|
---|
3022 | *
|
---|
3023 | * ```html
|
---|
3024 | * <form ngNativeValidate>
|
---|
3025 | * ...
|
---|
3026 | * </form>
|
---|
3027 | * ```
|
---|
3028 | *
|
---|
3029 | * @ngModule FormsModule
|
---|
3030 | * @publicApi
|
---|
3031 | */
|
---|
3032 | export declare class NgForm extends ControlContainer implements Form, AfterViewInit {
|
---|
3033 | /**
|
---|
3034 | * @description
|
---|
3035 | * Returns whether the form submission has been triggered.
|
---|
3036 | */
|
---|
3037 | readonly submitted: boolean;
|
---|
3038 | private _directives;
|
---|
3039 | /**
|
---|
3040 | * @description
|
---|
3041 | * The `FormGroup` instance created for this form.
|
---|
3042 | */
|
---|
3043 | form: FormGroup;
|
---|
3044 | /**
|
---|
3045 | * @description
|
---|
3046 | * Event emitter for the "ngSubmit" event
|
---|
3047 | */
|
---|
3048 | ngSubmit: EventEmitter<any>;
|
---|
3049 | /**
|
---|
3050 | * @description
|
---|
3051 | * Tracks options for the `NgForm` instance.
|
---|
3052 | *
|
---|
3053 | * **updateOn**: Sets the default `updateOn` value for all child `NgModels` below it
|
---|
3054 | * unless explicitly set by a child `NgModel` using `ngModelOptions`). Defaults to 'change'.
|
---|
3055 | * Possible values: `'change'` | `'blur'` | `'submit'`.
|
---|
3056 | *
|
---|
3057 | */
|
---|
3058 | options: {
|
---|
3059 | updateOn?: FormHooks;
|
---|
3060 | };
|
---|
3061 | constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
|
---|
3062 | /** @nodoc */
|
---|
3063 | ngAfterViewInit(): void;
|
---|
3064 | /**
|
---|
3065 | * @description
|
---|
3066 | * The directive instance.
|
---|
3067 | */
|
---|
3068 | get formDirective(): Form;
|
---|
3069 | /**
|
---|
3070 | * @description
|
---|
3071 | * The internal `FormGroup` instance.
|
---|
3072 | */
|
---|
3073 | get control(): FormGroup;
|
---|
3074 | /**
|
---|
3075 | * @description
|
---|
3076 | * Returns an array representing the path to this group. Because this directive
|
---|
3077 | * always lives at the top level of a form, it is always an empty array.
|
---|
3078 | */
|
---|
3079 | get path(): string[];
|
---|
3080 | /**
|
---|
3081 | * @description
|
---|
3082 | * Returns a map of the controls in this group.
|
---|
3083 | */
|
---|
3084 | get controls(): {
|
---|
3085 | [key: string]: AbstractControl;
|
---|
3086 | };
|
---|
3087 | /**
|
---|
3088 | * @description
|
---|
3089 | * Method that sets up the control directive in this group, re-calculates its value
|
---|
3090 | * and validity, and adds the instance to the internal list of directives.
|
---|
3091 | *
|
---|
3092 | * @param dir The `NgModel` directive instance.
|
---|
3093 | */
|
---|
3094 | addControl(dir: NgModel): void;
|
---|
3095 | /**
|
---|
3096 | * @description
|
---|
3097 | * Retrieves the `FormControl` instance from the provided `NgModel` directive.
|
---|
3098 | *
|
---|
3099 | * @param dir The `NgModel` directive instance.
|
---|
3100 | */
|
---|
3101 | getControl(dir: NgModel): FormControl;
|
---|
3102 | /**
|
---|
3103 | * @description
|
---|
3104 | * Removes the `NgModel` instance from the internal list of directives
|
---|
3105 | *
|
---|
3106 | * @param dir The `NgModel` directive instance.
|
---|
3107 | */
|
---|
3108 | removeControl(dir: NgModel): void;
|
---|
3109 | /**
|
---|
3110 | * @description
|
---|
3111 | * Adds a new `NgModelGroup` directive instance to the form.
|
---|
3112 | *
|
---|
3113 | * @param dir The `NgModelGroup` directive instance.
|
---|
3114 | */
|
---|
3115 | addFormGroup(dir: NgModelGroup): void;
|
---|
3116 | /**
|
---|
3117 | * @description
|
---|
3118 | * Removes the `NgModelGroup` directive instance from the form.
|
---|
3119 | *
|
---|
3120 | * @param dir The `NgModelGroup` directive instance.
|
---|
3121 | */
|
---|
3122 | removeFormGroup(dir: NgModelGroup): void;
|
---|
3123 | /**
|
---|
3124 | * @description
|
---|
3125 | * Retrieves the `FormGroup` for a provided `NgModelGroup` directive instance
|
---|
3126 | *
|
---|
3127 | * @param dir The `NgModelGroup` directive instance.
|
---|
3128 | */
|
---|
3129 | getFormGroup(dir: NgModelGroup): FormGroup;
|
---|
3130 | /**
|
---|
3131 | * Sets the new value for the provided `NgControl` directive.
|
---|
3132 | *
|
---|
3133 | * @param dir The `NgControl` directive instance.
|
---|
3134 | * @param value The new value for the directive's control.
|
---|
3135 | */
|
---|
3136 | updateModel(dir: NgControl, value: any): void;
|
---|
3137 | /**
|
---|
3138 | * @description
|
---|
3139 | * Sets the value for this `FormGroup`.
|
---|
3140 | *
|
---|
3141 | * @param value The new value
|
---|
3142 | */
|
---|
3143 | setValue(value: {
|
---|
3144 | [key: string]: any;
|
---|
3145 | }): void;
|
---|
3146 | /**
|
---|
3147 | * @description
|
---|
3148 | * Method called when the "submit" event is triggered on the form.
|
---|
3149 | * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
|
---|
3150 | *
|
---|
3151 | * @param $event The "submit" event object
|
---|
3152 | */
|
---|
3153 | onSubmit($event: Event): boolean;
|
---|
3154 | /**
|
---|
3155 | * @description
|
---|
3156 | * Method called when the "reset" event is triggered on the form.
|
---|
3157 | */
|
---|
3158 | onReset(): void;
|
---|
3159 | /**
|
---|
3160 | * @description
|
---|
3161 | * Resets the form to an initial value and resets its submitted status.
|
---|
3162 | *
|
---|
3163 | * @param value The new value for the form.
|
---|
3164 | */
|
---|
3165 | resetForm(value?: any): void;
|
---|
3166 | private _setUpdateStrategy;
|
---|
3167 | }
|
---|
3168 |
|
---|
3169 | /**
|
---|
3170 | * @description
|
---|
3171 | * Creates a `FormControl` instance from a domain model and binds it
|
---|
3172 | * to a form control element.
|
---|
3173 | *
|
---|
3174 | * The `FormControl` instance tracks the value, user interaction, and
|
---|
3175 | * validation status of the control and keeps the view synced with the model. If used
|
---|
3176 | * within a parent form, the directive also registers itself with the form as a child
|
---|
3177 | * control.
|
---|
3178 | *
|
---|
3179 | * This directive is used by itself or as part of a larger form. Use the
|
---|
3180 | * `ngModel` selector to activate it.
|
---|
3181 | *
|
---|
3182 | * It accepts a domain model as an optional `Input`. If you have a one-way binding
|
---|
3183 | * to `ngModel` with `[]` syntax, changing the domain model's value in the component
|
---|
3184 | * class sets the value in the view. If you have a two-way binding with `[()]` syntax
|
---|
3185 | * (also known as 'banana-in-a-box syntax'), the value in the UI always syncs back to
|
---|
3186 | * the domain model in your class.
|
---|
3187 | *
|
---|
3188 | * To inspect the properties of the associated `FormControl` (like the validity state),
|
---|
3189 | * export the directive into a local template variable using `ngModel` as the key (ex:
|
---|
3190 | * `#myVar="ngModel"`). You can then access the control using the directive's `control` property.
|
---|
3191 | * However, the most commonly used properties (like `valid` and `dirty`) also exist on the control
|
---|
3192 | * for direct access. See a full list of properties directly available in
|
---|
3193 | * `AbstractControlDirective`.
|
---|
3194 | *
|
---|
3195 | * @see `RadioControlValueAccessor`
|
---|
3196 | * @see `SelectControlValueAccessor`
|
---|
3197 | *
|
---|
3198 | * @usageNotes
|
---|
3199 | *
|
---|
3200 | * ### Using ngModel on a standalone control
|
---|
3201 | *
|
---|
3202 | * The following examples show a simple standalone control using `ngModel`:
|
---|
3203 | *
|
---|
3204 | * {@example forms/ts/simpleNgModel/simple_ng_model_example.ts region='Component'}
|
---|
3205 | *
|
---|
3206 | * When using the `ngModel` within `<form>` tags, you'll also need to supply a `name` attribute
|
---|
3207 | * so that the control can be registered with the parent form under that name.
|
---|
3208 | *
|
---|
3209 | * In the context of a parent form, it's often unnecessary to include one-way or two-way binding,
|
---|
3210 | * as the parent form syncs the value for you. You access its properties by exporting it into a
|
---|
3211 | * local template variable using `ngForm` such as (`#f="ngForm"`). Use the variable where
|
---|
3212 | * needed on form submission.
|
---|
3213 | *
|
---|
3214 | * If you do need to populate initial values into your form, using a one-way binding for
|
---|
3215 | * `ngModel` tends to be sufficient as long as you use the exported form's value rather
|
---|
3216 | * than the domain model's value on submit.
|
---|
3217 | *
|
---|
3218 | * ### Using ngModel within a form
|
---|
3219 | *
|
---|
3220 | * The following example shows controls using `ngModel` within a form:
|
---|
3221 | *
|
---|
3222 | * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
|
---|
3223 | *
|
---|
3224 | * ### Using a standalone ngModel within a group
|
---|
3225 | *
|
---|
3226 | * The following example shows you how to use a standalone ngModel control
|
---|
3227 | * within a form. This controls the display of the form, but doesn't contain form data.
|
---|
3228 | *
|
---|
3229 | * ```html
|
---|
3230 | * <form>
|
---|
3231 | * <input name="login" ngModel placeholder="Login">
|
---|
3232 | * <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
|
---|
3233 | * </form>
|
---|
3234 | * <!-- form value: {login: ''} -->
|
---|
3235 | * ```
|
---|
3236 | *
|
---|
3237 | * ### Setting the ngModel `name` attribute through options
|
---|
3238 | *
|
---|
3239 | * The following example shows you an alternate way to set the name attribute. Here,
|
---|
3240 | * an attribute identified as name is used within a custom form control component. To still be able
|
---|
3241 | * to specify the NgModel's name, you must specify it using the `ngModelOptions` input instead.
|
---|
3242 | *
|
---|
3243 | * ```html
|
---|
3244 | * <form>
|
---|
3245 | * <my-custom-form-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
|
---|
3246 | * </my-custom-form-control>
|
---|
3247 | * </form>
|
---|
3248 | * <!-- form value: {user: ''} -->
|
---|
3249 | * ```
|
---|
3250 | *
|
---|
3251 | * @ngModule FormsModule
|
---|
3252 | * @publicApi
|
---|
3253 | */
|
---|
3254 | export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
|
---|
3255 | readonly control: FormControl;
|
---|
3256 | /** @nodoc */
|
---|
3257 | static ngAcceptInputType_isDisabled: boolean | string;
|
---|
3258 | /**
|
---|
3259 | * Internal reference to the view model value.
|
---|
3260 | * @nodoc
|
---|
3261 | */
|
---|
3262 | viewModel: any;
|
---|
3263 | /**
|
---|
3264 | * @description
|
---|
3265 | * Tracks the name bound to the directive. If a parent form exists, it
|
---|
3266 | * uses this name as a key to retrieve this control's value.
|
---|
3267 | */
|
---|
3268 | name: string;
|
---|
3269 | /**
|
---|
3270 | * @description
|
---|
3271 | * Tracks whether the control is disabled.
|
---|
3272 | */
|
---|
3273 | isDisabled: boolean;
|
---|
3274 | /**
|
---|
3275 | * @description
|
---|
3276 | * Tracks the value bound to this directive.
|
---|
3277 | */
|
---|
3278 | model: any;
|
---|
3279 | /**
|
---|
3280 | * @description
|
---|
3281 | * Tracks the configuration options for this `ngModel` instance.
|
---|
3282 | *
|
---|
3283 | * **name**: An alternative to setting the name attribute on the form control element. See
|
---|
3284 | * the [example](api/forms/NgModel#using-ngmodel-on-a-standalone-control) for using `NgModel`
|
---|
3285 | * as a standalone control.
|
---|
3286 | *
|
---|
3287 | * **standalone**: When set to true, the `ngModel` will not register itself with its parent form,
|
---|
3288 | * and acts as if it's not in the form. Defaults to false. If no parent form exists, this option
|
---|
3289 | * has no effect.
|
---|
3290 | *
|
---|
3291 | * **updateOn**: Defines the event upon which the form control value and validity update.
|
---|
3292 | * Defaults to 'change'. Possible values: `'change'` | `'blur'` | `'submit'`.
|
---|
3293 | *
|
---|
3294 | */
|
---|
3295 | options: {
|
---|
3296 | name?: string;
|
---|
3297 | standalone?: boolean;
|
---|
3298 | updateOn?: FormHooks;
|
---|
3299 | };
|
---|
3300 | /**
|
---|
3301 | * @description
|
---|
3302 | * Event emitter for producing the `ngModelChange` event after
|
---|
3303 | * the view model updates.
|
---|
3304 | */
|
---|
3305 | update: EventEmitter<any>;
|
---|
3306 | constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[]);
|
---|
3307 | /** @nodoc */
|
---|
3308 | ngOnChanges(changes: SimpleChanges): void;
|
---|
3309 | /** @nodoc */
|
---|
3310 | ngOnDestroy(): void;
|
---|
3311 | /**
|
---|
3312 | * @description
|
---|
3313 | * Returns an array that represents the path from the top-level form to this control.
|
---|
3314 | * Each index is the string name of the control on that level.
|
---|
3315 | */
|
---|
3316 | get path(): string[];
|
---|
3317 | /**
|
---|
3318 | * @description
|
---|
3319 | * The top-level directive for this control if present, otherwise null.
|
---|
3320 | */
|
---|
3321 | get formDirective(): any;
|
---|
3322 | /**
|
---|
3323 | * @description
|
---|
3324 | * Sets the new value for the view model and emits an `ngModelChange` event.
|
---|
3325 | *
|
---|
3326 | * @param newValue The new value emitted by `ngModelChange`.
|
---|
3327 | */
|
---|
3328 | viewToModelUpdate(newValue: any): void;
|
---|
3329 | private _setUpControl;
|
---|
3330 | private _setUpdateStrategy;
|
---|
3331 | private _isStandalone;
|
---|
3332 | private _setUpStandalone;
|
---|
3333 | private _checkForErrors;
|
---|
3334 | private _checkParentType;
|
---|
3335 | private _checkName;
|
---|
3336 | private _updateValue;
|
---|
3337 | private _updateDisabled;
|
---|
3338 | }
|
---|
3339 |
|
---|
3340 | /**
|
---|
3341 | * @description
|
---|
3342 | * Creates and binds a `FormGroup` instance to a DOM element.
|
---|
3343 | *
|
---|
3344 | * This directive can only be used as a child of `NgForm` (within `<form>` tags).
|
---|
3345 | *
|
---|
3346 | * Use this directive to validate a sub-group of your form separately from the
|
---|
3347 | * rest of your form, or if some values in your domain model make more sense
|
---|
3348 | * to consume together in a nested object.
|
---|
3349 | *
|
---|
3350 | * Provide a name for the sub-group and it will become the key
|
---|
3351 | * for the sub-group in the form's full value. If you need direct access, export the directive into
|
---|
3352 | * a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`).
|
---|
3353 | *
|
---|
3354 | * @usageNotes
|
---|
3355 | *
|
---|
3356 | * ### Consuming controls in a grouping
|
---|
3357 | *
|
---|
3358 | * The following example shows you how to combine controls together in a sub-group
|
---|
3359 | * of the form.
|
---|
3360 | *
|
---|
3361 | * {@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'}
|
---|
3362 | *
|
---|
3363 | * @ngModule FormsModule
|
---|
3364 | * @publicApi
|
---|
3365 | */
|
---|
3366 | export declare class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
|
---|
3367 | /**
|
---|
3368 | * @description
|
---|
3369 | * Tracks the name of the `NgModelGroup` bound to the directive. The name corresponds
|
---|
3370 | * to a key in the parent `NgForm`.
|
---|
3371 | */
|
---|
3372 | name: string;
|
---|
3373 | constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
|
---|
3374 | }
|
---|
3375 |
|
---|
3376 | /**
|
---|
3377 | * @description
|
---|
3378 | * Marks `<option>` as dynamic, so Angular can be notified when options change.
|
---|
3379 | *
|
---|
3380 | * @see `SelectControlValueAccessor`
|
---|
3381 | *
|
---|
3382 | * @ngModule ReactiveFormsModule
|
---|
3383 | * @ngModule FormsModule
|
---|
3384 | * @publicApi
|
---|
3385 | */
|
---|
3386 | export declare class NgSelectOption implements OnDestroy {
|
---|
3387 | private _element;
|
---|
3388 | private _renderer;
|
---|
3389 | private _select;
|
---|
3390 | /**
|
---|
3391 | * @description
|
---|
3392 | * ID of the option element
|
---|
3393 | */
|
---|
3394 | id: string;
|
---|
3395 | constructor(_element: ElementRef, _renderer: Renderer2, _select: SelectControlValueAccessor);
|
---|
3396 | /**
|
---|
3397 | * @description
|
---|
3398 | * Tracks the value bound to the option element. Unlike the value binding,
|
---|
3399 | * ngValue supports binding to objects.
|
---|
3400 | */
|
---|
3401 | set ngValue(value: any);
|
---|
3402 | /**
|
---|
3403 | * @description
|
---|
3404 | * Tracks simple string values bound to the option element.
|
---|
3405 | * For objects, use the `ngValue` input binding.
|
---|
3406 | */
|
---|
3407 | set value(value: any);
|
---|
3408 | /** @nodoc */
|
---|
3409 | ngOnDestroy(): void;
|
---|
3410 | }
|
---|
3411 |
|
---|
3412 | /**
|
---|
3413 | * @description
|
---|
3414 | * The `ControlValueAccessor` for writing a number value and listening to number input changes.
|
---|
3415 | * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
|
---|
3416 | * directives.
|
---|
3417 | *
|
---|
3418 | * @usageNotes
|
---|
3419 | *
|
---|
3420 | * ### Using a number input with a reactive form.
|
---|
3421 | *
|
---|
3422 | * The following example shows how to use a number input with a reactive form.
|
---|
3423 | *
|
---|
3424 | * ```ts
|
---|
3425 | * const totalCountControl = new FormControl();
|
---|
3426 | * ```
|
---|
3427 | *
|
---|
3428 | * ```
|
---|
3429 | * <input type="number" [formControl]="totalCountControl">
|
---|
3430 | * ```
|
---|
3431 | *
|
---|
3432 | * @ngModule ReactiveFormsModule
|
---|
3433 | * @ngModule FormsModule
|
---|
3434 | * @publicApi
|
---|
3435 | */
|
---|
3436 | export declare class NumberValueAccessor extends ɵangular_packages_forms_forms_g implements ControlValueAccessor {
|
---|
3437 | /**
|
---|
3438 | * Sets the "value" property on the input element.
|
---|
3439 | * @nodoc
|
---|
3440 | */
|
---|
3441 | writeValue(value: number): void;
|
---|
3442 | /**
|
---|
3443 | * Registers a function called when the control value changes.
|
---|
3444 | * @nodoc
|
---|
3445 | */
|
---|
3446 | registerOnChange(fn: (_: number | null) => void): void;
|
---|
3447 | }
|
---|
3448 |
|
---|
3449 | /**
|
---|
3450 | * @description
|
---|
3451 | * A directive that adds regex pattern validation to controls marked with the
|
---|
3452 | * `pattern` attribute. The regex must match the entire control value.
|
---|
3453 | * The directive is provided with the `NG_VALIDATORS` multi-provider list.
|
---|
3454 | *
|
---|
3455 | * @see [Form Validation](guide/form-validation)
|
---|
3456 | *
|
---|
3457 | * @usageNotes
|
---|
3458 | *
|
---|
3459 | * ### Adding a pattern validator
|
---|
3460 | *
|
---|
3461 | * The following example shows how to add a pattern validator to an input attached to an
|
---|
3462 | * ngModel binding.
|
---|
3463 | *
|
---|
3464 | * ```html
|
---|
3465 | * <input name="firstName" ngModel pattern="[a-zA-Z ]*">
|
---|
3466 | * ```
|
---|
3467 | *
|
---|
3468 | * @ngModule ReactiveFormsModule
|
---|
3469 | * @ngModule FormsModule
|
---|
3470 | * @publicApi
|
---|
3471 | */
|
---|
3472 | export declare class PatternValidator implements Validator, OnChanges {
|
---|
3473 | private _validator;
|
---|
3474 | private _onChange?;
|
---|
3475 | /**
|
---|
3476 | * @description
|
---|
3477 | * Tracks changes to the pattern bound to this directive.
|
---|
3478 | */
|
---|
3479 | pattern: string | RegExp;
|
---|
3480 | /** @nodoc */
|
---|
3481 | ngOnChanges(changes: SimpleChanges): void;
|
---|
3482 | /**
|
---|
3483 | * Method that validates whether the value matches the pattern requirement.
|
---|
3484 | * @nodoc
|
---|
3485 | */
|
---|
3486 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
3487 | /**
|
---|
3488 | * Registers a callback function to call when the validator inputs change.
|
---|
3489 | * @nodoc
|
---|
3490 | */
|
---|
3491 | registerOnValidatorChange(fn: () => void): void;
|
---|
3492 | private _createValidator;
|
---|
3493 | }
|
---|
3494 |
|
---|
3495 | /**
|
---|
3496 | * @description
|
---|
3497 | * The `ControlValueAccessor` for writing radio control values and listening to radio control
|
---|
3498 | * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
|
---|
3499 | * `NgModel` directives.
|
---|
3500 | *
|
---|
3501 | * @usageNotes
|
---|
3502 | *
|
---|
3503 | * ### Using radio buttons with reactive form directives
|
---|
3504 | *
|
---|
3505 | * The follow example shows how to use radio buttons in a reactive form. When using radio buttons in
|
---|
3506 | * a reactive form, radio buttons in the same group should have the same `formControlName`.
|
---|
3507 | * Providing a `name` attribute is optional.
|
---|
3508 | *
|
---|
3509 | * {@example forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts region='Reactive'}
|
---|
3510 | *
|
---|
3511 | * @ngModule ReactiveFormsModule
|
---|
3512 | * @ngModule FormsModule
|
---|
3513 | * @publicApi
|
---|
3514 | */
|
---|
3515 | export declare class RadioControlValueAccessor extends ɵangular_packages_forms_forms_g implements ControlValueAccessor, OnDestroy, OnInit {
|
---|
3516 | private _registry;
|
---|
3517 | private _injector;
|
---|
3518 | /**
|
---|
3519 | * The registered callback function called when a change event occurs on the input element.
|
---|
3520 | * Note: we declare `onChange` here (also used as host listener) as a function with no arguments
|
---|
3521 | * to override the `onChange` function (which expects 1 argument) in the parent
|
---|
3522 | * `BaseControlValueAccessor` class.
|
---|
3523 | * @nodoc
|
---|
3524 | */
|
---|
3525 | onChange: () => void;
|
---|
3526 | /**
|
---|
3527 | * @description
|
---|
3528 | * Tracks the name of the radio input element.
|
---|
3529 | */
|
---|
3530 | name: string;
|
---|
3531 | /**
|
---|
3532 | * @description
|
---|
3533 | * Tracks the name of the `FormControl` bound to the directive. The name corresponds
|
---|
3534 | * to a key in the parent `FormGroup` or `FormArray`.
|
---|
3535 | */
|
---|
3536 | formControlName: string;
|
---|
3537 | /**
|
---|
3538 | * @description
|
---|
3539 | * Tracks the value of the radio input element
|
---|
3540 | */
|
---|
3541 | value: any;
|
---|
3542 | constructor(renderer: Renderer2, elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_r, _injector: Injector);
|
---|
3543 | /** @nodoc */
|
---|
3544 | ngOnInit(): void;
|
---|
3545 | /** @nodoc */
|
---|
3546 | ngOnDestroy(): void;
|
---|
3547 | /**
|
---|
3548 | * Sets the "checked" property value on the radio input element.
|
---|
3549 | * @nodoc
|
---|
3550 | */
|
---|
3551 | writeValue(value: any): void;
|
---|
3552 | /**
|
---|
3553 | * Registers a function called when the control value changes.
|
---|
3554 | * @nodoc
|
---|
3555 | */
|
---|
3556 | registerOnChange(fn: (_: any) => {}): void;
|
---|
3557 | /**
|
---|
3558 | * Sets the "value" on the radio input element and unchecks it.
|
---|
3559 | *
|
---|
3560 | * @param value
|
---|
3561 | */
|
---|
3562 | fireUncheck(value: any): void;
|
---|
3563 | private _checkName;
|
---|
3564 | }
|
---|
3565 |
|
---|
3566 | /**
|
---|
3567 | * @description
|
---|
3568 | * The `ControlValueAccessor` for writing a range value and listening to range input changes.
|
---|
3569 | * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
|
---|
3570 | * directives.
|
---|
3571 | *
|
---|
3572 | * @usageNotes
|
---|
3573 | *
|
---|
3574 | * ### Using a range input with a reactive form
|
---|
3575 | *
|
---|
3576 | * The following example shows how to use a range input with a reactive form.
|
---|
3577 | *
|
---|
3578 | * ```ts
|
---|
3579 | * const ageControl = new FormControl();
|
---|
3580 | * ```
|
---|
3581 | *
|
---|
3582 | * ```
|
---|
3583 | * <input type="range" [formControl]="ageControl">
|
---|
3584 | * ```
|
---|
3585 | *
|
---|
3586 | * @ngModule ReactiveFormsModule
|
---|
3587 | * @ngModule FormsModule
|
---|
3588 | * @publicApi
|
---|
3589 | */
|
---|
3590 | export declare class RangeValueAccessor extends ɵangular_packages_forms_forms_g implements ControlValueAccessor {
|
---|
3591 | /**
|
---|
3592 | * Sets the "value" property on the input element.
|
---|
3593 | * @nodoc
|
---|
3594 | */
|
---|
3595 | writeValue(value: any): void;
|
---|
3596 | /**
|
---|
3597 | * Registers a function called when the control value changes.
|
---|
3598 | * @nodoc
|
---|
3599 | */
|
---|
3600 | registerOnChange(fn: (_: number | null) => void): void;
|
---|
3601 | }
|
---|
3602 |
|
---|
3603 | /**
|
---|
3604 | * Exports the required infrastructure and directives for reactive forms,
|
---|
3605 | * making them available for import by NgModules that import this module.
|
---|
3606 | *
|
---|
3607 | * Providers associated with this module:
|
---|
3608 | * * `FormBuilder`
|
---|
3609 | * * `RadioControlRegistry`
|
---|
3610 | *
|
---|
3611 | * @see [Forms Overview](guide/forms-overview)
|
---|
3612 | * @see [Reactive Forms Guide](guide/reactive-forms)
|
---|
3613 | *
|
---|
3614 | * @publicApi
|
---|
3615 | */
|
---|
3616 | export declare class ReactiveFormsModule {
|
---|
3617 | /**
|
---|
3618 | * @description
|
---|
3619 | * Provides options for configuring the reactive forms module.
|
---|
3620 | *
|
---|
3621 | * @param opts An object of configuration options
|
---|
3622 | * * `warnOnNgModelWithFormControl` Configures when to emit a warning when an `ngModel`
|
---|
3623 | * binding is used with reactive form directives.
|
---|
3624 | */
|
---|
3625 | static withConfig(opts: {
|
---|
3626 | /** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never' | 'once' | 'always';
|
---|
3627 | }): ModuleWithProviders<ReactiveFormsModule>;
|
---|
3628 | }
|
---|
3629 |
|
---|
3630 | /**
|
---|
3631 | * @description
|
---|
3632 | * A directive that adds the `required` validator to any controls marked with the
|
---|
3633 | * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
|
---|
3634 | *
|
---|
3635 | * @see [Form Validation](guide/form-validation)
|
---|
3636 | *
|
---|
3637 | * @usageNotes
|
---|
3638 | *
|
---|
3639 | * ### Adding a required validator using template-driven forms
|
---|
3640 | *
|
---|
3641 | * ```
|
---|
3642 | * <input name="fullName" ngModel required>
|
---|
3643 | * ```
|
---|
3644 | *
|
---|
3645 | * @ngModule FormsModule
|
---|
3646 | * @ngModule ReactiveFormsModule
|
---|
3647 | * @publicApi
|
---|
3648 | */
|
---|
3649 | export declare class RequiredValidator implements Validator {
|
---|
3650 | private _required;
|
---|
3651 | private _onChange?;
|
---|
3652 | /**
|
---|
3653 | * @description
|
---|
3654 | * Tracks changes to the required attribute bound to this directive.
|
---|
3655 | */
|
---|
3656 | get required(): boolean | string;
|
---|
3657 | set required(value: boolean | string);
|
---|
3658 | /**
|
---|
3659 | * Method that validates whether the control is empty.
|
---|
3660 | * Returns the validation result if enabled, otherwise null.
|
---|
3661 | * @nodoc
|
---|
3662 | */
|
---|
3663 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
3664 | /**
|
---|
3665 | * Registers a callback function to call when the validator inputs change.
|
---|
3666 | * @nodoc
|
---|
3667 | */
|
---|
3668 | registerOnValidatorChange(fn: () => void): void;
|
---|
3669 | }
|
---|
3670 |
|
---|
3671 | /**
|
---|
3672 | * @description
|
---|
3673 | * The `ControlValueAccessor` for writing select control values and listening to select control
|
---|
3674 | * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
|
---|
3675 | * `NgModel` directives.
|
---|
3676 | *
|
---|
3677 | * @usageNotes
|
---|
3678 | *
|
---|
3679 | * ### Using select controls in a reactive form
|
---|
3680 | *
|
---|
3681 | * The following examples show how to use a select control in a reactive form.
|
---|
3682 | *
|
---|
3683 | * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
|
---|
3684 | *
|
---|
3685 | * ### Using select controls in a template-driven form
|
---|
3686 | *
|
---|
3687 | * To use a select in a template-driven form, simply add an `ngModel` and a `name`
|
---|
3688 | * attribute to the main `<select>` tag.
|
---|
3689 | *
|
---|
3690 | * {@example forms/ts/selectControl/select_control_example.ts region='Component'}
|
---|
3691 | *
|
---|
3692 | * ### Customizing option selection
|
---|
3693 | *
|
---|
3694 | * Angular uses object identity to select option. It's possible for the identities of items
|
---|
3695 | * to change while the data does not. This can happen, for example, if the items are produced
|
---|
3696 | * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
|
---|
3697 | * second response will produce objects with different identities.
|
---|
3698 | *
|
---|
3699 | * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
|
---|
3700 | * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
|
---|
3701 | * If `compareWith` is given, Angular selects option by the return value of the function.
|
---|
3702 | *
|
---|
3703 | * ```ts
|
---|
3704 | * const selectedCountriesControl = new FormControl();
|
---|
3705 | * ```
|
---|
3706 | *
|
---|
3707 | * ```
|
---|
3708 | * <select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
|
---|
3709 | * <option *ngFor="let country of countries" [ngValue]="country">
|
---|
3710 | * {{country.name}}
|
---|
3711 | * </option>
|
---|
3712 | * </select>
|
---|
3713 | *
|
---|
3714 | * compareFn(c1: Country, c2: Country): boolean {
|
---|
3715 | * return c1 && c2 ? c1.id === c2.id : c1 === c2;
|
---|
3716 | * }
|
---|
3717 | * ```
|
---|
3718 | *
|
---|
3719 | * **Note:** We listen to the 'change' event because 'input' events aren't fired
|
---|
3720 | * for selects in IE, see:
|
---|
3721 | * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility
|
---|
3722 | *
|
---|
3723 | * @ngModule ReactiveFormsModule
|
---|
3724 | * @ngModule FormsModule
|
---|
3725 | * @publicApi
|
---|
3726 | */
|
---|
3727 | export declare class SelectControlValueAccessor extends ɵangular_packages_forms_forms_g implements ControlValueAccessor {
|
---|
3728 | /** @nodoc */
|
---|
3729 | value: any;
|
---|
3730 | /**
|
---|
3731 | * @description
|
---|
3732 | * Tracks the option comparison algorithm for tracking identities when
|
---|
3733 | * checking for changes.
|
---|
3734 | */
|
---|
3735 | set compareWith(fn: (o1: any, o2: any) => boolean);
|
---|
3736 | private _compareWith;
|
---|
3737 | /**
|
---|
3738 | * Sets the "value" property on the input element. The "selectedIndex"
|
---|
3739 | * property is also set if an ID is provided on the option element.
|
---|
3740 | * @nodoc
|
---|
3741 | */
|
---|
3742 | writeValue(value: any): void;
|
---|
3743 | /**
|
---|
3744 | * Registers a function called when the control value changes.
|
---|
3745 | * @nodoc
|
---|
3746 | */
|
---|
3747 | registerOnChange(fn: (value: any) => any): void;
|
---|
3748 | }
|
---|
3749 |
|
---|
3750 | /**
|
---|
3751 | * @description
|
---|
3752 | * The `ControlValueAccessor` for writing multi-select control values and listening to multi-select
|
---|
3753 | * control changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
|
---|
3754 | * `NgModel` directives.
|
---|
3755 | *
|
---|
3756 | * @see `SelectControlValueAccessor`
|
---|
3757 | *
|
---|
3758 | * @usageNotes
|
---|
3759 | *
|
---|
3760 | * ### Using a multi-select control
|
---|
3761 | *
|
---|
3762 | * The follow example shows you how to use a multi-select control with a reactive form.
|
---|
3763 | *
|
---|
3764 | * ```ts
|
---|
3765 | * const countryControl = new FormControl();
|
---|
3766 | * ```
|
---|
3767 | *
|
---|
3768 | * ```
|
---|
3769 | * <select multiple name="countries" [formControl]="countryControl">
|
---|
3770 | * <option *ngFor="let country of countries" [ngValue]="country">
|
---|
3771 | * {{ country.name }}
|
---|
3772 | * </option>
|
---|
3773 | * </select>
|
---|
3774 | * ```
|
---|
3775 | *
|
---|
3776 | * ### Customizing option selection
|
---|
3777 | *
|
---|
3778 | * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
|
---|
3779 | * See the `SelectControlValueAccessor` for usage.
|
---|
3780 | *
|
---|
3781 | * @ngModule ReactiveFormsModule
|
---|
3782 | * @ngModule FormsModule
|
---|
3783 | * @publicApi
|
---|
3784 | */
|
---|
3785 | export declare class SelectMultipleControlValueAccessor extends ɵangular_packages_forms_forms_g implements ControlValueAccessor {
|
---|
3786 | /**
|
---|
3787 | * The current value.
|
---|
3788 | * @nodoc
|
---|
3789 | */
|
---|
3790 | value: any;
|
---|
3791 | /**
|
---|
3792 | * @description
|
---|
3793 | * Tracks the option comparison algorithm for tracking identities when
|
---|
3794 | * checking for changes.
|
---|
3795 | */
|
---|
3796 | set compareWith(fn: (o1: any, o2: any) => boolean);
|
---|
3797 | private _compareWith;
|
---|
3798 | /**
|
---|
3799 | * Sets the "value" property on one or of more of the select's options.
|
---|
3800 | * @nodoc
|
---|
3801 | */
|
---|
3802 | writeValue(value: any): void;
|
---|
3803 | /**
|
---|
3804 | * Registers a function called when the control value changes
|
---|
3805 | * and writes an array of the selected options.
|
---|
3806 | * @nodoc
|
---|
3807 | */
|
---|
3808 | registerOnChange(fn: (value: any) => any): void;
|
---|
3809 | }
|
---|
3810 |
|
---|
3811 | /**
|
---|
3812 | * @description
|
---|
3813 | * Defines the map of errors returned from failed validation checks.
|
---|
3814 | *
|
---|
3815 | * @publicApi
|
---|
3816 | */
|
---|
3817 | export declare type ValidationErrors = {
|
---|
3818 | [key: string]: any;
|
---|
3819 | };
|
---|
3820 |
|
---|
3821 | /**
|
---|
3822 | * @description
|
---|
3823 | * An interface implemented by classes that perform synchronous validation.
|
---|
3824 | *
|
---|
3825 | * @usageNotes
|
---|
3826 | *
|
---|
3827 | * ### Provide a custom validator
|
---|
3828 | *
|
---|
3829 | * The following example implements the `Validator` interface to create a
|
---|
3830 | * validator directive with a custom error key.
|
---|
3831 | *
|
---|
3832 | * ```typescript
|
---|
3833 | * @Directive({
|
---|
3834 | * selector: '[customValidator]',
|
---|
3835 | * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
|
---|
3836 | * })
|
---|
3837 | * class CustomValidatorDirective implements Validator {
|
---|
3838 | * validate(control: AbstractControl): ValidationErrors|null {
|
---|
3839 | * return {'custom': true};
|
---|
3840 | * }
|
---|
3841 | * }
|
---|
3842 | * ```
|
---|
3843 | *
|
---|
3844 | * @publicApi
|
---|
3845 | */
|
---|
3846 | export declare interface Validator {
|
---|
3847 | /**
|
---|
3848 | * @description
|
---|
3849 | * Method that performs synchronous validation against the provided control.
|
---|
3850 | *
|
---|
3851 | * @param control The control to validate against.
|
---|
3852 | *
|
---|
3853 | * @returns A map of validation errors if validation fails,
|
---|
3854 | * otherwise null.
|
---|
3855 | */
|
---|
3856 | validate(control: AbstractControl): ValidationErrors | null;
|
---|
3857 | /**
|
---|
3858 | * @description
|
---|
3859 | * Registers a callback function to call when the validator inputs change.
|
---|
3860 | *
|
---|
3861 | * @param fn The callback function
|
---|
3862 | */
|
---|
3863 | registerOnValidatorChange?(fn: () => void): void;
|
---|
3864 | }
|
---|
3865 |
|
---|
3866 | /**
|
---|
3867 | * @description
|
---|
3868 | * A function that receives a control and synchronously returns a map of
|
---|
3869 | * validation errors if present, otherwise null.
|
---|
3870 | *
|
---|
3871 | * @publicApi
|
---|
3872 | */
|
---|
3873 | export declare interface ValidatorFn {
|
---|
3874 | (control: AbstractControl): ValidationErrors | null;
|
---|
3875 | }
|
---|
3876 |
|
---|
3877 | /**
|
---|
3878 | * @description
|
---|
3879 | * Provides a set of built-in validators that can be used by form controls.
|
---|
3880 | *
|
---|
3881 | * A validator is a function that processes a `FormControl` or collection of
|
---|
3882 | * controls and returns an error map or null. A null map means that validation has passed.
|
---|
3883 | *
|
---|
3884 | * @see [Form Validation](/guide/form-validation)
|
---|
3885 | *
|
---|
3886 | * @publicApi
|
---|
3887 | */
|
---|
3888 | export declare class Validators {
|
---|
3889 | /**
|
---|
3890 | * @description
|
---|
3891 | * Validator that requires the control's value to be greater than or equal to the provided number.
|
---|
3892 | *
|
---|
3893 | * @usageNotes
|
---|
3894 | *
|
---|
3895 | * ### Validate against a minimum of 3
|
---|
3896 | *
|
---|
3897 | * ```typescript
|
---|
3898 | * const control = new FormControl(2, Validators.min(3));
|
---|
3899 | *
|
---|
3900 | * console.log(control.errors); // {min: {min: 3, actual: 2}}
|
---|
3901 | * ```
|
---|
3902 | *
|
---|
3903 | * @returns A validator function that returns an error map with the
|
---|
3904 | * `min` property if the validation check fails, otherwise `null`.
|
---|
3905 | *
|
---|
3906 | * @see `updateValueAndValidity()`
|
---|
3907 | *
|
---|
3908 | */
|
---|
3909 | static min(min: number): ValidatorFn;
|
---|
3910 | /**
|
---|
3911 | * @description
|
---|
3912 | * Validator that requires the control's value to be less than or equal to the provided number.
|
---|
3913 | *
|
---|
3914 | * @usageNotes
|
---|
3915 | *
|
---|
3916 | * ### Validate against a maximum of 15
|
---|
3917 | *
|
---|
3918 | * ```typescript
|
---|
3919 | * const control = new FormControl(16, Validators.max(15));
|
---|
3920 | *
|
---|
3921 | * console.log(control.errors); // {max: {max: 15, actual: 16}}
|
---|
3922 | * ```
|
---|
3923 | *
|
---|
3924 | * @returns A validator function that returns an error map with the
|
---|
3925 | * `max` property if the validation check fails, otherwise `null`.
|
---|
3926 | *
|
---|
3927 | * @see `updateValueAndValidity()`
|
---|
3928 | *
|
---|
3929 | */
|
---|
3930 | static max(max: number): ValidatorFn;
|
---|
3931 | /**
|
---|
3932 | * @description
|
---|
3933 | * Validator that requires the control have a non-empty value.
|
---|
3934 | *
|
---|
3935 | * @usageNotes
|
---|
3936 | *
|
---|
3937 | * ### Validate that the field is non-empty
|
---|
3938 | *
|
---|
3939 | * ```typescript
|
---|
3940 | * const control = new FormControl('', Validators.required);
|
---|
3941 | *
|
---|
3942 | * console.log(control.errors); // {required: true}
|
---|
3943 | * ```
|
---|
3944 | *
|
---|
3945 | * @returns An error map with the `required` property
|
---|
3946 | * if the validation check fails, otherwise `null`.
|
---|
3947 | *
|
---|
3948 | * @see `updateValueAndValidity()`
|
---|
3949 | *
|
---|
3950 | */
|
---|
3951 | static required(control: AbstractControl): ValidationErrors | null;
|
---|
3952 | /**
|
---|
3953 | * @description
|
---|
3954 | * Validator that requires the control's value be true. This validator is commonly
|
---|
3955 | * used for required checkboxes.
|
---|
3956 | *
|
---|
3957 | * @usageNotes
|
---|
3958 | *
|
---|
3959 | * ### Validate that the field value is true
|
---|
3960 | *
|
---|
3961 | * ```typescript
|
---|
3962 | * const control = new FormControl('', Validators.requiredTrue);
|
---|
3963 | *
|
---|
3964 | * console.log(control.errors); // {required: true}
|
---|
3965 | * ```
|
---|
3966 | *
|
---|
3967 | * @returns An error map that contains the `required` property
|
---|
3968 | * set to `true` if the validation check fails, otherwise `null`.
|
---|
3969 | *
|
---|
3970 | * @see `updateValueAndValidity()`
|
---|
3971 | *
|
---|
3972 | */
|
---|
3973 | static requiredTrue(control: AbstractControl): ValidationErrors | null;
|
---|
3974 | /**
|
---|
3975 | * @description
|
---|
3976 | * Validator that requires the control's value pass an email validation test.
|
---|
3977 | *
|
---|
3978 | * Tests the value using a [regular
|
---|
3979 | * expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
|
---|
3980 | * pattern suitable for common usecases. The pattern is based on the definition of a valid email
|
---|
3981 | * address in the [WHATWG HTML
|
---|
3982 | * specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with
|
---|
3983 | * some enhancements to incorporate more RFC rules (such as rules related to domain names and the
|
---|
3984 | * lengths of different parts of the address).
|
---|
3985 | *
|
---|
3986 | * The differences from the WHATWG version include:
|
---|
3987 | * - Disallow `local-part` (the part before the `@` symbol) to begin or end with a period (`.`).
|
---|
3988 | * - Disallow `local-part` to be longer than 64 characters.
|
---|
3989 | * - Disallow the whole address to be longer than 254 characters.
|
---|
3990 | *
|
---|
3991 | * If this pattern does not satisfy your business needs, you can use `Validators.pattern()` to
|
---|
3992 | * validate the value against a different pattern.
|
---|
3993 | *
|
---|
3994 | * @usageNotes
|
---|
3995 | *
|
---|
3996 | * ### Validate that the field matches a valid email pattern
|
---|
3997 | *
|
---|
3998 | * ```typescript
|
---|
3999 | * const control = new FormControl('bad@', Validators.email);
|
---|
4000 | *
|
---|
4001 | * console.log(control.errors); // {email: true}
|
---|
4002 | * ```
|
---|
4003 | *
|
---|
4004 | * @returns An error map with the `email` property
|
---|
4005 | * if the validation check fails, otherwise `null`.
|
---|
4006 | *
|
---|
4007 | * @see `updateValueAndValidity()`
|
---|
4008 | *
|
---|
4009 | */
|
---|
4010 | static email(control: AbstractControl): ValidationErrors | null;
|
---|
4011 | /**
|
---|
4012 | * @description
|
---|
4013 | * Validator that requires the length of the control's value to be greater than or equal
|
---|
4014 | * to the provided minimum length. This validator is also provided by default if you use the
|
---|
4015 | * the HTML5 `minlength` attribute. Note that the `minLength` validator is intended to be used
|
---|
4016 | * only for types that have a numeric `length` property, such as strings or arrays. The
|
---|
4017 | * `minLength` validator logic is also not invoked for values when their `length` property is 0
|
---|
4018 | * (for example in case of an empty string or an empty array), to support optional controls. You
|
---|
4019 | * can use the standard `required` validator if empty values should not be considered valid.
|
---|
4020 | *
|
---|
4021 | * @usageNotes
|
---|
4022 | *
|
---|
4023 | * ### Validate that the field has a minimum of 3 characters
|
---|
4024 | *
|
---|
4025 | * ```typescript
|
---|
4026 | * const control = new FormControl('ng', Validators.minLength(3));
|
---|
4027 | *
|
---|
4028 | * console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
|
---|
4029 | * ```
|
---|
4030 | *
|
---|
4031 | * ```html
|
---|
4032 | * <input minlength="5">
|
---|
4033 | * ```
|
---|
4034 | *
|
---|
4035 | * @returns A validator function that returns an error map with the
|
---|
4036 | * `minlength` property if the validation check fails, otherwise `null`.
|
---|
4037 | *
|
---|
4038 | * @see `updateValueAndValidity()`
|
---|
4039 | *
|
---|
4040 | */
|
---|
4041 | static minLength(minLength: number): ValidatorFn;
|
---|
4042 | /**
|
---|
4043 | * @description
|
---|
4044 | * Validator that requires the length of the control's value to be less than or equal
|
---|
4045 | * to the provided maximum length. This validator is also provided by default if you use the
|
---|
4046 | * the HTML5 `maxlength` attribute. Note that the `maxLength` validator is intended to be used
|
---|
4047 | * only for types that have a numeric `length` property, such as strings or arrays.
|
---|
4048 | *
|
---|
4049 | * @usageNotes
|
---|
4050 | *
|
---|
4051 | * ### Validate that the field has maximum of 5 characters
|
---|
4052 | *
|
---|
4053 | * ```typescript
|
---|
4054 | * const control = new FormControl('Angular', Validators.maxLength(5));
|
---|
4055 | *
|
---|
4056 | * console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
|
---|
4057 | * ```
|
---|
4058 | *
|
---|
4059 | * ```html
|
---|
4060 | * <input maxlength="5">
|
---|
4061 | * ```
|
---|
4062 | *
|
---|
4063 | * @returns A validator function that returns an error map with the
|
---|
4064 | * `maxlength` property if the validation check fails, otherwise `null`.
|
---|
4065 | *
|
---|
4066 | * @see `updateValueAndValidity()`
|
---|
4067 | *
|
---|
4068 | */
|
---|
4069 | static maxLength(maxLength: number): ValidatorFn;
|
---|
4070 | /**
|
---|
4071 | * @description
|
---|
4072 | * Validator that requires the control's value to match a regex pattern. This validator is also
|
---|
4073 | * provided by default if you use the HTML5 `pattern` attribute.
|
---|
4074 | *
|
---|
4075 | * @usageNotes
|
---|
4076 | *
|
---|
4077 | * ### Validate that the field only contains letters or spaces
|
---|
4078 | *
|
---|
4079 | * ```typescript
|
---|
4080 | * const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
|
---|
4081 | *
|
---|
4082 | * console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
|
---|
4083 | * ```
|
---|
4084 | *
|
---|
4085 | * ```html
|
---|
4086 | * <input pattern="[a-zA-Z ]*">
|
---|
4087 | * ```
|
---|
4088 | *
|
---|
4089 | * ### Pattern matching with the global or sticky flag
|
---|
4090 | *
|
---|
4091 | * `RegExp` objects created with the `g` or `y` flags that are passed into `Validators.pattern`
|
---|
4092 | * can produce different results on the same input when validations are run consecutively. This is
|
---|
4093 | * due to how the behavior of `RegExp.prototype.test` is
|
---|
4094 | * specified in [ECMA-262](https://tc39.es/ecma262/#sec-regexpbuiltinexec)
|
---|
4095 | * (`RegExp` preserves the index of the last match when the global or sticky flag is used).
|
---|
4096 | * Due to this behavior, it is recommended that when using
|
---|
4097 | * `Validators.pattern` you **do not** pass in a `RegExp` object with either the global or sticky
|
---|
4098 | * flag enabled.
|
---|
4099 | *
|
---|
4100 | * ```typescript
|
---|
4101 | * // Not recommended (since the `g` flag is used)
|
---|
4102 | * const controlOne = new FormControl('1', Validators.pattern(/foo/g));
|
---|
4103 | *
|
---|
4104 | * // Good
|
---|
4105 | * const controlTwo = new FormControl('1', Validators.pattern(/foo/));
|
---|
4106 | * ```
|
---|
4107 | *
|
---|
4108 | * @param pattern A regular expression to be used as is to test the values, or a string.
|
---|
4109 | * If a string is passed, the `^` character is prepended and the `$` character is
|
---|
4110 | * appended to the provided string (if not already present), and the resulting regular
|
---|
4111 | * expression is used to test the values.
|
---|
4112 | *
|
---|
4113 | * @returns A validator function that returns an error map with the
|
---|
4114 | * `pattern` property if the validation check fails, otherwise `null`.
|
---|
4115 | *
|
---|
4116 | * @see `updateValueAndValidity()`
|
---|
4117 | *
|
---|
4118 | */
|
---|
4119 | static pattern(pattern: string | RegExp): ValidatorFn;
|
---|
4120 | /**
|
---|
4121 | * @description
|
---|
4122 | * Validator that performs no operation.
|
---|
4123 | *
|
---|
4124 | * @see `updateValueAndValidity()`
|
---|
4125 | *
|
---|
4126 | */
|
---|
4127 | static nullValidator(control: AbstractControl): ValidationErrors | null;
|
---|
4128 | /**
|
---|
4129 | * @description
|
---|
4130 | * Compose multiple validators into a single function that returns the union
|
---|
4131 | * of the individual error maps for the provided control.
|
---|
4132 | *
|
---|
4133 | * @returns A validator function that returns an error map with the
|
---|
4134 | * merged error maps of the validators if the validation check fails, otherwise `null`.
|
---|
4135 | *
|
---|
4136 | * @see `updateValueAndValidity()`
|
---|
4137 | *
|
---|
4138 | */
|
---|
4139 | static compose(validators: null): null;
|
---|
4140 | static compose(validators: (ValidatorFn | null | undefined)[]): ValidatorFn | null;
|
---|
4141 | /**
|
---|
4142 | * @description
|
---|
4143 | * Compose multiple async validators into a single function that returns the union
|
---|
4144 | * of the individual error objects for the provided control.
|
---|
4145 | *
|
---|
4146 | * @returns A validator function that returns an error map with the
|
---|
4147 | * merged error objects of the async validators if the validation check fails, otherwise `null`.
|
---|
4148 | *
|
---|
4149 | * @see `updateValueAndValidity()`
|
---|
4150 | *
|
---|
4151 | */
|
---|
4152 | static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null;
|
---|
4153 | }
|
---|
4154 |
|
---|
4155 | /**
|
---|
4156 | * @publicApi
|
---|
4157 | */
|
---|
4158 | export declare const VERSION: Version;
|
---|
4159 |
|
---|
4160 | export declare const ɵangular_packages_forms_forms_a: Type<any>[];
|
---|
4161 |
|
---|
4162 | export declare const ɵangular_packages_forms_forms_b: Type<any>[];
|
---|
4163 |
|
---|
4164 | export declare const ɵangular_packages_forms_forms_ba: StaticProvider;
|
---|
4165 |
|
---|
4166 | /**
|
---|
4167 | * @description
|
---|
4168 | * Provider which adds `MaxValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4169 | */
|
---|
4170 | export declare const ɵangular_packages_forms_forms_bd: StaticProvider;
|
---|
4171 |
|
---|
4172 | /**
|
---|
4173 | * @description
|
---|
4174 | * Provider which adds `MinValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4175 | */
|
---|
4176 | export declare const ɵangular_packages_forms_forms_be: StaticProvider;
|
---|
4177 |
|
---|
4178 | /**
|
---|
4179 | * @description
|
---|
4180 | * Provider which adds `RequiredValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4181 | */
|
---|
4182 | export declare const ɵangular_packages_forms_forms_bf: StaticProvider;
|
---|
4183 |
|
---|
4184 | /**
|
---|
4185 | * @description
|
---|
4186 | * Provider which adds `CheckboxRequiredValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4187 | */
|
---|
4188 | export declare const ɵangular_packages_forms_forms_bg: StaticProvider;
|
---|
4189 |
|
---|
4190 | /**
|
---|
4191 | * @description
|
---|
4192 | * Provider which adds `EmailValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4193 | */
|
---|
4194 | export declare const ɵangular_packages_forms_forms_bh: any;
|
---|
4195 |
|
---|
4196 | /**
|
---|
4197 | * @description
|
---|
4198 | * Provider which adds `MinLengthValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4199 | */
|
---|
4200 | export declare const ɵangular_packages_forms_forms_bi: any;
|
---|
4201 |
|
---|
4202 | /**
|
---|
4203 | * @description
|
---|
4204 | * Provider which adds `MaxLengthValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4205 | */
|
---|
4206 | export declare const ɵangular_packages_forms_forms_bj: any;
|
---|
4207 |
|
---|
4208 | /**
|
---|
4209 | * @description
|
---|
4210 | * Provider which adds `PatternValidator` to the `NG_VALIDATORS` multi-provider list.
|
---|
4211 | */
|
---|
4212 | export declare const ɵangular_packages_forms_forms_bk: any;
|
---|
4213 |
|
---|
4214 | /**
|
---|
4215 | * Validator that requires the control's value to be greater than or equal to the provided number.
|
---|
4216 | * See `Validators.min` for additional information.
|
---|
4217 | */
|
---|
4218 | export declare function ɵangular_packages_forms_forms_bl(min: number): ValidatorFn;
|
---|
4219 |
|
---|
4220 | /**
|
---|
4221 | * Validator that requires the control's value to be less than or equal to the provided number.
|
---|
4222 | * See `Validators.max` for additional information.
|
---|
4223 | */
|
---|
4224 | export declare function ɵangular_packages_forms_forms_bm(max: number): ValidatorFn;
|
---|
4225 |
|
---|
4226 | /**
|
---|
4227 | * Validator that requires the control have a non-empty value.
|
---|
4228 | * See `Validators.required` for additional information.
|
---|
4229 | */
|
---|
4230 | export declare function ɵangular_packages_forms_forms_bn(control: AbstractControl): ValidationErrors | null;
|
---|
4231 |
|
---|
4232 | /**
|
---|
4233 | * Validator that requires the control's value be true. This validator is commonly
|
---|
4234 | * used for required checkboxes.
|
---|
4235 | * See `Validators.requiredTrue` for additional information.
|
---|
4236 | */
|
---|
4237 | export declare function ɵangular_packages_forms_forms_bo(control: AbstractControl): ValidationErrors | null;
|
---|
4238 |
|
---|
4239 | /**
|
---|
4240 | * Validator that requires the control's value pass an email validation test.
|
---|
4241 | * See `Validators.email` for additional information.
|
---|
4242 | */
|
---|
4243 | export declare function ɵangular_packages_forms_forms_bp(control: AbstractControl): ValidationErrors | null;
|
---|
4244 |
|
---|
4245 | /**
|
---|
4246 | * Validator that requires the length of the control's value to be greater than or equal
|
---|
4247 | * to the provided minimum length. See `Validators.minLength` for additional information.
|
---|
4248 | */
|
---|
4249 | export declare function ɵangular_packages_forms_forms_bq(minLength: number): ValidatorFn;
|
---|
4250 |
|
---|
4251 | /**
|
---|
4252 | * Validator that requires the length of the control's value to be less than or equal
|
---|
4253 | * to the provided maximum length. See `Validators.maxLength` for additional information.
|
---|
4254 | */
|
---|
4255 | export declare function ɵangular_packages_forms_forms_br(maxLength: number): ValidatorFn;
|
---|
4256 |
|
---|
4257 | /**
|
---|
4258 | * Validator that requires the control's value to match a regex pattern.
|
---|
4259 | * See `Validators.pattern` for additional information.
|
---|
4260 | */
|
---|
4261 | export declare function ɵangular_packages_forms_forms_bs(pattern: string | RegExp): ValidatorFn;
|
---|
4262 |
|
---|
4263 | /**
|
---|
4264 | * Function that has `ValidatorFn` shape, but performs no operation.
|
---|
4265 | */
|
---|
4266 | export declare function ɵangular_packages_forms_forms_bt(control: AbstractControl): ValidationErrors | null;
|
---|
4267 |
|
---|
4268 | export declare const ɵangular_packages_forms_forms_c: Type<any>[];
|
---|
4269 |
|
---|
4270 | export declare const ɵangular_packages_forms_forms_e: any;
|
---|
4271 |
|
---|
4272 | /**
|
---|
4273 | * Base class for all ControlValueAccessor classes defined in Forms package.
|
---|
4274 | * Contains common logic and utility functions.
|
---|
4275 | *
|
---|
4276 | * Note: this is an *internal-only* class and should not be extended or used directly in
|
---|
4277 | * applications code.
|
---|
4278 | */
|
---|
4279 | export declare class ɵangular_packages_forms_forms_f {
|
---|
4280 | private _renderer;
|
---|
4281 | private _elementRef;
|
---|
4282 | /**
|
---|
4283 | * The registered callback function called when a change or input event occurs on the input
|
---|
4284 | * element.
|
---|
4285 | * @nodoc
|
---|
4286 | */
|
---|
4287 | onChange: (_: any) => void;
|
---|
4288 | /**
|
---|
4289 | * The registered callback function called when a blur event occurs on the input element.
|
---|
4290 | * @nodoc
|
---|
4291 | */
|
---|
4292 | onTouched: () => void;
|
---|
4293 | constructor(_renderer: Renderer2, _elementRef: ElementRef);
|
---|
4294 | /**
|
---|
4295 | * Helper method that sets a property on a target element using the current Renderer
|
---|
4296 | * implementation.
|
---|
4297 | * @nodoc
|
---|
4298 | */
|
---|
4299 | protected setProperty(key: string, value: any): void;
|
---|
4300 | /**
|
---|
4301 | * Registers a function called when the control is touched.
|
---|
4302 | * @nodoc
|
---|
4303 | */
|
---|
4304 | registerOnTouched(fn: () => void): void;
|
---|
4305 | /**
|
---|
4306 | * Registers a function called when the control value changes.
|
---|
4307 | * @nodoc
|
---|
4308 | */
|
---|
4309 | registerOnChange(fn: (_: any) => {}): void;
|
---|
4310 | /**
|
---|
4311 | * Sets the "disabled" property on the range input element.
|
---|
4312 | * @nodoc
|
---|
4313 | */
|
---|
4314 | setDisabledState(isDisabled: boolean): void;
|
---|
4315 | }
|
---|
4316 |
|
---|
4317 | /**
|
---|
4318 | * Base class for all built-in ControlValueAccessor classes (except DefaultValueAccessor, which is
|
---|
4319 | * used in case no other CVAs can be found). We use this class to distinguish between default CVA,
|
---|
4320 | * built-in CVAs and custom CVAs, so that Forms logic can recognize built-in CVAs and treat custom
|
---|
4321 | * ones with higher priority (when both built-in and custom CVAs are present).
|
---|
4322 | *
|
---|
4323 | * Note: this is an *internal-only* class and should not be extended or used directly in
|
---|
4324 | * applications code.
|
---|
4325 | */
|
---|
4326 | export declare class ɵangular_packages_forms_forms_g extends ɵangular_packages_forms_forms_f {
|
---|
4327 | }
|
---|
4328 |
|
---|
4329 | export declare const ɵangular_packages_forms_forms_h: any;
|
---|
4330 |
|
---|
4331 | export declare class ɵangular_packages_forms_forms_i {
|
---|
4332 | private _cd;
|
---|
4333 | constructor(cd: AbstractControlDirective | null);
|
---|
4334 | is(status: AnyControlStatus): boolean;
|
---|
4335 | }
|
---|
4336 |
|
---|
4337 | export declare const ɵangular_packages_forms_forms_j: {
|
---|
4338 | '[class.ng-untouched]': string;
|
---|
4339 | '[class.ng-touched]': string;
|
---|
4340 | '[class.ng-pristine]': string;
|
---|
4341 | '[class.ng-dirty]': string;
|
---|
4342 | '[class.ng-valid]': string;
|
---|
4343 | '[class.ng-invalid]': string;
|
---|
4344 | '[class.ng-pending]': string;
|
---|
4345 | };
|
---|
4346 |
|
---|
4347 | export declare const ɵangular_packages_forms_forms_k: {
|
---|
4348 | '[class.ng-untouched]': string;
|
---|
4349 | '[class.ng-touched]': string;
|
---|
4350 | '[class.ng-pristine]': string;
|
---|
4351 | '[class.ng-dirty]': string;
|
---|
4352 | '[class.ng-valid]': string;
|
---|
4353 | '[class.ng-invalid]': string;
|
---|
4354 | '[class.ng-pending]': string;
|
---|
4355 | '[class.ng-submitted]': string;
|
---|
4356 | };
|
---|
4357 |
|
---|
4358 | export declare const ɵangular_packages_forms_forms_l: any;
|
---|
4359 |
|
---|
4360 | export declare const ɵangular_packages_forms_forms_m: any;
|
---|
4361 |
|
---|
4362 | export declare const ɵangular_packages_forms_forms_n: any;
|
---|
4363 |
|
---|
4364 | export declare const ɵangular_packages_forms_forms_o: any;
|
---|
4365 |
|
---|
4366 | export declare const ɵangular_packages_forms_forms_p: any;
|
---|
4367 |
|
---|
4368 | /**
|
---|
4369 | * Internal-only NgModule that works as a host for the `RadioControlRegistry` tree-shakable
|
---|
4370 | * provider. Note: the `InternalFormsSharedModule` can not be used here directly, since it's
|
---|
4371 | * declared *after* the `RadioControlRegistry` class and the `providedIn` doesn't support
|
---|
4372 | * `forwardRef` logic.
|
---|
4373 | */
|
---|
4374 | export declare class ɵangular_packages_forms_forms_q {
|
---|
4375 | }
|
---|
4376 |
|
---|
4377 | /**
|
---|
4378 | * @description
|
---|
4379 | * Class used by Angular to track radio buttons. For internal use only.
|
---|
4380 | */
|
---|
4381 | export declare class ɵangular_packages_forms_forms_r {
|
---|
4382 | private _accessors;
|
---|
4383 | /**
|
---|
4384 | * @description
|
---|
4385 | * Adds a control to the internal registry. For internal use only.
|
---|
4386 | */
|
---|
4387 | add(control: NgControl, accessor: RadioControlValueAccessor): void;
|
---|
4388 | /**
|
---|
4389 | * @description
|
---|
4390 | * Removes a control from the internal registry. For internal use only.
|
---|
4391 | */
|
---|
4392 | remove(accessor: RadioControlValueAccessor): void;
|
---|
4393 | /**
|
---|
4394 | * @description
|
---|
4395 | * Selects a radio button. For internal use only.
|
---|
4396 | */
|
---|
4397 | select(accessor: RadioControlValueAccessor): void;
|
---|
4398 | private _isSameGroup;
|
---|
4399 | }
|
---|
4400 |
|
---|
4401 | export declare const ɵangular_packages_forms_forms_s: StaticProvider;
|
---|
4402 |
|
---|
4403 | /**
|
---|
4404 | * Token to provide to turn off the ngModel warning on formControl and formControlName.
|
---|
4405 | */
|
---|
4406 | export declare const ɵangular_packages_forms_forms_t: InjectionToken<unknown>;
|
---|
4407 |
|
---|
4408 | export declare const ɵangular_packages_forms_forms_u: any;
|
---|
4409 |
|
---|
4410 | export declare const ɵangular_packages_forms_forms_v: any;
|
---|
4411 |
|
---|
4412 | export declare const ɵangular_packages_forms_forms_w: any;
|
---|
4413 |
|
---|
4414 | export declare const ɵangular_packages_forms_forms_x: any;
|
---|
4415 |
|
---|
4416 | export declare const ɵangular_packages_forms_forms_y: any;
|
---|
4417 |
|
---|
4418 | export declare const ɵangular_packages_forms_forms_z: StaticProvider;
|
---|
4419 |
|
---|
4420 | /**
|
---|
4421 | * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
|
---|
4422 | */
|
---|
4423 | declare class ɵInternalFormsSharedModule {
|
---|
4424 | }
|
---|
4425 | export { ɵInternalFormsSharedModule }
|
---|
4426 | export { ɵInternalFormsSharedModule as ɵangular_packages_forms_forms_d }
|
---|
4427 |
|
---|
4428 |
|
---|
4429 | /**
|
---|
4430 | * @description
|
---|
4431 | *
|
---|
4432 | * Adds `novalidate` attribute to all forms by default.
|
---|
4433 | *
|
---|
4434 | * `novalidate` is used to disable browser's native form validation.
|
---|
4435 | *
|
---|
4436 | * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute:
|
---|
4437 | *
|
---|
4438 | * ```
|
---|
4439 | * <form ngNativeValidate></form>
|
---|
4440 | * ```
|
---|
4441 | *
|
---|
4442 | * @publicApi
|
---|
4443 | * @ngModule ReactiveFormsModule
|
---|
4444 | * @ngModule FormsModule
|
---|
4445 | */
|
---|
4446 | declare class ɵNgNoValidate {
|
---|
4447 | }
|
---|
4448 | export { ɵNgNoValidate }
|
---|
4449 | export { ɵNgNoValidate as ɵangular_packages_forms_forms_bc }
|
---|
4450 |
|
---|
4451 | /**
|
---|
4452 | * @description
|
---|
4453 | * Marks `<option>` as dynamic, so Angular can be notified when options change.
|
---|
4454 | *
|
---|
4455 | * @see `SelectMultipleControlValueAccessor`
|
---|
4456 | *
|
---|
4457 | * @ngModule ReactiveFormsModule
|
---|
4458 | * @ngModule FormsModule
|
---|
4459 | * @publicApi
|
---|
4460 | */
|
---|
4461 | declare class ɵNgSelectMultipleOption implements OnDestroy {
|
---|
4462 | private _element;
|
---|
4463 | private _renderer;
|
---|
4464 | private _select;
|
---|
4465 | id: string;
|
---|
4466 | constructor(_element: ElementRef, _renderer: Renderer2, _select: SelectMultipleControlValueAccessor);
|
---|
4467 | /**
|
---|
4468 | * @description
|
---|
4469 | * Tracks the value bound to the option element. Unlike the value binding,
|
---|
4470 | * ngValue supports binding to objects.
|
---|
4471 | */
|
---|
4472 | set ngValue(value: any);
|
---|
4473 | /**
|
---|
4474 | * @description
|
---|
4475 | * Tracks simple string values bound to the option element.
|
---|
4476 | * For objects, use the `ngValue` input binding.
|
---|
4477 | */
|
---|
4478 | set value(value: any);
|
---|
4479 | /** @nodoc */
|
---|
4480 | ngOnDestroy(): void;
|
---|
4481 | }
|
---|
4482 | export { ɵNgSelectMultipleOption }
|
---|
4483 | export { ɵNgSelectMultipleOption as ɵangular_packages_forms_forms_bb }
|
---|
4484 |
|
---|
4485 | export { }
|
---|