Components.Form public

Render a form with the appropriate Bootstrap layout class (see formLayout). Allows setting a model that nested Components.FormElements can access, and that can provide form validation (see below)

You can use whatever markup you like within the form. The following shows Bootstrap 3 usage for the internal markup.

<BsForm @onSubmit={{action "submit"}} as |form|>
  <form.group>
    <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>
</BsForm>

However to benefit from features such as automatic form markup, validations and validation markup, use Components.FormElement as nested components. See below for an example.

Submitting the form

When the form is submitted (e.g. by clicking a submit button), the event will be intercepted and the onSubmit action will be sent to the controller or parent component. In case the form supports validation (see "Form validation" below), the onBefore action is called (which allows you to do e.g. model data normalization), then the available validation rules are evaluated, and if those fail, the onInvalid action is sent instead of onSubmit.

Use with Components.FormElement

When using Components.FormElements with their property set to property names of the form's validation enabled model, you gain some additional powerful features:

• the appropriate Bootstrap markup for the given formLayout and the form element's controlType is automatically generated
• markup for validation states and error messages is generated based on the model's validation (if available), when submitting the form with an invalid validation, or when focusing out of invalid inputs

<BsForm @formLayout="horizontal" @model={{this}} @onSubmit={{action "submit"}} as |form|>
  <form.element @controlType="email" @label="Email" @placeholder="Email" @property="email" />
  <form.element @controlType="password" @label="Password" @placeholder="Password" @property="password" />
  <form.element @controlType="checkbox" @label="Remember me" @property="rememberMe" />
  <BsButton @defaultText="Submit" @type="primary" @buttonType="submit" />
</BsForm>

See the Components.FormElement API docs for further information.

Form validation

All version of ember-bootstrap beginning from 0.7.0 do not come with built-in support for validation engines anymore. Instead support is added usually by additional Ember addons, for example:

• ember-bootstrap-validations: adds support for ember-validations
• ember-bootstrap-cp-validations: adds support for ember-cp-validations
• ember-bootstrap-changeset-validations: adds support for ember-changeset

To add your own validation support, you have to:

• extend this component, setting hasValidator to true if validations are available (by means of a computed property for example), and implementing the validate method
• extend the Components.FormElement component and implement the setupValidations hook or simply override the errors property to add the validation error messages to be displayed

When validation fails, the appropriate Bootstrap markup is added automatically, i.e. the error classes are applied and the validation messages are shown for each form element. In case the validation library supports it, also warning messages are shown. See the Components.FormElement documentation for further details.

See the above mentioned addons for examples.

Submission state

A isSubmitting property is yielded, which is true after submit has been triggered and before the Promise returned by onSubmit is fulfilled. It could be used to disable form's submit button and showing a loading spinner for example:

<BsForm @onSubmit={{action "save"}} as |form|>
  <BsButton @buttonType="submit" @disabled={{form.isSubmitting}}>
    Save
    {{#if form.isSubmitting}} {{fa-icon "spinner"}} {{/if}}
  </BsButton>
</BsForm>

Additionaly isSubmitted and isRejected properties are yielded. isSubmitted is true if last submission was successful. isRejected is true if last submission was rejected due to validation errors or by an action bound to onSubmit event, returning a rejected promise. Both are reset as soon as any value of a form element changes. It could be used for visual feedback about last submission:

<BsForm @onSubmit={{action 'save}} as |form|>
  <BsButton @buttonType="submit" @type={{if form.isRejected "danger" "primary"}}>
    Save
  </BsButton>
</BsForm>