The <Input>
and <Textarea>
components are the easiest way to create common form controls.
Using these helpers, you can create form controls that are almost identical to the native HTML <input>
or <textarea>
elements, but are aware of Ember's two-way bindings and can automatically update.
Text fields
<label for="facebook">Facebook</label>
<Input @id="facebook" @value="http://www.facebook.com" />
Will become:
<label for="facebook">Facebook</label>
<input id="facebook" type="text" value="http://www.facebook.com"/>
You can pass the following standard <input>
attributes within the input
helper:
`readonly` | `required` | `autofocus` |
`value` | `placeholder` | `disabled` |
`size` | `tabindex` | `maxlength` |
`name` | `min` | `max` |
`pattern` | `accept` | `autocomplete` |
`autosave` | `formaction` | `formenctype` |
`formmethod` | `formnovalidate` | `formtarget` |
`height` | `inputmode` | `multiple` |
`step` | `width` | `form` |
`selectionDirection` | `spellcheck` | `type` |
If these attributes are set to a quoted string, their values will be set directly on the element, as in the previous example. However, when left unquoted, these values will be bound to a property on the template's current rendering context. For example:
<label for="firstname">First Name</label>
<Input @id="firstname" @type="text" @value= @size="50" disabled= />
Will bind the disabled
attribute to the value of entryNotAllowed
in the
current context.
Actions
To dispatch an action on specific events such as key-press
, use the following
<label for="firstname">First Name</label>
<Input @id="firstname" @value= @key-press= />
The following event types are supported (dasherized format):
enter
insert-newline
escape-press
focus-in
focus-out
key-press
key-up
More event types are also supported but these events need to be written in camelCase format, such mouseEnter
. Note, there are events of the same type in both the list above and linked. Event names listed above must be dasherized. Additional work is performed on these events.
Checkboxes
You can also use the
<Input>
helper to create a checkbox by setting its type
:
<label for="admin-checkbox">Is Admin?</label>
<Input @id="admin-checkbox" @type="checkbox" @name="isAdmin" @checked= />
Checkboxes support the following properties:
checked
disabled
tabindex
indeterminate
name
autofocus
form
Which can be bound or set as described in the previous section.
Checkboxes are a special input type. If you want to dispatch an action on a certain event, you will always need to define the event name in camelCase format:
<Input @id="admin-checkbox" @type="checkbox" @checked= @input= />
Text Areas
<Textarea @value= @cols="80" @rows="6" />
Will bind the value of the text area to name
on the current context.
<Textarea>
supports binding and/or setting the following properties:
value
name
rows
cols
placeholder
disabled
maxlength
tabindex
selectionEnd
selectionStart
selectionDirection
wrap
readonly
autofocus
form
spellcheck
required
Binding dynamic attribute
You might need to bind a property dynamically to an input if you're building a flexible form, for example. To achieve this you need to use the {{get}}
and {{mut}}
in conjunction like shown in the following example:
<Input @value= />
The {{get}}
helper allows you to dynamically specify which property to bind, while the {{mut}}
helper allows the binding to be updated from the input. See the respective helper documentation for more detail: {{get}}
and {{mut}}
.