galki / material-ui-form Goto Github PK
View Code? Open in Web Editor NEWState and validation support for Material-UI form components
License: MIT License
State and validation support for Material-UI form components
License: MIT License
getElementFromProps
)When I put TextFields and every other controls inside the Grid component, the submit does return an empty object, also when I put it inside the div with bootstrap grid classes ( or without any class) in addition the same result appears, moreover the validation does not work.
submit = (values, pristineValues) => {
console.log(values);
}
<MaterialUIForm onSubmit={this.submit}>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
<TextField
label="Name"
type="text"
name="ccccc"
data-validators="isRequired,isAlpha"
onChange={e => this.customInputHandler(e.target.value)}
fullWidth
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label="Database Host"
type="text"
name="vvvvvvv"
data-validators="isRequired,isAlpha"
onChange={e => this.customInputHandler(e.target.value)}
fullWidth
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label="Port"
type="number"
name="tttttttt"
data-validators="isRequired,isAlpha"
onChange={e => this.customInputHandler(e.target.value)}
fullWidth
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label="Host"
type="text"
name="ttttt"
data-validators="isRequired,isAlpha"
onChange={e => this.customInputHandler(e.target.value)}
fullWidth
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label="Host"
type="text"
name="ttt"
data-validators="isRequired"
onChange={e => this.customInputHandler(e.target.value)}
fullWidth
/>
</Grid>
</Grid>
</Grid>
<Button variant="raised" type="reset">Reset</Button>
<Button variant="raised" type="submit">Submit</Button>
</MaterialUIForm>`
Is it at all possible to use material-ui-pickers with material-ui-form?
Hello,
Is it possible to add a string and array of objects in data-validators?
This is what I am trying to achieve:
<TextField fullWidth name="Name" value="" margin="normal" data-validators={['isRequired', [{ isLength: { min: 4, max: 5 } }]]} />
After testing, the 'isLength' validation does not work.
defaultValue
suggested for uncontrolled components so should use value
instead
the built dist/main
file generates this error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
these events should be sent through the Form
I started using material-ui-form along with Firebase Firestore on a current project, thanks for your hard work.
I'm providing an empty string state for each textfields value in my form via the constructor. Then on componentDidMount i'm retrieving the values from my database and updating the state to the retrieved values. The only thing is the textfields are not updating to the new values, what have I missed here?
I can get the values if I hold rendering the form until the values are retrieved, but it does not look as good. I was hoping to disable the form fields whilst loading rather than hiding the whole form.
I hope that all makes sense?
When try to edit a text field value the cursor keep jumping to end of input field.
import React from 'react';
import InputLabel from '@material-ui/core/InputLabel';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import MaterialUIForm from 'material-ui-form'
import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/es/Checkbox/Checkbox";
const styles = theme => ({
form: {
display: 'flex',
flexDirection: 'row',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
},
btn: {
display: 'flex',
marginTop: theme.spacing.unit * 2,
marginLeft: '32px'
}
});
class OrganizationForm extends React.Component {
render() {
let { classes, onSubmit, error, user: organization, empty, mode, orgList, typeOwn } = this.props;
if(!typeOwn)
{
return null;
}
if(!empty && !organization)
{
return null;
}
else if(empty)
{
organization = {};
}
const fullDisable = mode === 'view';
return (
<div className={classes.form} >
<MaterialUIForm error={error || null} onSubmit={onSubmit}>
{error ? <small className="error">{error}</small> : null}
<TextField
label="Название компании"
type="text"
name="title"
value={organization.title || ""}
autoComplete={'title'}
data-validators="isRequired"
style={{ display: 'flex' }}
disabled={fullDisable}
/>
<Checkbox
checked={organization.isActive}
name="isActive"
value=""
disabled={fullDisable}
/>
<span>Состояние компании</span>
<Checkbox
checked={organization.bankAccountStatus}
name="bankAccountStatus"
value=""
disabled={fullDisable}
/>
<span>Состояние счета</span>
<FormControl>
<InputLabel>Связанные компании</InputLabel>
<Select
multiple
required
value={organization.relatedOrganizations ? organization.relatedOrganizations.map((o) => o.id) : []}
style={{ display: 'flex' }}
inputProps={{
name: 'relatedOrganizations',
id: 'relatedOrganizationsid',
}}
name='relatedOrganizations[]'
disabled={fullDisable}
>
{orgList.map((o) => <MenuItem key={o.id} value={o.id}>{o.title}</MenuItem>)}
</Select>
</FormControl>
{fullDisable ? null : (
<Button
variant="raised"
size="large"
color="primary"
className={classes.btn}
type="submit">{mode === 'edit' ? 'Обновить' : 'Создать'}</Button>
)}
</MaterialUIForm>
</div>
);
}
}
export default withStyles(styles)(OrganizationForm);
Hi! In this from i have two errors:
Warning: React does not recognize the
helperText
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasehelpertext
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input)
in Select (created by WithStyles(Select))
in WithStyles(Select) (created by OrganizationForm)
in FieldClone (created by Form)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by OrganizationForm)
in form (created by Form)
in Form (created by OrganizationForm)
in div (created by OrganizationForm)
in OrganizationForm (created by WithStyles(OrganizationForm))
in WithStyles(OrganizationForm) (created by OrganizationsEdit)
in OrganizationsEdit (created by WithStyles(OrganizationsEdit))
in WithStyles(OrganizationsEdit) (created by component)
in component (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in ContextProvider (created by App)
in MuiThemeProvider (created by App)
in App
and
Warning: Received
false
for a non-boolean attributeerror
.If you want to write it to the DOM, pass a string instead: error="false" or error={value.toString()}.
If you used to conditionally omit it with error={condition && value}, pass error={condition ? value : undefined} instead.
in span (created by ButtonBase)
in ButtonBase (created by WithStyles(ButtonBase))
in WithStyles(ButtonBase) (created by IconButton)
in IconButton (created by WithStyles(IconButton))
in WithStyles(IconButton) (created by SwitchBase)
in SwitchBase (created by WithStyles(SwitchBase))
in WithStyles(SwitchBase) (created by Checkbox)
in Checkbox (created by WithStyles(Checkbox))
in WithStyles(Checkbox) (created by OrganizationForm)
in FieldClone (created by Form)
in form (created by Form)
in Form (created by OrganizationForm)
in div (created by OrganizationForm)
in OrganizationForm (created by WithStyles(OrganizationForm))
in WithStyles(OrganizationForm) (created by OrganizationsEdit)
in OrganizationsEdit (created by WithStyles(OrganizationsEdit))
in WithStyles(OrganizationsEdit) (created by component)
in component (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in ContextProvider (created by App)
in MuiThemeProvider (created by App)
in App
and i can not understand what this errors???
Please help me! It's very urgent
{
"devDependencies": {
"@symfony/webpack-encore": "^0.20.0",
"babel-preset-react": "^6.24.1",
"prop-types": "^15.6.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server --port 9001",
"dev": "encore dev",
"watch": "encore dev --watch ",
"build": "encore production"
},
"dependencies": {
"@material-ui/core": "^1.4.1",
"@material-ui/icons": "^2.0.0",
"axios": "^0.18.0",
"babel-preset-stage-0": "^6.24.1",
"lodash": "^4.17.11",
"material-ui": "^0.20.2",
"material-ui-form": "^1.0.0-alpha.26",
"moment": "^2.22.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1"
}
}
flag to determine when to send input data to form [onChange | onBlur]
Hi! I try add style to form
element, but className
and style
attributes did not work.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MaterialUIForm from 'material-ui-form'
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
const styles = theme => ({
form: {
display: 'flex',
flexDirection: 'row',
textAlign: 'center'
}
});
class Login extends React.Component {
submit(values, pristineValues) {
console.log(values, pristineValues)
// get all values and pristineValues on form submission
}
render() {
const { classes } = this.props;
return (
<div className={classes.form} >
<MaterialUIForm onSubmit={this.submit} style={{ margin: '0 auto' }}>
<TextField
label="Login"
type="text"
name="username"
value=""
data-validators="isRequired"
style={{ display: 'flex' }}
/>
<TextField
label="Password"
type="password"
name="password"
value=""
data-validators="isRequired"
/>
<Button variant="raised" style={{ display: 'flex' }} type="submit">Submit</Button>
</MaterialUIForm>
</div>
);
}
}
Login.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Login);
add data-validations
prop to mui input components (validators are comma separated string or array of objects)
wrap mui input with Validator
component (validators would be props)
I tried to add the default form attributes and some custom attributes in fields. But it's not rendering into dom.
Below is an example of my MaterialUIForm skeleton.
<MaterialUIForm autoComplete="on" method="POST" action="example.com" name="my_form_name" id="form_id >
But in dom it looks like.
<form autocomplete="on">
As you can except "autocomplete" , no other attributes not working.
refreshing the page while on say http://localhost:8080/misc-props
breaks the site. how to fix this? is there "pass-thru" functionality in webpack-dev-server?
https://github.com/unitedhubs/material-ui-form/blob/dev/package.json#L54
Are you sure react is a devDependency and not a dependency ?
You should probably also mention this on the README page.
https://github.com/unitedhubs/material-ui-form/blob/dev/src/components/Form.js#L12
Why not add all these methods as class methods ? You do not seem to use them elsewhere, and by interacting with the instance props, they become intertwined with the class.
https://github.com/unitedhubs/material-ui-form/blob/dev/src/components/Form.js#L190
You can simplify the enableSubmitButton and disableSubmitButton code as follow:
toggleSubmitButton() {
this.setState({ disableSubmitButton: !this.state.disableSubmitButton })
}
In general:
Other than that, LGTM !
is preventing any input value change. see example Custom Validation Messages
treat as non-interactive controlled component
Im switching to Angular and wont maintain this anymore. If you are interested in becoming a maintainer (github and npm) please communicate so here.
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.