You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/FormGenerator.md
+73Lines changed: 73 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -226,5 +226,78 @@ parent: AbstractControl;
226
226
```
227
227
An instance of [FormGroup](FormGroup.md) or [FormArray](FormArray.md) class as a parent control.
228
228
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.
229
232
233
+
If the parent is `FormGroup` then you can inject a component by defining the control name starts with`$field_`.
230
234
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`.
0 commit comments