Skip to content

Commit 273a52a

Browse files
author
Kuldeep Saxena
authored
Update FormGenerator.md
1 parent 58da710 commit 273a52a

File tree

1 file changed

+73
-0
lines changed

1 file changed

+73
-0
lines changed

docs/api/FormGenerator.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,5 +226,78 @@ parent: AbstractControl;
226226
```
227227
An instance of [FormGroup](FormGroup.md) or [FormArray](FormArray.md) class as a parent control.
228228

229+
## Inject a component
230+
FormGenerator generates the UI in the same order in which the controls have been defined in the `formConfig`, so sometime you may need to add a component in between the controls.
231+
FormGenerator provides this facility by defining a `$field_` property to determine that the control is not need to be added so it just renders the component.
229232

233+
If the parent is `FormGroup` then you can inject a component by defining the control name starts with`$field_`.
230234

235+
For Example:
236+
```ts
237+
const fieldConfig = {
238+
controls: {
239+
$field_0: {
240+
render: () => <span>Username:</span>
241+
},
242+
username: {
243+
render: TextInput,
244+
},
245+
$field_1: {
246+
render: () => <span>Password:</span>
247+
},
248+
password: {
249+
render: TextInput,
250+
meta: {
251+
label: "Password",
252+
type: "password"
253+
}
254+
}
255+
}
256+
}
257+
```
258+
If the parent is `FormArray` then you can inject a component by defining the control's index starts with`$field_`.
259+
260+
```ts
261+
const fieldConfig = {
262+
controls: [
263+
{
264+
index: "$field_0"
265+
render: () => <span>Item1:</span>
266+
},
267+
{
268+
render: TextInput
269+
},
270+
{
271+
index: "$field_1"
272+
render: () => <span>Item2:</span>
273+
},
274+
{
275+
render: TextInput
276+
}
277+
]
278+
}
279+
```
280+
You can also access the root control object by using the `$field_` control & subscribe the component for the form state changes by just defining the `isStatic` property as `false`.
281+
282+
For example:
283+
284+
```ts
285+
const fieldConfig = {
286+
controls: {
287+
username: {
288+
render: TextInput,
289+
},
290+
password: {
291+
render: TextInput,
292+
meta: {
293+
label: "Password",
294+
type: "password"
295+
}
296+
},
297+
$field_0: {
298+
isStatic: false,
299+
render: ({ invalid }) => <button disabled={invalid}>Submit</button>
300+
},
301+
}
302+
}
303+
```

0 commit comments

Comments
 (0)