Components

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={{this.submit}}
  as |form|
>
  <form.element @controlType="email" @label="Email" @property="email" as |el|>
    <el.control placeholder="Email" required />
  </form.element>
  <form.element
    @controlType="password"
    @label="Password"
    @property="password"
    @helpText="Minimum 6 characters"
    as |el|
  >
    <el.control placeholder="Password" required />
  </form.element>
  <form.element
    @controlType="radio"
    @label="Radio"
    @property="radio"
    @options={{this.radioOptions}}
    @optionLabelPath="label"
  />
  <form.element
    @controlType="checkbox"
    @label="Checkbox"
    @property="checkbox"
  />
  <form.element @controlType="switch" @label="Switch" @property="switched" />
  <form.element
    @controlType="textarea"
    @label="Textarea"
    @property="textarea"
  />
  <form.submitButton>Submit</form.submitButton>
</BsForm>

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

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

export default class FormsController extends Controller {
  formLayout = 'vertical';
  email = 'foo@example.com';
  password = null;
  checkbox = false;
  switched = false;
  radio = null;
  radioOptions = [
    {
      label: 'foo',
    },
    {
      label: 'bar',
    },
  ];

  get login() {
    return Login.create(getOwner(this).ownerInjection());
  }

  @action
  submit() {
    window.alert('Successfully submitted form data!');
  }
}

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={{this.submit}} as |form|>
  <form.element @controlType="email" @label="Email" @property="email" />
  <form.element
    @controlType="password"
    @label="Password"
    @property="password"
    @helpText="Minimum 6 characters"
  />
  <form.submitButton>Submit</form.submitButton>
</BsForm>
import EmberObject from '@ember/object';
import { validator, buildValidations } from 'ember-cp-validations';
import { tracked } from '@glimmer/tracking';

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 class Login extends EmberObject.extend(Validations) {
  @tracked email = null;
  @tracked password = null;
}

Custom controls

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

@example.com
Minimum 6 characters 
<BsForm @model={{this.login}} @onSubmit={{this.submit}} as |form|>
  <form.element @label="Email" @property="email" as |el|>
    <div class="input-group">
      <el.control placeholder="Email" />
      <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"
    @property="password"
    @helpText="Minimum 6 characters"
    as |el|
  >
    <el.control placeholder="Password" />
  </form.element>
  <form.submitButton>Submit</form.submitButton>
</BsForm>

You can also just customize the existing control component:

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

Custom control addons

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