ampersandjs / ampersand-input-view Goto Github PK

It looks like if you set type to textarea, handleTypeChange simply replaces your <input> with a <textarea>. In my case, I'm using a CSS framework that requires class="textarea" be set on <textarea> elements for proper rendering.

It's not clear what the best solution here is. The only idea I've thought of so far is to define both an <input> and a <textarea> in the template and have handleTypeChange hide or remove the unnecessary one.

An alternative (and "for now" workaround) is to extend ampersand-input-view with a textarea-view class that has its own template.

Is there an easy way to mark an ampersand-input-view as invalid with a serverside error message?

e.g. i have an registration-view with email and password fields and get serverside validation information for one or both.

It would be nice to identify individual elements from the <label> parent. Adding a class option that can contain a string that would be applied to the label's class attribute would achieve this.

It would be nice to have a getValue that mirrors setValue to allow the form-view to aggregate field values.

for example:

new InputView({
        name:        'assignmentDate',
        label:       'date',
        placeholder: 'mm/dd/yyyy',
        value:       this.model.assignmentDate,
        type:        'date',
        required:    true,
        parent:      this
      })

causes:

If setValue is called before the view is rendered (as it is in ampersandjs/ampersand-view-conventions) this line explodes: https://github.com/AmpersandJS/ampersand-input-view/blob/master/ampersand-input-view.js#L128

Update the docs to reflect this

Because rootElementClass is a prop and not derived, one can't override it to be something that can track the input's state like validityClass currently does. A lot of UI layouts have the entire label styled differently for error/valid state.

Looks like it's not looking for "template" as a passed option.

You can extend it as illustrated here:
https://github.com/AmpersandJS/ampersand/blob/master/template/shared/client/forms/person.js#L4-L17

But not pass it into the constructor - like this:
https://gist.github.com/tracyfloyd/a77f2ee4fbdb8773d815

Would also be nice if you could assign a template with an object like you do for other views.

When validating an input field, the tests run multiple times per input change. runTests() is called 3 times per input change while that input is invalid, and then 7 times once a valid value starts (I'm just checking length).

This gist just logs a console message as a simple test: http://requirebin.com/?gist=a728e6caf6f7a0eff022, but if you start typing you'll see the tests run multiple times.

Removing cache: false on the valid derived property stops this from happening.

I feel like it should be the case where validation only happens one once per input change, but maybe there is something else requiring cache to be false.

It's not an official view convention but I was wondering if the render method should follow ampersand-view and return this after it's done rendering. Seems confusing to not do so. I'd be happy to submit a PR with tests if you agree

In the ampersand example app I tried to pass this template:

<div class="pure-control-group">
  <div role="message-container">
    <p role="message-text"></p>
  </div>
  <label for="name" role="label"></label>
  <input id="name" type="text">
</div>

without any effect.

The validityClass is a binding and is therefor not getting called in the beforeSubmit function. This means that if a user submits an empty form the error message appears below the input but the class is never updated.

If I want to extend this view with the purpose of defining some new bindings it seems I must copy and paste the bind gins defined in the view if I want them to persist. With other things like props they get merged in. What is the best way to merge bindings?

Currently the labels supplied in the default template are implicitly associated with the inputs (using nesting).

<label>Name<input type="text" /></label>

It would be awesome to be able to associate them explicitly with a "for" attribute that references the id of the input through an option or by default. They are a little more robust than using nesting (and easier to style - when doing rtl layouts, needing to hide one without the other etc) and preferred in terms of accessibility.

<label for="InputId">Name</label> <input type="text" id="InputId" />

I know this should be easy enough to achieve although I wasn't sure whether there would be a preference on how the id property should be generated for this or whether there would ever be a need to pass them in? I'm wary of them having to be unique.

When filling out an input field, sometimes the browser presents me with past values. On accepting these values, the input does not have events fire, leaving the last value that was there.

Browser: Safari 7.0.4

Screenshot of value drop down:

Screenshot of returned value via console (no event fired, either);

Note: the field with the label Address 2 is bound to the property street2

Hey,
first of all great work with ampersand, really enjoying what I'm seeing so far.
I have one question though, is there a way to do validation calls that are async in nature, i.e. by doing a server request?

In a form view created by the CLI, I have added type: 'number' (ExtendedInput is the same as from the demo app):

            new ExtendedInput({
                label: "Order",
                name: "order",
                value: this.model && this.model.order,
                type: 'number',
                required: true,
                placeholder: "Order",
                parent: this
            })

The model's property is defined as such:

        order: ['number', true, 100]

The form displays nice little up and down arrow, and using the keyboard arrows changes the values appropriately.
Positive and negative values work fine, however when passing from -1 to 0, or from 1 to 0 the error message This field is required. is displayed.

It should be possible to enter a number with a value of 0.

Due to: https://github.com/AmpersandJS/ampersand-input-view/blob/master/ampersand-input-view.js#L68

Parent update gets duplicate call. At least it appears to be duplicated. I don't see any differences on the object passed.

Not sure what a proper fix would be. One suggestion would be to mimic the event pattern and send another argument that tells the parent which event is being fired.

I'm trying out Ampersand by creating a simple chat page by modifying the sample app.

For this chat page, I have a message input field that I want to behave like InputView, but with two changes:

• I don't want the field's validity to be checked on blur.
• I want reset to set shouldValidate to false.

Right now I'm simply doing:

var InputView = require('ampersand-input-view');
// modify InputView to behave as we want it to
InputView.prototype.handleBlur = function() {};
InputView.prototype.reset = function() {
    this.setValue('');
    this.shouldValidate = false;
}

Is there a better way? I tried this with no success:

ExtendedInputView = InputView.extend({
    handleBlur: ...
    reset: ...
});

I'd also like to give the input an "autofocus: true" attribute, but the only ways I know how to do that would be to completely override the template, or wait until the input has been rendered, then do something like input_view.get('.form-input').setAttribute('autofocus', true);

One thing I was able to find out was how to override a derived property:

ExtendedInputView = InputView.extend({
    derived: {
        validityClass: {
            deps: ['valid', 'validClass', 'invalidClass', 'shouldValidate'],
            fn: function () {
                if (!this.shouldValidate) {
                    return '';
                } else {
                    return this.valid ? this.validClass : this.invalidClass;
                }
            }
        }
    }
});

At some point, it makes more sense to simply create my own version of InputView; I'd just like to know how much of what I want is possible without doing so.

when trying to cast back values the model will not be able to cast empty string '' to number and thus throw a casting error

very useful in bootstrap's case where you should add the validation class to root element:
http://getbootstrap.com/css/#forms-control-validation

It is not possible to set step argument without overriding template. This could be handled same way that type change is handled now.

Step argument in input allows decimal number input.

This is an input of type 'number' straight from the demo app.

new InputView({
  label: "Coolness Factor",
  name: "coolnessFactor",
  value: this.model && this.model.coolnessFactor,
  type: "number", 
})

If I focus input, enter some number and submit form it sends value as Number

{"id":11, "firstName": "Ivan", "lastName": "Kleshnin", "coolnessFactor": 1}

Lets then rerender page. If I now submit form (omitting manual input action) it sends value as String!

{"id": 11, "firstName": "Ivan", "lastName": "Kleshnin", "coolnessFactor": "1"}

It looks like, Ampersand-Input somehow binds it type conversion with input action which is obviously wrong but may be it's just a side-effect of something else. Documentation mentions there is a possibility to make value derived:

 derived: {
  value: {
    deps: ['...'],
    fn: function () {
      ...
    }
},

but I want to get basic conventions on this. I'm used to think that types should be set in declarative way and I don't want to define those deps for every field.

ampersand-form-view documentation states that the field views can optionally specify a beforeSubmit callback - however there is no room for this in the initialization options for ampersand-input-view. It would be nice to have this be available in ampersand-input-view's initialize method so that a user doesn't have to extend for each different type of input they have on a form.