ffxsam / formous Goto Github PK
View Code? Open in Web Editor NEWSimple and elegant form-handling for React - ABANDONWARE
License: MIT License
Simple and elegant form-handling for React - ABANDONWARE
License: MIT License
I haven't tracked down the cause. But I have a form that works fine in a client-only app, but causes server-side rendering to hang.
My form looks like this:
/* @flow */
import React from 'react';
import Formous from 'formous';
const ErrorText = ({errorText}) =>
<div style={{ color: '#f00' }}>{errorText}</div>;
class LoginForm extends React.Component {
render() {
const {
fields: { username, password },
formSubmit,
onSubmit,
} = this.props;
console.log('username, password');
return (
<div>
<form onSubmit={formSubmit(onSubmit)}>
<div>
<input
placeholder="username or email address"
type="text"
value={username.value}
{...username.events}
/>
</div>
<div>
<input
placeholder="your password"
type="password"
value={password.value}
{...password.events}
/>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
);
}
}
const formousOptions = {
fields: {
username: {
name: 'username',
tests: [
{
critical: true,
failProps: { errorText: 'Your username or email address is required.' },
test: value => value !== '',
},
],
},
password: {
name: 'password',
tests: [
{
critical: true,
failProps: { errorText: 'You must supply a password.' },
test: value => value !== '',
},
],
},
},
};
export default Formous(formousOptions)(LoginForm);
I'm rendering it in this component:
const GlobalHeader = () => {
return (
<div className={styles.root}>
<div className={styles.logo}>
<Logo />
</div>
<div className={styles.locale}>
<LocaleSwitcher />
</div>
<div className={styles.login}>
<LoginForm />
</div>
</div>
);
};
I'm building a multi step form and i'm having a bit of trouble understanding how to get this to work with nested form field sections. Example: Form Container
Bug:
<form onSubmit={formSubmit(this.handleSubmit)}>
<input type="text" placeholder="username" value={username.value} {...username.events} />
<input type="password" placeholder="password" value={password.value} {...password.events} />
<button type="submit">Submit</button>
</form>
username
input.password
input gets focusformStatus.valid
is false
even when the inputs are correct so handleSubmit
alerts Please address the errors in the form
Possible Fixes:
formSubmit
.Probably would fix #7
Wondering if it's possible to use this package with react-bootstrap for validation.
In react-bootstrap, there is a validationState property to set 'error', but it's on the element's parent component, FormGroup. FormGroup wraps both the label and the form control.
would you be open to passing formStatus to the wrapped component? ie:
return <Wrapped
{ ...this.props }
fields={this.state.fields.toJS()}
formStatus={this.state.form.toJS()}
formSubmit={this.formSubmit}
setDefaultValues={this.setDefaultValues}
/>
This would be useful in cases where you might want to disable something if the form is not valid.
Hi! I have a problem with setting up checkboxes inside formous. What's the best way to do it?
Now I have to do something like this:
<Checkbox
checked={this.state.rememberMeValue}
onBlur={(event) => {
event.target.value = this.state.rememberMeValue;
rememberMe.events.onBlur(event);
}}
onChange={(event) => {
this.setState({ rememberMeValue: !this.state.rememberMeValue });
event.target.value = this.state.rememberMeValue;
rememberMe.events.onChange(event);
}}
>
Remember me
</Checkbox>
I guess checkboxes aren't supported by formous, are they?
Currently if the field hasn't been touched, it seems it doesn't show the error. Can we have a setting where the errors are shown up whenever a user submits the form?
since setDefaultValues
calls setState inside Formous, the form component that is wrapped by Formous can still rendered once without default values
ie in the form's componentWillMount
componentWillMount() {
this.props.setDefaultValues({
someField: 'hello'
});
},
render() {
this.props.fields.someField.value; // this will still be an empty string: ""
// ...
}
it would be nice if the field options allowed an initial value
or do you have another idea how render could be prevented until i am able to set the default value?
I guess this would require access to formStatus
in the form onChange
event.
Can you make and add a link to a HTML demo page like https://github.com/davezuko/react-reformed has?
Object doesn't support property or method 'findIndex'
Hey! nice work on formous... I always get hipped with high order components :D
I'd like to suggest you to rename your package to react-formous
, considering that all packages strictly created for react has this prefix... this would make it easier for react developers to find your package (at least it would for me).
Also, the name is available for registration :D https://www.npmjs.com/package/react-formous
This is just a suggestion though, formous
is still a great name
๐
Just wondering if usage of HOC is right here. Shouldnt this technique be used for extending component behaviour but without it knowing it?
Here we have used it to inject few things into it. Seems for me that regular component with children would be more appropriate here. What are your thoughts on the matter?
Cheers.
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.