1
|
/**
|
2
|
* @license
|
3
|
* Copyright Google Inc. All Rights Reserved.
|
4
|
*
|
5
|
* Use of this source code is governed by an MIT-style license that can be
|
6
|
* found in the LICENSE file at https://angular.io/license
|
7
|
*/
|
8
|
import { OnDestroy, OnInit } from '@angular/core';
|
9
|
import { FormArray } from '../../model';
|
10
|
import { AbstractFormGroupDirective } from '../abstract_form_group_directive';
|
11
|
import { ControlContainer } from '../control_container';
|
12
|
import { AsyncValidatorFn, ValidatorFn } from '../validators';
|
13
|
import { FormGroupDirective } from './form_group_directive';
|
14
|
export declare const formGroupNameProvider: any;
|
15
|
/**
|
16
|
* @whatItDoes Syncs a nested {@link FormGroup} to a DOM element.
|
17
|
*
|
18
|
* @howToUse
|
19
|
*
|
20
|
* This directive can only be used with a parent {@link FormGroupDirective} (selector:
|
21
|
* `[formGroup]`).
|
22
|
*
|
23
|
* It accepts the string name of the nested {@link FormGroup} you want to link, and
|
24
|
* will look for a {@link FormGroup} registered with that name in the parent
|
25
|
* {@link FormGroup} instance you passed into {@link FormGroupDirective}.
|
26
|
*
|
27
|
* Nested form groups can come in handy when you want to validate a sub-group of a
|
28
|
* form separately from the rest or when you'd like to group the values of certain
|
29
|
* controls into their own nested object.
|
30
|
*
|
31
|
* **Access the group**: You can access the associated {@link FormGroup} using the
|
32
|
* {@link AbstractControl#get} method. Ex: `this.form.get('name')`.
|
33
|
*
|
34
|
* You can also access individual controls within the group using dot syntax.
|
35
|
* Ex: `this.form.get('name.first')`
|
36
|
*
|
37
|
* **Get the value**: the `value` property is always synced and available on the
|
38
|
* {@link FormGroup}. See a full list of available properties in {@link AbstractControl}.
|
39
|
*
|
40
|
* **Set the value**: You can set an initial value for each child control when instantiating
|
41
|
* the {@link FormGroup}, or you can set it programmatically later using
|
42
|
* {@link AbstractControl#setValue setValue} or {@link AbstractControl#patchValue patchValue}.
|
43
|
*
|
44
|
* **Listen to value**: If you want to listen to changes in the value of the group, you can
|
45
|
* subscribe to the {@link AbstractControl#valueChanges valueChanges} event. You can also listen to
|
46
|
* {@link AbstractControl#statusChanges statusChanges} to be notified when the validation status is
|
47
|
* re-calculated.
|
48
|
*
|
49
|
* ### Example
|
50
|
*
|
51
|
* {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
|
52
|
*
|
53
|
* * **npm package**: `@angular/forms`
|
54
|
*
|
55
|
* * **NgModule**: `ReactiveFormsModule`
|
56
|
*
|
57
|
* @stable
|
58
|
*/
|
59
|
export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
|
60
|
name: string;
|
61
|
constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
|
62
|
}
|
63
|
export declare const formArrayNameProvider: any;
|
64
|
/**
|
65
|
* @whatItDoes Syncs a nested {@link FormArray} to a DOM element.
|
66
|
*
|
67
|
* @howToUse
|
68
|
*
|
69
|
* This directive is designed to be used with a parent {@link FormGroupDirective} (selector:
|
70
|
* `[formGroup]`).
|
71
|
*
|
72
|
* It accepts the string name of the nested {@link FormArray} you want to link, and
|
73
|
* will look for a {@link FormArray} registered with that name in the parent
|
74
|
* {@link FormGroup} instance you passed into {@link FormGroupDirective}.
|
75
|
*
|
76
|
* Nested form arrays can come in handy when you have a group of form controls but
|
77
|
* you're not sure how many there will be. Form arrays allow you to create new
|
78
|
* form controls dynamically.
|
79
|
*
|
80
|
* **Access the array**: You can access the associated {@link FormArray} using the
|
81
|
* {@link AbstractControl#get} method on the parent {@link FormGroup}.
|
82
|
* Ex: `this.form.get('cities')`.
|
83
|
*
|
84
|
* **Get the value**: the `value` property is always synced and available on the
|
85
|
* {@link FormArray}. See a full list of available properties in {@link AbstractControl}.
|
86
|
*
|
87
|
* **Set the value**: You can set an initial value for each child control when instantiating
|
88
|
* the {@link FormArray}, or you can set the value programmatically later using the
|
89
|
* {@link FormArray}'s {@link AbstractControl#setValue} or {@link AbstractControl#patchValue}
|
90
|
* methods.
|
91
|
*
|
92
|
* **Listen to value**: If you want to listen to changes in the value of the array, you can
|
93
|
* subscribe to the {@link FormArray}'s {@link AbstractControl#valueChanges} event. You can also
|
94
|
* listen to its {@link AbstractControl#statusChanges} event to be notified when the validation
|
95
|
* status is re-calculated.
|
96
|
*
|
97
|
* **Add new controls**: You can add new controls to the {@link FormArray} dynamically by
|
98
|
* calling its {@link FormArray#push} method.
|
99
|
* Ex: `this.form.get('cities').push(new FormControl());`
|
100
|
*
|
101
|
* ### Example
|
102
|
*
|
103
|
* {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
|
104
|
*
|
105
|
* * **npm package**: `@angular/forms`
|
106
|
*
|
107
|
* * **NgModule**: `ReactiveFormsModule`
|
108
|
*
|
109
|
* @stable
|
110
|
*/
|
111
|
export declare class FormArrayName extends ControlContainer implements OnInit, OnDestroy {
|
112
|
name: string;
|
113
|
constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
|
114
|
ngOnInit(): void;
|
115
|
ngOnDestroy(): void;
|
116
|
readonly control: FormArray;
|
117
|
readonly formDirective: FormGroupDirective | null;
|
118
|
readonly path: string[];
|
119
|
readonly validator: ValidatorFn | null;
|
120
|
readonly asyncValidator: AsyncValidatorFn | null;
|
121
|
private _checkParentType();
|
122
|
}
|