aurelia-form
The <aurelia-form />
component provides basic features for your forms.
It adds validation, a submit button and passes information such as behavior to your form-groups.
Attributes
The following attributes (bindables) are available for this component.
attribute | type | default | description |
---|---|---|---|
behavior | string | '' |
The form behavior (horizontal, inline, etc) |
classes | string | '' |
Classes to add |
labelClasses | string | '' |
Classes to be applied to the label container. (overrides defaultLabelClasses from config) |
elementClasses | string | '' |
Classes to be applied to the element container (overrides defaultElementClasses from config) |
validated | boolean | true |
Enable / disable validation on this form |
entity | {} / Entity | undefined |
The entity to validate |
buttonOptions | Array | ['primary'] |
Options to pass to the button (read more in button docs) |
buttonLabel | string | 'Submit' |
Label for the button (uses submitButton.label from config) |
buttonEnabled | boolean | true |
Show the button (uses submitButton.enabled from config) |
Events
This component emits custom events. These events only fire if validation is enabled.
event | details | description |
---|---|---|
valid | None | Fired on submit, if form is valid |
invalid | validation result | Fired on submit, if form is invalid |
Examples
Horizontal
<aurelia-form behavior="horizontal">
<form-group name="username" label="Username"></form-group>
<form-group name="password" type="password" label="Password"></form-group>
</aurelia-form>
No validation, no button
<aurelia-form validated.one-time="false" button-enabled.one-time="false">
<form-group name="username" label="Username"></form-group>
<form-group name="password" type="password" label="Password"></form-group>
</aurelia-form>
On valid form
export class SomeViewmodel {
user = {
username: null,
password: null
};
login() {
// Perform login logic.
}
}
<aurelia-form valid.delegate="login()">
<form-group name="username" label="Username" value.bind="user.username"></form-group>
<form-group name="password" type="password" label="Password" value.bind="password"></form-group>
</aurelia-form>
Additional
To use validation, it has to be set up first. You can read how to do this in the setting up validation recipe.