1 | # va-dropdown-form-section
|
2 |
|
3 | The following examples exercise the various inputs:
|
4 | - `startOpen` is a boolean representing whether this section should be rendered as expanded when first loaded.
|
5 | - `parentForm` is a `FormGroup` that represents the overall form the section will be attached to. The va-dropdown-form-section will create its own FormGroup elements and attach them to the parentForm.
|
6 | - `displayAutoTitle` is a boolean representing whether to use the default title, which is based on the validation state.
|
7 | - `titleText` is a string representing the section's name and is displayed in the header.
|
8 | - `displayAutoDescription` is a boolean representing whether to use the default description, which is a comma-separated list of the field values.
|
9 | - `descriptionText` is a string representing the section's description and is displayed in the header next to the title.
|
10 | - `fields` is a collection of `BaseField`s, which are the field controls that will be in the section.
|
11 | - `editingHint` is a string that is displayed above all of the fields in the section.
|
12 | - `prepopulatedData` is an object that should contain the id of a field for it's key, and then a value for that field's value be to set as. (ex: {ID1: 'John Smith'})
|
13 |
|
14 | ## Example
|
15 |
|
16 | Create the fields your section will have:
|
17 | ```javascript
|
18 | const fields = [
|
19 | new TextboxField({id: 'ID1', label: 'Label 1', required: true, description: 'Description 1', textboxType: 'text'}),
|
20 | new TextboxField({id: 'ID2', label: 'Label 2', required: true, description: 'Description 2', textboxType: 'text'}),
|
21 | new TextboxField({id: 'ID3', label: 'Label 3', required: true, description: 'Description 3', textboxType: 'text'})
|
22 | ];
|
23 |
|
24 | const form = new FormGroup({});
|
25 | ```
|
26 |
|
27 | Now you can use it to populate the control:
|
28 | ```html
|
29 | <va-dropdown-form-section [parentForm]="form" [editingHint]="'This hint will help you'"
|
30 | titleText="Some Name" [fields]="fields"
|
31 | [displayAutoDescription]=true>
|
32 | </va-dropdown-form-section>
|
33 | ```
|