Neutron Polarization Manipulator

    ampersand-array-input-view

    6.1.0 • Public • Published

    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.

    var InputView = require('ampersand-array-input-view');
     
     
    var field = new InputView({
        // form input's `name` attribute
        name: 'client_name',
        // You can replace the built-in template for the parent item
        // just give it an html string. Make sure it has a single "root" element that contains:
        //  - an element with a `data-hook="label"` attribute
        //  - an element with a `data-hook="fieldContainer"` this is where individual fields go
        //  - an element with a `data-hook="main-message-container"` attribute (this we'll show/hide)
        //  - an elememt with a `data-hook="main-message-text"` attribute (where message text goes for error)
        template: // some HTML string,
        // Template for individual view. It should be a string of HTML
        // Make sure it has a single "root" element that contains
        //  - an element with a `data-hook="label"` attribute
        //  - an element with a `data-hook="message-container"` attribute (this we'll show/hide)
        //  - an elememt with a `data-hook="message-text"` attribute (where message text goes for error)
        fieldTemplate // HTML string
        // Label name
        label: 'App Name',
        // Optional placeholder attribute
        placeholder: 'My Awesome App',
        // optional intial value if it has one
        value: ['hello'],
        // optional, this is the element that will be
        // replaced by this view. If you don't
        // give it one, it will create one.
        el: document.getElementByID('field'),
        // use min/max length to set how many answers
        // are required
        minLength: 0,
        maxLength: 10,
        // class to set on input when input is valid
        validClass: 'input-valid', // <- that's the default
        // type value to use for the input tag's type value
        type: 'text',
        // class to set on input when input is valid
        invalidClass: 'input-invalid', // <- that's the default
        // Message to use if error is that it's required
        // but no value was set.
        requiredMessage: 'This field is required.',
        // An array of test functions that each input must pass.
        // They will be called in order with the current input value
        // and you should write your test to return an error message
        // if it fails and something falsey if it passes.
        // Note that these tests get called with the field view instance as
        // it's `this` context.
        tests: [
            function (val) {
                if (val.length < 5) return "Must be 5+ characters.";
            }
        ],
        // optional, you can pass in the parent view explicitly
        parent:  someViewInstance
    });
     
    // append it somewhere or use it in side an ampersand-form-view
    document.querySelector('form').appendChild(field.el);
     

    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

    Install

    npm i ampersand-array-input-view

    DownloadsWeekly Downloads

    30

    Version

    6.1.0

    License

    MIT

    Last publish

    Collaborators

    • dhritzkiv
    • fyockm
    • pgilad
    • cdaringe
    • henrikjoreteg
    • latentflip