ampersand-array-input-view

Lead Maintainer: Michael Garvin

overview

A view module for intelligently rendering and validating inputs that should produce an array of values. Works well with ampersand-form-view.

It does the following:

• Automatically shows/hides error messages based on tests
• Exposes control for adding more input fields.
• Exposes control removing all but required number of input fields.
• Will not show error messages pre-submit or it's never had a valid value. This lets people tab-through a form without triggering a bunch of error message.
• Live-validates to always report if in valid state, but only shows messages when sane to do so.

install

npm install ampersand-array-input-view

example

The only required attribute is a name. Everything else is optional.

1var InputView = require('ampersand-array-input-view');
2
3
4var field = new InputView({
5    // form input's `name` attribute
6    name: 'client_name',
7    // You can replace the built-in template for the parent item
8    // just give it an html string. Make sure it has a single "root" element that contains:
9    //  - an element with a `data-hook="label"` attribute
10    //  - an element with a `data-hook="fieldContainer"` this is where individual fields go
11    //  - an element with a `data-hook="main-message-container"` attribute (this we'll show/hide)
12    //  - an elememt with a `data-hook="main-message-text"` attribute (where message text goes for error)
13    template: // some HTML string,
14    // Template for individual view. It should be a string of HTML
15    // Make sure it has a single "root" element that contains
16    //  - an element with a `data-hook="label"` attribute
17    //  - an element with a `data-hook="message-container"` attribute (this we'll show/hide)
18    //  - an elememt with a `data-hook="message-text"` attribute (where message text goes for error)
19    fieldTemplate // HTML string
20    // Label name
21    label: 'App Name',
22    // Optional placeholder attribute
23    placeholder: 'My Awesome App',
24    // optional intial value if it has one
25    value: ['hello'],
26    // optional, this is the element that will be
27    // replaced by this view. If you don't
28    // give it one, it will create one.
29    el: document.getElementByID('field'),
30    // use min/max length to set how many answers
31    // are required
32    minLength: 0,
33    maxLength: 10,
34    // class to set on input when input is valid
35    validClass: 'input-valid', // <- that's the default
36    // type value to use for the input tag's type value
37    type: 'text',
38    // class to set on input when input is valid
39    invalidClass: 'input-invalid', // <- that's the default
40    // Message to use if error is that it's required
41    // but no value was set.
42    requiredMessage: 'This field is required.',
43    // An array of test functions that each input must pass.
44    // They will be called in order with the current input value
45    // and you should write your test to return an error message
46    // if it fails and something falsey if it passes.
47    // Note that these tests get called with the field view instance as
48    // it's `this` context.
49    tests: [
50        function (val) {
51            if (val.length < 5) return "Must be 5+ characters.";
52        }
53    ],
54    // optional, you can pass in the parent view explicitly
55    parent:  someViewInstance
56});
57
58// append it somewhere or use it in side an ampersand-form-view
59document.querySelector('form').appendChild(field.el);
60

credits

Created by @HenrikJoreteg.

changelog

• 5.0.0 - update &-input-view dependency to 5.0.0
• 4.0.0 - bump major versions of most dependencies

license

MIT