ampersandjs / ampersand-input-view Goto Github PK
View Code? Open in Web Editor NEWA view module for intelligently rendering and validating input. Works well with ampersand-form-view.
License: MIT License
A view module for intelligently rendering and validating input. Works well with ampersand-form-view.
License: MIT License
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.
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.
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.
when trying to cast back values the model will not be able to cast empty string ''
to number
and thus throw a casting error
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
Update the docs to reflect this
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.
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.
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.
very useful in bootstrap's case where you should add the validation class to root element:
http://getbootstrap.com/css/#forms-control-validation
It would be nice to have a getValue that mirrors setValue to allow the form-view to aggregate field values.
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.
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.
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.
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?
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
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.
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.
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.
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
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.
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:
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.