Components.FormGroup public

This component renders a <div class="form-group"> element, with support for validation states and feedback icons (only for BS3). You can use it as a block level component. The following shows Bootstrap 3 usage for the internal markup.

<BsForm as |form|>
  <form.group @validation={{this.firstNameValidation}}>
    <label class="control-label">First name</label>
    <input value={{this.firstname}} class="form-control" oninput={{action (mut this.firstname) value="target.value"}} type="text">
  </form.group>
</bs-form>

If the validation property is set to some state (usually Bootstrap's predefined states "success", "warning" or "error"), the appropriate styles will be added, together with a feedback icon. See http://getbootstrap.com/css/#forms-control-validation

classTypePrefix String private

Default: 'form-group' (BS3) or 'form-control' (BS4)

Defined in addon/components/bs-form/group.js:36

errorIcon string public

[BS3 only] The icon classes to be used for a feedback icon in a "error" validation state. Defaults to the usual glyphicon classes. This is ignored, and no feedback icon is rendered if useIcons is false.

You can change this globally by setting the formValidationErrorIcon property of the ember-bootstrap configuration in your config/environment.js file. If your are using FontAwesome for example:

ENV['ember-bootstrap'] = {
              formValidationErrorIcon: 'fas fa-times'
            }
            

hasFeedback boolean private

[BS3 only] Computed property which is true if the form group is showing a validation icon

hasIconForValidationState boolean private

[BS3 only]

hasValidation boolean private

Computed property which is true if the form group is in a validation state

iconName string private

[BS3 only]

infoIcon string public

[BS3 only] The icon classes to be used for a feedback icon in a "info" validation state. Defaults to the usual glyphicon classes. This is ignored, and no feedback icon is rendered if useIcons is false.

You can change this globally by setting the formValidationInfoIcon property of the ember-bootstrap configuration in your config/environment.js file. If your are using FontAwesome for example:

ENV['ember-bootstrap'] = {
              formValidationInfoIcon: 'fa fa-info-circle
            }
            

The "info" validation state is not supported in Bootstrap CSS, but can be easily added using the following LESS style:

.has-info {
              .form-control-validation(@state-info-text; @state-info-text; @state-info-bg);
            }
            

isHorizontal boolean private

Indicates whether the form type equals horizontal

size String public

[BS3 only] Property for size styling, set to 'lg', 'sm' or 'xs'

Also see the Bootstrap docs

successIcon string public

Default: 'glyphicon glyphicon-ok'

Defined in addon/components/bs-form/group.js:90

[BS3 only] The icon classes to be used for a feedback icon in a "success" validation state. Defaults to the usual glyphicon classes. This is ignored, and no feedback icon is rendered if useIcons is false.

You can change this globally by setting the formValidationSuccessIcon property of the ember-bootstrap configuration in your config/environment.js file. If your are using FontAwesome for example:

ENV['ember-bootstrap'] = {
              formValidationSuccessIcon: 'fas fa-check'
            }
            

useIcons boolean public

Default: true

Defined in addon/components/bs-form/group.js:67

[BS3 only] Whether to show validation state icons. See http://getbootstrap.com/css/#forms-control-validation

validation string public

[BS3 only] Set to a validation state to render the form-group with a validation style. See http://getbootstrap.com/css/#forms-control-validation

The default states of "success", "warning" and "error" are supported by Bootstrap out-of-the-box. But you can use custom states as well. This will set a has- class, and (if useIconsis true) a feedback whose class is taken from the Icon property

validationClass string private

[BS3 only]

warningIcon string public

[BS3 only] The icon classes to be used for a feedback icon in a "warning" validation state. Defaults to the usual glyphicon classes. This is ignored, and no feedback icon is rendered if useIcons is false.

You can change this globally by setting the formValidationWarningIcon property of the ember-bootstrap configuration in your config/environment.js file. If your are using FontAwesome for example:

ENV['ember-bootstrap'] = {
              formValidationWarningIcon: 'fas fa-exclamation-triangle'
            }
            
Classes