### File

`packages/ecl/components/ecl-form-group/ecl-form-group.component.ts`

### Description

The EclFormGroupComponent is a wrapper component used to group form fields together This component automatically detects if any `EclRangeDirective` inputs are nested inside it, and applies the appropriate styling attributes if so.

### Extends

`ECLBaseDirective`

### Metadata

selector | `[eclFormGroup], ecl-form-group`
templateUrl | `./ecl-form-group.component.html`

### Index

###### Properties
eclRange
###### Methods
getCssClasses
###### Inputs
class e2eAttr tabindex
###### HostBindings
attr.data-ecl-range class
###### Accessors
cssClasses hasEclRange

### Inputs

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

attr.data-ecl-range
Type : `boolean | null`
Adds a data attribute to the host element when at least one `EclRangeDirective` is found within the form group. This allows conditional styling via CSS.

class
Type : `string`
Applies the base ECL CSS class for a form group to the host element. Inherited utility method from `ECLBaseDirective` is used to support modifier classes.

### Methods

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

eclRange
Type : `QueryList<EclRangeDirective>`
Decorators : `@ContentChildren(undefined, {descendants: true})`
Query list of any descendant `EclRangeDirective` instances within the form group. Used internally to determine whether the form group contains range inputs.

### Accessors

cssClasses
get `cssClasses()`
Applies the base ECL CSS class for a form group to the host element. Inherited utility method from `ECLBaseDirective` is used to support modifier classes. Returns : `string`

hasEclRange
get `hasEclRange()`
Adds a data attribute to the host element when at least one `EclRangeDirective` is found within the form group. This allows conditional styling via CSS. Returns : `boolean | null`

# results matching ""

# No results matching ""