Form created: {{ formCreated }}
@if (formValue) {Form value: {{ formValue | json }}
} +FormGeneratorService allows to define
- custom controls and render them for respective question types. In order to make your component work properly, it
- should follow these requirements:
- viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], which can be imported
- from @fundamental-ngx/platform;
- BaseDynamicFormGeneratorControl, which can be imported from
- @fundamental-ngx/platform;
- <ng-container [formGroup]="form"></ng-container>
- and <ng-container [formGroupName]="formGroupName"></ng-container>
- for appropriate binding to work.
- addValidationErrorHint method in
- FormGeneratorService. This will allow you to override default ones, and add new generic validation
- error messages.
-columnLayout values and
- inLineLayout values.
-appendColon: false in guiOptions object.
-Form generator supports grouping of the fields.
-To achieve this, developers must pass group object into [formItems] input array.
- Developers can define their own grid layout for the form field the same way as it's done for - Form container. -
-Below is the example of how to define custom grid layout for the form field component:
-DynamicFormItem.guiOptions.hint can be either string or HintOptions for more
- control over appearance of hint. By default target for hints is auto, meaning that it will be added to
- the label on S breakpoint and will be added to the input over S. If gap is not provided, then it will
- automatically add gap with size 1 and subtract 1 from
- DynamicFormItem.guiOptions.fieldLayoutConfig. If any of the elements have inline help with target
- either input or auto, every form item in form generator will have gap size minimum of
- 1(more, if requested, by you, via DynamicFormItem.guiOptions.gapLayoutConfig).
-- Before form is created or no form items are provided it will automatically show skeleton placeholders while data - is being loaded. -
-- Please note, that skeleton placeholders only shown before items are loaded for the first time. Every subsequent - loading will be shown with busy indicator. -
-There are several options on how to manage the control visibility in Form Generator:
-when function. This function reacts on form value changes and calculates whether the
- particular control should be visible or not;
- addControl and removeControl methods. The logic of calling these methods
- should be implemented by the developers;
-
- The difference between addControl/removeControl and control with inner form is that with first
- case, control can be placed into any group of Form Generator, where second option will be bound to the control
- itself.
-
- Developers can also set default form field parameters by calling withConfig() method of the
- PlatformFormGeneratorModule during it's import.
-
- The table below shows a list of element types, attributes, and descriptions. All types have a built-in
- validator function validators: [Validators.required] but you can choose to write your own
- validator functions.
-
| Type | -Attribute | -Description | -
|---|---|---|
| {{ prop[0] }} | -{{ prop[1] }} | -{{ prop[2] }} | -
Inline help has default options as below:
-| Property name | -Value | -
|---|---|
| {{ prop[0] }} | -{{ prop[1] }} | -
- if you want to modify default values globally and not per-field, provide
- FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS
- in your module or component.
-