Ember-uni-form
The Ember Uni-Form addon makes it easy to wire up complex, validated forms.
Uni-Form
- minimizes boilerplate with sensible defaults
- provides a conventional structure for your form code
- supports validation of nested models within the payload
Usage
{{#uni-form action=(action 'mySubmit') form=myForm }} {{ uni-form-input payloadKey='emailAddress' type='email' }} {{ uni-form-input payloadKey='password' type='password' }} {{#if myForm.submitFailed }} {{ uni-form-messages }} {{/if}} <input type="submit" value="Save">{{/uni-form}}
;Controller
Find this example insufficient? It is! The real documentation is the example code in /tests/dummy/app
!
How It Works
Uni-Form provides a conventional structure for your form code.
The data:
- form model
- field models
- message objects
The views:
- form component
- field components
You provide:
- payload model
- submit action
You can directly bind a value
to an input (e.g. a checkbox for a controller property), but Uni-Form really shines when you put your fields within a form and specify the payloadKey
.
Uni-Form field components will take the payloadKey
and parse validations and error messages on parentFormView.form.payload
to give you:
field.label
field.maxlength
field.messages
field.name
field.optional
field.prompt
field.required
field.status
field.tone
field.value
Binding by payloadKey
works with nested models in the payload. Check out the example in the dummy app.
A model:uni-form
has a payload model, fieldsByName (a hash of field models) and messages.
A model:uni-form-field
has a value alias and computed properties for message, tone, required, etc.
A message
has a field, path, body, source, and tone.
// Client error for form.payload.user.emailAddressvar msg = field: 'emailAddress' path: 'user' body: 'Please enter a valid email address.' source: 'client' tone: 'error';
Notes
Uni-Form is the one form library to rule them all. And in the darkness, bind them.
- You should really read the code in the dummy app.
- Model attribute names are expected to be camelCased.
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.