Form

Advanced forms with support for easy markup generation and validation.

This page shows some example usage of the <BsForm> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.

Simple form

The forms component lets you easily create forms with automatic markup generation based on the chosen form layout:


Minimum 6 characters
Radio
<BsForm @formLayout="vertical" @model={{this}} @onSubmit={{action "submit"}} as |form|>
  <form.element @controlType="email" @label="Email" @placeholder="Email" @property="email" @required={{true}} />
  <form.element @controlType="password" @label="Password" @placeholder="Password" @property="password" @required={{true}} @helpText="Minimum 6 characters" />
  <form.element @controlType="radio" @label="Radio" @property="radio" @options={{radioOptions}} @optionLabelPath="label" />
  <form.element @controlType="checkbox" @label="Checkbox" @property="checkbox" />
  <form.element @controlType="textarea" @label="Textarea" @property="textarea" />
  <BsButton @defaultText="Submit" @type="primary" @buttonType="submit" />
</BsForm>

The controller below shows the default states for the form properties above.

import Controller from '@ember/controller';
import { computed } from '@ember/object';
import { getOwner } from '@ember/application';
import Login from '../../models/login';

export default Controller.extend({
  formLayout: 'vertical',
  email: 'foo@example.com',
  password: null,
  checkbox: false,
  radio: null,

  login: computed(function() {
    return Login.create(
      getOwner(this).ownerInjection()
    );
  }),

  actions: {
    submit() {
      window.alert('Successfully submitted form data!');
    }
  },

  init() {
    this._super(...arguments);
    this.radioOptions = [
      {
        label: 'foo'
      },
      {
        label: 'bar'
      }
    ];
  }
});

Validation

Add support for forms validation by using one of the available additional addons depending on your favourite form validation library:

Just add validations to your model assigned to your form. It will then force validation on submit and show the eventual validation errors. The following example uses ember-cp-validations:

Minimum 6 characters
<BsForm @model={{this.login}} @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" @helpText="Minimum 6 characters" />
  <BsButton @defaultText="Submit" @type="primary" @buttonType="submit" />
</BsForm>
import EmberObject from '@ember/object';
import { validator, buildValidations } from 'ember-cp-validations';

const Validations = buildValidations({
  password: [
    validator('presence', true),
    validator('length', {
      min: 4,
      max: 8
    }),
    validator('length', {
      isWarning: true,
      min: 6,
      message: 'Password is weak'
    })
  ],
  email: [
    validator('presence', true),
    validator('format', { type: 'email' })
  ]
});

export default EmberObject.extend(Validations, {
  email: null,
  password: null,
  rememberMe: false
});

Custom controls

Use the form element in block form to add your custom controls:

@example.com
Minimum 6 characters
<BsForm @model={{this.login}} @onSubmit={{action "submit"}} as |form|>
  <form.element @label="Email" @placeholder="Email" @property="email" as |el|>
    <div class="input-group">
      <el.control />
      <div class="input-group-append">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
  </form.element>
  <form.element @size="lg" @controlType="password" @label="Password" @placeholder="Password" @property="password" @helpText="Minimum 6 characters" />
  <BsButton @defaultText="Submit" @type="primary" @buttonType="submit" />
</BsForm>

You can also just customize the existing control component:

<BsForm @model={{this}} @onSubmit={{action "submit"}} as |form|>
  <form.element @label="Email" @placeholder="Email" @property="email" as |el|>
    <el.control class="border-info" />
  </form.element>
  <BsButton @defaultText="Submit" @type="primary" @buttonType="submit" />
</BsForm>

Custom control addons

Support for popular control components can be added through additional addons: