Skip to content

Commit 5bdeb3b

Browse files
author
Kuldeep Saxena
authored
Update FieldArray.md
1 parent a79ad10 commit 5bdeb3b

File tree

1 file changed

+77
-0
lines changed

1 file changed

+77
-0
lines changed

docs/api/FieldArray.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,78 @@
11

2+
3+
# FieldArray
4+
A react component which creates a new or can be used with an existing [FormArray](FormArray.md) control.
5+
6+
## How it works
7+
- It creates a new instance of [FormArray](FormArray.md) in absence of the `name` and `control` props.
8+
- If a `name` prop is defined then it means that the control has to be added in an already existing parent control ( [FormGroup](FormGroup.md) / [FormArray](FormArray.md)) i.e the parent control must be present.
9+
- If a control with the same name is already present in the parent control then it just returns the same otherwise it'll create a new instance of [FormArray](FormArray.md) class.
10+
- You can define a parent control either by passing the `parent` prop or using the component as a child of the `FieldArray` or `FieldGroup` component.
11+
- If a `control` prop is defined then it just returns the same.
12+
13+
14+
## Props
15+
```ts
16+
strict: boolean;
17+
```
18+
Default value: `true`
19+
20+
If `true` then it'll only re-render the component only when any change happens in the form array control irrespective of the parent component(state and props) changes.
21+
22+
##
23+
24+
```ts
25+
render: (control: FormArray|FormControl|FormGroup) => React.ReactElement<any>|React.ReactElement<any>[];
26+
```
27+
A render function prop which returns a react component which needs to be re-render whenever the control state changes.
28+
You can also pass a render function as a child.
29+
For eg.
30+
31+
```ts
32+
<FieldArray ...>
33+
{
34+
(control) => <SomeComponent/>
35+
}
36+
</FieldArray>
37+
```
38+
39+
##
40+
```ts
41+
control: AbstractControl;
42+
```
43+
An instance of [FormArray](FormArray.md) control.
44+
45+
##
46+
```ts
47+
name: string;
48+
```
49+
Name of the control.
50+
51+
##
52+
```ts
53+
index: number
54+
```
55+
To define at which index the controls has to be inserted if the parent control is an instance of [FormArray](FormArray.md).
56+
57+
##
58+
```ts
59+
options: AbstractControlOptions;
60+
```
61+
You can pass the [AbstractControlOptions](AbstractControlOptions.md) as `options` props.
62+
63+
For eg.
64+
65+
```ts
66+
<FieldArray
67+
options={{
68+
validators: Validators.required,
69+
updateOn: 'blur'
70+
}}
71+
/>
72+
```
73+
74+
##
75+
```ts
76+
parent: AbstractControl;
77+
```
78+
An instance of FormGroup or FormArray class as a parent control.

0 commit comments

Comments
 (0)