ember-bootstrap

API Docs 0.11.3.33c7ec07

Components.FormGroup Class

public
Extends Ember.Component
Defined in: addon/components/bs-form-group.js:6

This component renders a <div class="form-group"> element, with support for validation states and feedback icons. Use as a block level component:

{{#bs-form-group validation=firstNameValidation}}
  <label class="control-label">First name</label>
  {{bs-input type="text" value=firstname}}
{{/bs-form-group}}

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

Show:

Properties

errorIcon string

public

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

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: 'fa fa-times'
                    }

hasFeedback boolean

public

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

Computed property which is true if the form group is showing a validation icon

hasValidation boolean

public

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

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

infoIcon string

public

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

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);
                    }

successIcon string

public

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

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: 'fa fa-check'
                    }

Default: 'glyphicon glyphicon-ok'

useIcons boolean

public

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

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

Default: true

validation string

public

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

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

warningIcon string

public

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

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: 'fa fa-warning'
                    }

Classes