need to hide or unrender some of the fields based on the value of a combobox at the top of the form. Have tried wiring the value of the combo box back into the form from the state but thats triggering re-rendering when I'm typing in other fields and loses focus. Thought maybe mapProps with hidden on the fields that I need to disappear but it doesn't seem like the full form state is available on the fields mapProps.
pretty sure I'm just missing something obvious in the docs
you can always make a custom control that depends on a certain model
custom control is always a possibility, was hoping there was a simpler way of visiting the model the form is using from the control
or maybe is there a way to tell a control to use a model of x.y and use x.y.val as its value for display and validation purposes? then stick some more state beside it like x.y.hidden that I can use in mapProps to feed to the customComponent?
so just grab it from there
I've got something that works now passing the model field I want out of the forms state into the component that renders my form and switching the fields on and off with that, but it feels like I'm pulling the data from the wrong place. I'll see where I get to with what I have. Thanks
First of all, the library is AWESOME! Really!
But could anybody share good docs or git how to write unit tests for the forms?
:)
I was trying to find it in documentation, but without success
maybe it's there, but I just don't see it...
it would be a good idea to reference this repo in docs
are you using
react-redux-form or redux-form?
Hey @davidkpiano. Is there some reasoning behind not "allowing" <Errors /> component's messages to be an object? The component works fine even if it is an object, but I get type error in the browser console: "Failed prop type: Invalid prop
messages.isRequired supplied to Errors"
is someone there?
:)
@kkashou how exactly have you achieved it? My setup is working, but seems a little bit sophisticated to me:
class DatePickerInput extends Component {
constructor (props) {
super(props)
this.state = {
startDate: props.value ? moment.unix(props.value) : ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
this.props.onChange(date)
}
render() {
return <DatePicker
name={this.props.name}
className="form-control"
dateFormat="DD MMM YYYY"
locale="ru-ru"
readOnly={true}
selected={this.state.startDate}
onChange={this.handleChange}
minDate={this.props.minDate}
maxDate={this.props.maxDate}
placeholderText="Выберите дату"
/>;
}
}
export default class DatePickerControl extends Component {
customInput(props) {
return (<DatePickerInput {...props}/>);
}
render() {
return (
<div className="form-group">
{ this.props.label &&
<label className="control-label" htmlFor={this.props.id}>{this.props.label}</label>}
<Control {...this.props} className="form-control" component={this.customInput} getValue={(moment) => {
return parseInt(isNaN(parseInt(moment)) ? moment.format("X") : moment);
}}/>
</div>
);
}
}
Hello everyone! I'm fairly new to react and redux and my team is currently using react-redux-form. I have a question but there is some context before I ask.
I have a form, say the model is 'team', that will make a request to retrieve all data from the db, say 'users', when the component mounts. This users data will have a list of id's and a names. I will map over the names over a dropdown list using the Control.select and the model will point be "team.user.name".
So what I want to do is use the id to pass in with every option because my model needs the "team.user.id" to save to the db on submit. How is this done?
and then display the names based on the IDs (but don't have the names be the values of the options)
const required = () => ({ validator: (val) => (val && val.length) });
<Control
validators: { required: required().validator }
/>
Actually, this was completely my error. I can leave this message here as a warning for others, but my Control field was actually using a validateOn=“blur” only. Since the model change was debounced 300ms, if a user ‘tabs’ or clicks out of the field before the model can update, it will register as invalid.
It now appears all of my props are being passed straight down to the <input>
For example, <input label="Email Address" placeholder="Your email" controlprops="[object Object]" validators="[object Object]" messages="[object Object]" name="registration.email" value="a@b.com" fieldprops="[object Object]" class="form-control">
