spoonx / aurelia-form

Fun with forms! Form utilities to make stuff just a bit (a lot) easier.

Archived

It was fun while it lasted, but we have to stop maintaining these repositories. We haven't used these projects for quite some time and maintaining them is becoming harder to do.

You deserve better, and for that reason we've decided to archive some repositories, which includes this one.

Feel free to fork and alter the repositories, and go forth making awesome stuff.

aurelia-form

Form generation, validation and fun. This is a plugin for the Aurelia platform.

• Easy to use with clear documentation
• Form validation
• Support for multiple css frameworks enabled by aurelia view manager (is your framework missing? Submit a PR!)
• Configuration simplified through aurelia-config
• Automatic forms for aurelia-orm entities
• Built inside-out (everything is optional)
• Auto translations (if aurelia-i18n is configured)
• Declarative way of building forms
• Aliases for types so you can reuse elements for similar or different types

Documentation

You can find detailed documentation, including installation instructions over at the aurelia-form documentation.

The changelog provides you with information about important changes made over releases.

Updating from 0.x

• Basic entity-forms will not have to be changed.
• Any custom form will be completely different, but simple to implement.
• Schemas have been dropped in favor or declarative components.
• ValidateJS has been dropped in favor of the new aurelia-validation, but is easier to set up in your project.

Contributing

Report bugs, request features, send pull requests for fixes and features and read the CONTRIBUTING.md

License

MIT

aurelia-form's Issues

Enable CI testing for git repo

form-group: repeater should create new formGroup objects when the collection is changed

When I set a new entity on entity-form then I expect old form-group elements to be detached and new ones should be created. Now the repeater inside entity-form keeps reusing old form-group elements for new entities as well. I think it is a bug.

I have debugged aurelia repeater.
It has a requiresLifecycle flag internally which controls if existing elements should be removed or not when the collection is changed. I think in case of form-group requiresLifecycle should be always true.
requiresLifecycle will be true if
a) one of these is implemented: attached, bind, created, detached, or unbind
b) if form-group has au-animate class (I am using this workaround at the moment.)
c) if viewFactory returns requiresLifecycle = true (I don't know how to achieve this one.)

See: aurelia-templating
https://www.screencast.com/t/QhC30JsTgvId

 function behaviorRequiresLifecycle(instruction) {
  var t = instruction.type;
  var name = t.elementName !== null ? t.elementName : t.attributeName;
  return lifecycleOptionalBehaviors.indexOf(name) === -1 && (t.handlesAttached || t.handlesBind || t.handlesCreated || t.handlesDetached || t.handlesUnbind) || t.viewFactory && viewsRequireLifecycle(t.viewFactory) || instruction.viewFactory && viewsRequireLifecycle(instruction.viewFactory);
}

Validation

Set up validation for form.

Collections

We should support collections such as checkboxes and radios.

Custom elements

Test custom elements for form.

Decorators

We should add a form-meta kind of implementation (like orm does, we could even use orm) to allow decorating entities with labels, placeholders and other options.

Maybe this is also a nice starting point to look at form-only classes.

validation 0.12.x

can't use it yet here.
see aurelia/validation#283

More decorators

@element() to specify the input type to use
@norender() to not include in the form

Schema-form

Recently someone has asked where schema-form went. It has been removed in favor of entity-form and verbose components.

If you use schema-form and wish to see it re-introduced, please leave a comment or emoji response on this issue so we know how much of a priority this should be.

Thanks!

input-group

Test, and if needed make it easier to use input groups.

Inherit for checkbox and radio

Checkbox and radio are currently functional, but copy all the attributes. Check if we can inherit from form-input or extend it in some way.

Ability to pass a promise to the options properties

It is often the case that the available options in a select are not hardcoded. They often require a request to the server to determine what options are available. Enter The ability to pass a Promise type to the options attribute.

let someSchema = [{
  type: 'select',
  key: 'product',
  options: Products.get()
}];

Basic running example

Sorry but I could not get it working with the 'skeleton-typescript-webpack'...
Could be possible to have some simple examples working for example with the aurelia skeleton projects?

at-loader errors for d.ts files

Hi,
typescript loader gives me these errors when I use aurelia-form with the typescript-webpack navigation skeleton. The aurelia app works fine.

webpack: Compiled successfully.
[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:216:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:216:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:218:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:219:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:219:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:221:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:222:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:222:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:224:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:225:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:225:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:227:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:228:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:228:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:230:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:231:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:231:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:233:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:234:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:234:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:236:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:237:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:237:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:239:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:240:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:240:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:242:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:243:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:243:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:245:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:246:1
TS1128: Declaration or statement expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:246:16
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:248:8
TS1005: ';' expected.

[at-loader] ./node_modules/aurelia-config/dist/aurelia-config.d.ts:24:16
TS1030: 'export' modifier already seen.

[at-loader] ./node_modules/aurelia-config/dist/aurelia-config.d.ts:49:2
TS1036: Statements are not allowed in ambient contexts.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:6:9
TS2305: Module '"C:/Git/pappt/aurelia-form-demo-typescript-webpack/node_modules/aurelia-config/dist/aurelia-config"' has no exported member 'Configuration'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:10:15
TS2307: Cannot find module 'aurelia-form/decorator/index'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:216:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:218:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:219:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:221:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:222:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:224:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:225:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:227:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:228:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:230:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:231:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:233:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:234:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:236:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:237:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:239:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:240:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:242:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:243:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:245:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:246:8
TS2304: Cannot find name 'declare'.

[at-loader] ./node_modules/aurelia-form/dist/aurelia-form.d.ts:248:3
TS2304: Cannot find name 'from'.

[at-loader] ./node_modules/aurelia-view-manager/dist/aurelia-view-manager.d.ts:87:31
TS2304: Cannot find name 'ViewEngine'.

[at-loader] ./node_modules/aurelia-view-manager/dist/aurelia-view-manager.d.ts:87:63
TS2304: Cannot find name 'ViewCompileInstruction'.

[at-loader] ./node_modules/aurelia-view-manager/dist/aurelia-view-manager.d.ts:87:101
TS2304: Cannot find name 'ResourceLoadContext'.

[at-loader] ./node_modules/aurelia-view-manager/dist/aurelia-view-manager.d.ts:87:131
TS2304: Cannot find name 'ViewFactory'.

[aurelia-form] an element key propery cannot be null or undefined

That's should not apply for buttons? if add add one, it's used as label (which i don't want), and if i set it to '' i still get that error

More elements

Add more elements. Currently we only have radio, checkbox and input type X

usage.md wrong or ourdated

@bas080 submit.delegate doesn't work for me at least. adding actions does thoug

Support for association binding and manyAssociation

Support for association binding and manyAssociation.

http://aurelia-orm.spoonx.org/components.html#extended-example

Use and pass one object to define a form-field

Pasted from the gitter.

@bas080
11:29

Instead of words an example what I think is a cleaner and more extendable way of defining a form field(one element of a form)
So instead of doing

<form-field
  value.bind="model.name"
  field.bind="nameField"
  message.bind="messages['name']">
</form-field>

You can do

<form-field
  form-field.bind="nameField">

Then in your view model you would have

let userModel = {
  name: '',
}

this.nameField = new Field().configure({
  key: 'name', // the property to use as value on the model
  type: 'text',
  label: false,
  attributes: {
    placeholder: 'Your name'
  },
  model: userModel,
  messages: errorMessages
});

@RWOverdijk
11:30

this.nameField = {
  key: 'name', // the property to use as value on the model
  type: 'text',
  label: false,
  attributes: {
    placeholder: 'Your name'
  },
  model: userModel,
  messages: errorMessages
};

Or just the object
If we ever need any functionality for it it can be wrapped
But for now, let's leave it as-is. So we can move on 😄

@bas080
11:31
yes

@jeremyvergnas
11:33
Looks better yes 👍

@RWOverdijk
11:33
@bas080 Put it in an issue
So we don't forget

Aliases

Enable aliases for form-element. For instance, bool and boolean to checkbox, enum to radio etc.

Add support for auto-generated button in aurelia-form

Also make sure this works in entity-form. Allow passing in button label, and override through slot.

FormGroup <label> not associated with <input>

When using a form-group to wrap a control element (e.g. an <input>), the element is not explicitly "labeled", i.e. the label does not have a for attribute pointing to the control element's id. Explicit labeling allows users to interact with the label to focus the control element.

This is a usability issue which affects both "normal" users and users with screen readers.

Checkboxes and radios use contained control elements, so those are fine.

jquery

there is no need to use jquery. i propose removing it

till/else then it needs to be a dependency

Removing form element from array always removes the last one

  elements = [];

  create() {
    this.elements.push({
      value: {
        key : 'foo',
        type: 'string'
      }
    });
  }

  destroy(index) {
    this.elements.splice(index, 1);
  }

  <div repeat.for="element of elements">
    <form-field
      value.bind="data"
      element.bind="element.value">
    </form-field>

    <button click.deligate="add()">Add</button>
    <button click.deligate="destroy($index)">Remove</button>
  </div>

When trying to remove a form element from the elements array it will always remove the last one, ignoring the index. It calls the proper index and this.elements[index] when logging it in destroy.

It works if i don't use forms:

  elements = [];

  create() {
    this.elements.push(Math.random());
  }

  destroy(index) {
    this.elements.splice(index, 1);
  }

Attributes on textarea

Allow defining height, placeholder etc.

option to disable validation for specific forms

Forms are either all validated, or not validated at all. Add option to disable validation on specific form.

Aurelia-Form 0.4.0 using ValidationEngine which is not to be found

Tried to use Aurelia-Form 0.4.0. Got error in Form.js where the code is trying to use ValidationEngine.

_this.reporter = _aureliaValidatejs.ValidationEngine.getValidationReporter(model);

ValidationEngine is not to be found in aurelia-validatejs or aurelia-validation.

Unable to resolve aurelia-form/component

I have been trying to get aurelia-form to work with the aurelia skeleton for webpack (both versions). On a fresh skeleton project I add aurelia-form and aurelia-view-manager to the package.json dependencies, npm install, and then npm start. The app runs without errors, but webpack states:

Unable to resolve aurelia-form/component

This is without the plugin actually being pulled in via main.js. If I do try and add the plugin, the browser throws a javascript error:

Unhandled rejection Error: Cannot find module './aurelia-form/component/entity-form'.

I've tried various ways of resolving the module files search settings, but all to no avail, and given the fact that webpack complains on a virgin install (even though it seems to build) , I'm thinking something else must be wrong. Is there some installation trick I'm missing, or is this maybe an issue with the webpack variants of the aurelia skeleton projects?

isValid bindable for <aurelia-form> and <entity-form> components

I would like to be able to write the following.

<entity-form entity.bind="user" isValid.bind="isValid"></entity-form>

I can then use the isValid on my view model to enable of disable a custom submit button.

onChange with entity-form

For UI logic it is valuable to know if entity-form is modified by user. Could that be added like ability to define onChange handler for it?

Render function with element as callback

Allow the defining of a render function on the a schema's element. Example

let schema = [{
  key: 'username',
  render: element => {
    element.setAttribute('placeholder', "Username");
  }
}];

disabled / readonly / ? decorators

Add decorators for other properties

[Feature Resuest](decorators,entity-form): Add decorators for select elements

The form-select component has the attributes multiple, selectOptions and optionLabel: https://aurelia-form.spoonx.org/component/form-select.html
The form-group component can pass them on: https://aurelia-form.spoonx.org/component/form-group.html
But there are no decorators for them, meaning entity-form does not support it.

Found in Version 1.1.5

Entity-form

Create new entity-form implementation for next

Add @type decorator

Using aurelia-orm is optional. Add a @type decorator to really make this optional.

Fix code alignment

#53 (diff)

Element inside of label

Add support for form groups using radio or checkbox. This should be inside of the label.

Check the docs to figure out what possibilities there are.

@jeremyvergnas If you pick this up, this is for v3. Not v4.

Add missing deps

aurelia-view-manager, aurelia-config, aurelia-pal

Validation of aurelia-form does not work when the entity is replaced

I think validation does not work because aureliaForm.mapped goes out of sync of aureliaForm.formGroups.
Screencast: https://www.screencast.com/t/7NQfnhTJUpt (I can't record audio at the moment.)
WARN [aurelia-form-validation] Group not found for validation error on 'age2'.

You can easily reproduce the same:
Source code: https://gitlab.com/t03apt/aurelia-form-demo-typescript-webpack
Branch: troubleshooting-au-form
NOTE: my-entity-form is almost identical with entity-form. I just needed to add an auForm property to be able to get the aurelia-form object.

aureliaForm.formGroupsChanged is not getting fired. I think formGroupsChanged combined with a CollectionObserver could fix this.

Unhandled rejection TypeError in Internet Explorer 11 & Firefox 47

Hi

Can run this in IE 11 or Firefox 47.0.1

Receive the following error Unable to get property 'key' of undefined or null reference in IE and Unhandled rejection TypeError: element is undefined in Firefox.

Works fine in Chrome.

To "fix"

• Fix view-manager (it accepts weird paths. ../ where it should be ./
• Rename attribute to element (where applicable)
• Rename plural directories to singular
• Make framework the not-root directory (move it in view? Donno)
• Allow overriding components as well
• Remove fieldset from schema-form
• Simplify directory structure

Set select value when not given

You must always define a value:

  operatorElement = {
    key    : 'foo',
    type   : 'select',
    options: [
      {name: 'foo', value: 'foo'}
    ]
  }

When not given a value, generate it based on name? (like the html option tag)

Error with v1.0 and aurelia-cli: Uncaught Error: Mismatched anonymous define() module

package_json.txt
I have a main app that I was slowly integrating aurelia-form. The pre-v1.0 versions compiled and allowed my app to run. The v1.0 version with the dependences set in the aurelia.json to "**/*.js" are failing on load with errors. The errors appear to happen when loading the form elements classes of aurelia-form. I'm using Windows 10 and TypeScript.

I have traced it to intakeDefines() of requirejs where the "name" value for "aurelia-form" is null. It finds this where it checks

while (defQueue.length) {
    args = defQueue.shift();
    if (args[0] === null) { // <== this value is null

This condition does not appear to happen in a very skinny application that has no features other than the libraries needed for aurelia-form. I have attached my aurelia.json and the error log.
Paul

P.S. Let me know and I will shrink the app down to the minimum needed to cause the error.

localhost-1488529330641_log.txt

[aurelia_json.txt]
package_json.txt
(https://github.com/SpoonX/aurelia-form/files/816194/aurelia_json.txt)

Switch to aurelia-validation

Feature request: Support the new aurelia-validation. I'm not gonna use aurelia-form until this is adopted.

Prevent multiple form submissions

sometimes you need to prevent to being sent twice

now you can disable the submission in the valid event, but you cannot disable the auto submit button

new docs

Write docs for next aurelia-form

form-element: lifecycle events should be triggered for the child element

Aurelia is not triggering lifecycle events on the dynamically added custom elements.
See: TemplatingEngine docs enhance method

enhance(): View
Returns
A View representing the enhanced UI. Consumers of this API are responsible for enforcing the View lifecycle.A View representing the enhanced UI. Consumers of this API are responsible for enforcing the View lifecycle.

I think form-element should trigger those on its child element.
I expect all these lifecycle events to be trigger properly on my custom element: created, bind, attached, detached, unbind
detached and unbind are never triggered at the moment.

Styling 2 association selects

When placing 2 association-select under each other the 2e label will not be positioned by the 2e select.
Also the select is missing a margin-bottom.

Runtime Error in vendor-bundle.js

I have installed and am running a simple app with nothing but pages loaded and getting an error in vendor-bundle.js at line 9054

define('text!aurelia-form/component/form-field.html', ['module'], function(module) { module.exports = "<template>\n  <!-- does not have a view model, meaning that it is a html only component -->\n  <compose\n    if.bind=\"!hasViewModel && visible\"\n    view.bind=\"view\"></compose>\n\n  <!-- has a view model this is a component with view model -->\n  <compose\n    if.bind=\"hasViewModel && visible\"\n    model.bind=\"model\"\n    view-model.bind=\"view\"></compose>\n</template>\n"; });
define('text!aurelia-form/component/form-fields.html', ['module'], function(module) { module.exports = "<template>\n\n  <form-field repeat.for=\"element of schema\"\n    if.bind=\"hasKeyProp(element)\"\n    value.bind=\"model[element.key]\"\n    message.bind=\"messages[element.key]\"\n    element.bind=\"element\">\n  </form-field>\n\n  <form-field repeat.for=\"element of schema\"\n    if.bind=\"!hasKeyProp(element)\"\n    value.bind=\"model\"\n    message.bind=\"messages[element.key]\"\n    element.bind=\"element\">\n  </form-field>\n\n</template>\n"; });
define('text!aurelia-form/component/schema-form.html', ['module'], function(module) { module.exports = "<template>\n  <form role=\"form\">\n    <slot name=\"schema-form-header\"></slot>\n    <form-fields messages.bind=\"messages\" model.bind=\"model\" schema.bind=\"schema\"></form-fields>\n    <slot name=\"schema-form-footer\"></slot>\n  </form>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/actions.html', ['module'], function(module) { module.exports = "<template>\n  <require from=\"./form-group\"></require>\n  <require from=\"./../../../attributes\"></require>\n  <form-group role=\"group\" element.bind=\"element\" message.bind=\"message\">\n    <div class=\"btn-group\" attributes.bind=\"element.attributes\">\n      <button repeat.for=\"action of element.actions\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        attributes.bind=\"action.attributes\"\n        click.delegate=\"action.action(value, element.index, $event)\"\n        t.bind=\"action.label\">\n        ${action.label}\n      </button>\n    </div>\n  </form-group>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/association.html', ['module'], function(module) { module.exports = "<template>\n  <require from=\"./../../../attributes\"></require>\n  <require from=\"./form-group\"></require>\n  <form-group role=\"group\" element.bind=\"element\" message.bind=\"message\">\n    <association-select\n      attributes.bind      = \"element.attributes\"\n      multiple.bind        = \"element.multiple\"\n      value.bind           = \"value\"\n      property.bind        = \"element.property\"\n      repository.bind      = \"element.repository\"\n      resource.bind        = \"element.resource\"\n      association.bind     = \"element.association\"\n      manyAssociation.bind = \"element.manyAssociation\"\n      criteria.bind        = \"element.criteria\"></association-select>\n    <span class=\"help-block\">${messages[element.key]}</span>\n  </form-group>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/checkbox.html', ['module'], function(module) { module.exports = "<template>\n  <require from=\"./form-group\"></require>\n  <require from=\"./../../../attributes\"></require>\n  <form-group element.bind=\"element\" message.bind=\"message\">\n    <div class=\"checkbox\">\n      <label>\n        <input\n          attributes.bind=\"element.attributes\"\n          type=\"checkbox\"\n          t.bind=\"label\"\n          name.bind=\"element.key\"\n          checked.bind=\"element.value\">\n          ${label}\n      </label>\n    </div>\n  </form-group>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/checkboxes.html', ['module'], function(module) { module.exports = "<template>\n  <require from=\"./../../../attributes\"></require>\n  <require from=\"./../../../converter/normalizeOptions\"></require>\n  <require from=\"./form-group\"></require>\n  <form-group element.bind=\"model.element\" attributes.bind=\"model.element.attributes\">\n    <div class=\"checkbox\" repeat.for=\"option of model.element.options | normalizeOptions\">\n      <label>\n        <input\n          attributes.bind=\"option.attributes\"\n          type=\"checkbox\"\n          name.bind=\"option.name\"\n          model.bind=\"option.value\"\n          checked.bind=\"model.value\">\n          ${option.name}\n      </label>\n    </div>\n  </form-group>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/collection.html', ['module'], function(module) { module.exports = "<template>\n  <require from=\"./../../../attributes\"></require>\n  <require from=\"./form-group\"></require>\n  <form-group element.bind=\"element\" message.bind=\"message\">\n    <form-fields repeat.for=\"model of models\"\n      attributes.bind=\"element.schema.attributes\"\n      model.bind=\"model\"\n      schema.bind=\"schema($index)\">\n    </form-fields>\n  </form-group>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/conditional.html', ['module'], function(module) { module.exports = "<template>\n  <form-fields\n    schema.bind=\"schema\"\n    model.bind=\"model\">\n  </form-fields>\n</template>\n"; });
define('text!aurelia-form/component/framework/bootstrap/fieldset.html', ['module'], function(module) { module.exports = "<template>\n  <require from=\"./../../../attributes\"></require>\n  <fieldset attributes.bind=\"element.attributes\">\n    <form-fields\n      model.bind=\"value\"\n      schema.bind=\"element.schema\">\n    </form-fields>\n  </fieldset>\n</template>\n"; });
// this is line 9054
<template>
  <require from="./form-group"></require>
  <form-group element.bind="element" message.bind="message">
    <input
      attributes.bind="element.attributes"
      type="file"
      name.bind="element.key"
      value.bind="element.value">
  </form-group>
</template>

Form builder component

An Aurelia component that enables users to build forms.